How to set Animation on appearance of an Activity in Android?

by / Wednesday, 30 October 2013 / Published in Android

Animations can add subtle visual cues that notify users about what’s going on in any app and improve their mental model of your app’s interface. Animations are especially useful when the screen changes state, such as when content loads or new actions become available.
Animations can also add a polished look to any app, which gives the app a higher quality feel.

In this example we have used four xml files for animation and have kept them in res/anim folder.

Code for ani_bottom_out.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate
android:fromYDelta="0"
android:toYDelta="100%p"
android:duration="500"/>
</set>

Code for ani_left_out.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate
android:fromXDelta="0"
android:toXDelta="-100%p"
android:duration="600"/>
</set>

Code for ani_right_in.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate
android:fromXDelta="100%p"
android:toXDelta="0"
android:duration="600"/>
</set>

Code for ani_top_in.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate
android:fromYDelta="-100%p"
android:toYDelta="0"
android:duration="500"/>
</set>

Code in Activity:

Code for RedActivity.java

public class RedActivity extends Activity {

private Button redButton;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_red);

redButton=(Button)findViewById(R.id.btn_red);
redButton.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {

Intent intent=new Intent(RedActivity.this,GreenActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.ani_right_in, R.anim.ani_left_out);
finish();

}
});
}

}

Code for corresponding layout activity_red. xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".RedActivity"
android:orientation="vertical"
android:gravity="center"
android:background="#FE2E2E">

<Button
android:id="@+id/btn_red"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Green" />

</LinearLayout>

Code for GreenActivity.java:

public class GreenActivity extends Activity {

private Button greenButton;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_green);

greenButton=(Button)findViewById(R.id.btn_green);
greenButton.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {

Intent intent=new Intent(GreenActivity.this,BlueActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.ani_top_in, R.anim.ani_bottom_out);
finish();
}
});
}

}

Code for corresponding layout activity_green.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".GreenActivity"
android:orientation="vertical"
android:background="#088A08"
android:gravity="center">

<Button
android:id="@+id/btn_green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Blue" />

</LinearLayout>

Code for BlueActivity.java:

public class BlueActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_blue);

}

}

Code for corresponding layout activity_blue.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BlueActivity"
android:gravity="center"
android:orientation="vertical"
android:background="#0000FF">

</LinearLayout>

 

TOP