Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dialog Transition Effects

Tags:

android

I am currently working on the transition effects for my dialog. Please refer to the image below: enter image description here

The entrance animation for my dialog should be top to middle. While the exit animation should be middle to top. I am using the following XML animations, but unfortunately, they're not working.

slide_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="100%p" android:toYDelta="0" 
android:duration="1000"/>
</set>

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="0%p" android:toYDelta="50%p"
android:duration="1000"/>

EDIT: This is not a usual Dialog. It is an activity applied with a Theme.Dialog in the AndroidManifest.xml

like image 336
Jayson Tamayo Avatar asked Oct 08 '22 06:10

Jayson Tamayo


1 Answers

if you are creating the dialog as an activity then you can follow this approach

You can create the animation classes :

public class DropDownToMiddleAnimation extends Animation {
    public int height, width;

    @Override
    public void initialize(int width, int height, int parentWidth,
            int parentHeight) {
        // TODO Auto-generated method stub
        super.initialize(width, height, parentWidth, parentHeight);
        this.width = width;
        this.height = height;
        setDuration(500);
        setFillAfter(true);
        setInterpolator(new LinearInterpolator());
    }

    Camera camera = new Camera();

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        // TODO Auto-generated method stub
        super.applyTransformation(interpolatedTime, t);

        Matrix matrix = t.getMatrix();
        camera.save();

        camera.getMatrix(matrix);
        matrix.setTranslate(0, ((height/2) * interpolatedTime)) );

        matrix.preTranslate(0, -height);
        camera.restore();

        this.setAnimationListener(this);
    }

and :

public class MiddleToTopAnimation extends Animation {
    public int height, width;

    @Override
    public void initialize(int width, int height, int parentWidth,
            int parentHeight) {
        // TODO Auto-generated method stub
        super.initialize(width, height, parentWidth, parentHeight);
        this.width = width;
        this.height = height;
        setDuration(500);
        setFillAfter(true);
        setInterpolator(new LinearInterpolator());
    }

    Camera camera = new Camera();

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        // TODO Auto-generated method stub
        super.applyTransformation(interpolatedTime, t);

        Matrix matrix = t.getMatrix();
        camera.save();

        camera.getMatrix(matrix);
        matrix.setTranslate(0, -((height/2) * interpolatedTime)) );//here is the change

        matrix.preTranslate(0, -height);
        camera.restore();

        this.setAnimationListener(this);
    }

and use them with your Dialog

LinearLayout ll = (LinearLayout) findViewById(R.id.parentLayout);//parent layout in the xml, which serves as the background in the custom dialog

ll.startAnimation(new DropDownToMiddleAnimation());//use with launching of the dialog

ll.startAnimation(new MiddleToTopAnimation());//use while dismissing the dialog/finishing the dialog activity
like image 115
Vinay W Avatar answered Oct 13 '22 09:10

Vinay W