CODEWITHSUNDEEP
androidanimationdialogandroid-animation
user3648597
user3648597

Reputation: 11

Dialog with animation

I want to click on a button, and a button will transform to dialog, like the picture. I have no idea how to do this.picture

Upvotes: 0

Views: 4962

Answers (1)

Patrick R
Patrick R

Reputation: 6857

I used the following animation to achieve something like that.. slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="600"
        android:fromXScale="0.6"
        android:fromYScale="0.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />

    <translate
        android:duration="600"
        android:fromYDelta="22%"
        android:toYDelta="0%" />

    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="600"
        android:fillAfter="true"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />

</set>

slide_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="600"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.6"
        android:toYScale="0.5" />

    <translate
        android:duration="600"
        android:fromYDelta="0%"
        android:toYDelta="26%" />

    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="600"
        android:fillAfter="true"
        android:fromAlpha="1.0"
        android:toAlpha="0" />
</set>

You can change pivotX and pivotY according to your need. style.xml

<style name="DialogTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:background">@color/transparent</item>
        <item name="android:windowEnterAnimation">@anim/slide_up</item>
        <item name="android:windowExitAnimation">@anim/slide_down</item>
</style>

In Your Dialog write

dialog.getWindow().getAttributes().windowAnimations = R.style.DialogTheme;

Hope this helps!

Upvotes: 4

Related Questions