ZOFTINO.COM android and web dev tutorials

Android Activity Transition Animation Examples

You can apply animations to activity transitions meaning entry and exist of an activity layout content can be animated. You can define animations in xml and set them as activity transition animations by calling overridePendingTransition() method and passing animation resources for entry activity and exit activity. Method overridePendingTransition() needs to be called immediately after startActivity.

Using view animation framework, you can define animations such as fade, rotation, slide, stretch, and explode and save them in res/anim folder, these resources can be used as animations for activity transitions.

Let’s see how animation can be applied to transitions between registration and login screens.

android activity transitions example

Entry Animation

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/bounce_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="-100%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="1500"/>
</set> 

Exit Animation

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/bounce_interpolator">
    <translate
        android:fromXDelta="-100%" android:toXDelta="0%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="1500"/>
</set> 

Registration Activity

 public class RegistrationActivity extends AppCompatActivity {
    private static final String TAG = "LoginActivity";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.registration_activity);

        Toolbar tb = findViewById(R.id.toolbar);
        setSupportActionBar(tb);
        tb.setSubtitle("Registration");

        findViewById(R.id.go_login_b).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                handleLoginClick();
            }
        });
    }
    private void handleLoginClick(){
        Intent i =  new Intent();
        i.setClass(this, LoginActivity.class);
        startActivity(i);
        overridePendingTransition(R.anim.fade_in, R.anim.fade_out);
    }
} 

Registration Layout

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"/>
    <android.support.constraint.ConstraintLayout
        android:id="@+id/reg_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/reg_bg"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="16dp">
        <android.support.design.widget.TextInputLayout
            android:id="@+id/name_l"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent">
            <android.support.design.widget.TextInputEditText
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Name" />
        </android.support.design.widget.TextInputLayout>
        <android.support.design.widget.TextInputLayout
            android:id="@+id/email_l"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/name_l">
            <android.support.design.widget.TextInputEditText
                android:id="@+id/email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Email" />
        </android.support.design.widget.TextInputLayout>
        <android.support.design.widget.TextInputLayout
            android:id="@+id/password_l"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/email_l">
            <android.support.design.widget.TextInputEditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:inputType="textWebPassword" />
        </android.support.design.widget.TextInputLayout>
        <Button
            android:id="@+id/register_b"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Register"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/password_l" />
        <Button
            android:id="@+id/go_login_b"
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Already registered? Login."
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/register_b" />
    </android.support.constraint.ConstraintLayout>
</LinearLayout> 

Login Activity

 package zoftino.com.databinding;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

/**
 * Created by srinu on 3/31/2018.
 */

public class LoginActivity extends AppCompatActivity {
    private static final String TAG = "LoginActivity";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.login_activity);

        Toolbar tb = findViewById(R.id.toolbar);
        setSupportActionBar(tb);
        tb.setSubtitle("Login");

        findViewById(R.id.go_reg_b).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                handleRegistrationClick();
            }
        });
    }
    private void handleRegistrationClick(){
        Intent i =  new Intent();
        i.setClass(this, RegistrationActivity.class);
        startActivity(i);
        overridePendingTransition(R.anim.scale_anim, R.anim.translate_anim);
    }
} 

Login Layout

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />
    <android.support.constraint.ConstraintLayout
        android:id="@+id/login_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/login_bg"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="16dp">
        <android.support.design.widget.TextInputLayout
            android:id="@+id/login_email_l"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent">
            <android.support.design.widget.TextInputEditText
                android:id="@+id/login_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Email" />
        </android.support.design.widget.TextInputLayout>
        <android.support.design.widget.TextInputLayout
            android:id="@+id/login_password_l"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/login_email_l">
            <android.support.design.widget.TextInputEditText
                android:id="@+id/login_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:inputType="textWebPassword" />
        </android.support.design.widget.TextInputLayout>
        <Button
            android:id="@+id/login_b"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Login"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/login_password_l" />
        <Button
            android:id="@+id/go_reg_b"
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Don't have an account? Sign up now."
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/login_b" />
    </android.support.constraint.ConstraintLayout>
</LinearLayout> 

Animations

Some of the animation definitions which you can use as animation for activity transitions.

Fade in

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
    <alpha
        android:duration="1200"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set> 

Fade out

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
    <alpha
        android:duration="1200"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set> 

Blink

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="200"
        android:repeatMode="reverse"
        android:repeatCount="infinite"/>
</set> 

Bounce

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/bounce_interpolator">
    <scale
        android:duration="400"
        android:fromXScale="0.0"
        android:toXScale="1.0"
        android:fromYScale="1.0"
        android:toYScale="1.0" />
</set> 

Slide up

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <scale
        android:duration="800"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="1.0"
        android:toYScale="0.0" />
</set>

Slide down

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <scale
        android:duration="800"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

Move

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/overshoot_interpolator">
    <translate
        android:fromXDelta="0%p"
        android:toXDelta="60%p"
        android:duration="1000" />
</set>

Rotate

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/cycle_interpolator">
    <rotate android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="51%"
        android:pivotY="49%"
        android:duration="1200"
        android:repeatMode="restart"
        android:repeatCount="50"/>
</set>

Zoom in

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">
    <scale android:duration="1200"
        android:fromXScale="0.5dp"
        android:fromYScale="0.5dp"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="2"
        android:toYScale="2" >
    </scale>
</set>

Zoom out

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    <scale android:duration="1200"
        android:fromXScale="2.0"
        android:fromYScale="2.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.6"
        android:toYScale="0.6" >
    </scale>
</set>

Slide right

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <scale
        android:duration="800"
        android:fromXScale="0.0"
        android:fromYScale="1.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

Slide left

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <scale
        android:duration="800"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:toYScale="1.0" />
</set>

Activity Shared Element Transition

If there is a common View in the two activity layouts, you can link those views and apply animation to play when there is a transition between those two activities.

We will take above example and add ImageView to registration and login activities. Common views in the two layouts are identified by transition name, so we need to use same transition name in the two layouts for the ImageView and everything else can be different.

Add below image view to registration layout.

<ImageView
    android:id="@+id/logo_s"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:src="@drawable/zoftino"
    android:transitionName="logo"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

Add below image view to login layout.

<ImageView
    android:id="@+id/logo_b"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="28dp"
    android:src="@drawable/zoftino_big"
    android:transitionName="logo"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

Then in the activity, you need to create ActivityOptions object by calling makeSceneTransitionAnimation() method passing context, common view and transition name to it. Then start activity by using ActivityOptions object as bundle.

 View sharedImage = findViewById(R.id.logo_s);
ActivityOptions activityOptions =
        ActivityOptions.makeSceneTransitionAnimation(
                this, sharedImage, "logo");
startActivity(i, activityOptions.toBundle()); 

You can apply animation to fragment transitions also, please see Fragments tutorial