How to set Animation to all the views 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 the app, which gives any app a higher quality feel.

In this example we set different animations to different buttons an they appear one by one from different directions.

Code:

We use four different xmls  for animation and keep them res/anim folder.

Code for ani_bottom_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 for ani_left_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_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 for MainActivity.java:

public class MainActivity extends Activity {

private Button button1,button2,button3,button4;

Animation animation_leftIn,animation_rightIn,animation_topIn,animation_bottom_In;

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

button1=(Button)findViewById(R.id.btn1);
button2=(Button)findViewById(R.id.btn2);
button3=(Button)findViewById(R.id.btn3);
button4=(Button)findViewById(R.id.btn4);

animation_leftIn=AnimationUtils.loadAnimation(this,R.anim.ani_left_in);
animation_rightIn=AnimationUtils.loadAnimation(this,R.anim.ani_right_in);
animation_topIn=AnimationUtils.loadAnimation(this,R.anim.ani_top_in);
animation_bottom_In=AnimationUtils.loadAnimation(this,R.anim.ani_bottom_in);

button1.setVisibility(View.INVISIBLE);
button2.setVisibility(View.INVISIBLE);
button3.setVisibility(View.INVISIBLE);
button4.setVisibility(View.INVISIBLE);

button1.postDelayed(new Runnable() {
public void run() {
button1.setVisibility(View.VISIBLE);
button1.startAnimation(animation_topIn);
}
},500);

button2.postDelayed(new Runnable() {
public void run() {
button2.setVisibility(View.VISIBLE);
button2.startAnimation(animation_leftIn);
}
},800);

button3.postDelayed(new Runnable() {
public void run() {
button3.setVisibility(View.VISIBLE);
button3.startAnimation(animation_rightIn);
}
},1100);

button4.postDelayed(new Runnable() {
public void run() {
button4.setVisibility(View.VISIBLE);
button4.startAnimation(animation_bottom_In);
}
},1400);
}
}

Code for corresponding layout activity_main.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"
android:gravity="center"
tools:context=".MainActivity"
android:orientation="vertical">

<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:text="Button1"/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:text="Button2"/>
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:text="Button3"/>
<Button
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:text="Button4"/>

</LinearLayout>

 

Tagged under:
TOP