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.
<?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> <?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> 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);
}
} <?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> 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);
}
} <?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> Some of the animation definitions which you can use as animation for activity transitions.
<?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> <?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> <?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> <?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> <?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><?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><?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><?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><?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>
<?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><?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>
<?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>
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