Introduction

We are living in the era of Smart Phones. Phones are getting smarter day-by-day with their functionality and UI design.
So the animation is an indispensable part of the Android mobile UI, it gives users the look and feel of the model and a good experience as well. Now API level 23 is going on Android and the developer preview version of Android N is out. We can see the differences between the UI part of the pre-Lollipop version, Lollipop, and later versions. A vast design change can be seen in Lollipop and the latest version, like Marshmallow (Android 6.0).

What Animation does in Mobile Applications?

Let's have a look around the code which was needed to make the app look good.
Step 1
Let us take an Android application and select activity using Android Studio version 2.1.
Let's take an Empty Activity,
Step 2
Add a button in xml and take ListView as well,
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:paddingBottom="@dimen/activity_vertical_margin"
  7. android:paddingLeft="@dimen/activity_horizontal_margin"
  8. android:paddingRight="@dimen/activity_horizontal_margin"
  9. android:paddingTop="@dimen/activity_vertical_margin"
  10. tools:context="com.example.gkumar.explorecity.MainActivity">
  12. <TextView
  13. android:id="@+id/basic_text_view"
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. android:text="Explore your city today"
  17. android:padding="10dp"
  18. android:layout_centerInParent="true"
  19. android:layout_alignParentTop="true"
  20. android:background="@drawable/text_view_background"
  21. android:visibility="visible"/>
  23. <View
  24. android:id="@+id/line"
  25. android:layout_width="match_parent"
  26. android:layout_height="1dp"
  27. android:background="#7f7f7f"
  28. android:layout_below="@+id/basic_text_view"
  29. android:layout_marginTop="20dp"
  30. android:visibility="visible"/>
  32. <ListView
  33. android:id="@+id/categoryListView"
  34. android:layout_width="match_parent"
  35. android:layout_height="match_parent"
  36. android:layout_below="@+id/line"
  37. android:layout_marginTop="15dp"
  38. android:visibility="gone"
  39. >
  41. </ListView>
  43. </RelativeLayout>
    Ok, this will look like below
    Step 3
    Now take another xml for your list part
    1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. android:id="@+id/front"
    4. android:layout_width="match_parent"
    5. android:layout_height="wrap_content"
    6. android:background="#ffffff"
    7. android:padding="8dp">
    9. <ImageView
    10. android:id="@+id/leftImageView"
    11. android:layout_width="40dp"
    12. android:layout_height="40dp"
    13. android:layout_alignParentLeft="true"
    14. android:scaleType="fitXY"
    15. android:src="@mipmap/ic_launcher" />
    17. <TextView
    18. android:id="@+id/NameTextView"
    19. android:layout_width="match_parent"
    20. android:layout_height="wrap_content"
    21. android:text="N/A"
    22. android:layout_marginLeft="5dp"
    23. android:textSize="14sp"
    24. android:typeface="sans"
    25. android:layout_centerVertical="true"
    26. android:layout_alignTop="@id/leftImageView"
    27. android:layout_toRightOf="@+id/leftImageView"
    28. />
    29. </RelativeLayout>
    Step 4
    Combining steps 2 and 3 we can actually manage them in MainActivity:
    Let's hover around the code and try to understand it.
    1. package com.example.gkumar.explorecity;
    3. import android.app.Activity;
    4. import android.content.Context;
    5. import android.os.AsyncTask;
    6. import android.support.v7.app.AppCompatActivity;
    7. import android.os.Bundle;
    8. import android.view.LayoutInflater;
    9. import android.view.View;
    10. import android.view.ViewGroup;
    11. import android.view.animation.Animation;
    12. import android.view.animation.AnimationUtils;
    13. import android.widget.BaseAdapter;
    14. import android.widget.ImageView;
    15. import android.widget.ListView;
    16. import android.widget.TextView;
    18. import com.squareup.picasso.Picasso;
    20. import java.util.ArrayList;
    22. public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    23. ArrayList<String> completeCategories = new ArrayList<String>();
    24. private TextView basic_text_view;
    25. private ListView mCategoryListView;
    26. private ItemsAdapter mItemAdapter;
    29. @Override
    30. protected void onCreate(Bundle savedInstanceState) {
    31. super.onCreate(savedInstanceState);
    32. setContentView(R.layout.activity_main);
    34. basic_text_view = (TextView) findViewById(R.id.basic_text_view);
    35. mCategoryListView = (ListView) findViewById(R.id.categoryListView);
    37. completeCategories.add(0, "BreakFast/Lunch/Dinner");
    38. completeCategories.add(1, "Movies and Theaters");
    39. completeCategories.add(2, "Shopping");
    40. completeCategories.add(3, "Hotels/Restaurants");
    41. completeCategories.add(4, "Cars/Bikes");
    42. mItemAdapter = new ItemsAdapter(this, completeCategories);
    43. mCategoryListView.setAdapter(mItemAdapter);
    46. basic_text_view.setOnClickListener(this);
    48. }
    50. @Override
    51. public void onClick(View v) {
    52. switch (v.getId()) {
    53. case R.id.basic_text_view:
    54. mCategoryListView.setVisibility(View.VISIBLE);
    55. break;
    56. }
    58. }
    60. // Adapter class
    62. public class ItemsAdapter extends BaseAdapter {
    64. ArrayList<String> list;
    66. Context context;
    67. int commentId;
    69. public ItemsAdapter(Activity activity,
    71. ArrayList<String> mDataList) {
    72. super();
    74. list = mDataList;
    75. context = activity;
    76. }
    78. @Override
    79. public int getCount() {
    80. // TODO Auto-generated method stub
    82. return list.size();
    84. }
    86. @Override
    87. public Object getItem(int position) {
    88. // TODO Auto-generated method stub
    89. return list.get(position);
    90. }
    92. @Override
    93. public long getItemId(int position) {
    94. // TODO Auto-generated method stub
    95. return position;
    96. }
    98. @Override
    99. public View getView(int position, View convertView, ViewGroup parent) {
    101. final ViewHolder holder;
    102. int finalPosition = -1;
    104. if (convertView == null) {
    106. LayoutInflater vi = (LayoutInflater) context
    107. .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    108. convertView = vi.inflate(R.layout.category_list_row_data_items,
    109. parent, false);
    110. holder = new ViewHolder();
    111. holder.commentNameTextView = (TextView) convertView
    112. .findViewById(R.id.NameTextView);
    113. holder.categoryImage = (ImageView) convertView.findViewById(R.id.leftImageView);
    116. convertView.setTag(holder);
    118. } else {
    120. holder = (ViewHolder) convertView.getTag();
    121. }
    123. holder.commentNameTextView.setText(list.get(position));
    124. /** we can use picaso as well but no need this time**/
    125. // Picasso.with(getApplicationContext()).load(R.drawable.superman).into(holder.categoryImage);
    126. Animation animation = AnimationUtils.loadAnimation(MainActivity.this, (position > finalPosition) ? R.anim.up_from_bottom : R.anim.down_from_top);
    127. convertView.startAnimation(animation);
    128. finalPosition = position;
    129. return convertView;
    130. }
    131. }
    133. public class ViewHolder {
    134. TextView commentNameTextView;
    135. ImageView categoryImage;
    137. }
    138. }
      Now, let's see the method onCreate(); all the views have been found there or referenced from the XML part, and the same is happening in the Adapters class method getView(), using view holder pattern as new class ViewHolder you can see it in the code.
      Step 5
      On the click of the button that we have already created, we will show our list using animation.
      Now the code for animation is below
      Firstly, put these two files in the animation directory called “anim”. You are wondering what are these two files and what do they do. So the answer would look like the following
      Down_from_top.xml
      1. <?xml version="1.0" encoding="utf-8"?>
      2. <set xmlns:android="http://schemas.android.com/apk/res/android"
      3. android:shareInterpolator="@android:anim/decelerate_interpolator">
      4. <translate
      5. android:fromXDelta="0%" android:toXDelta="0%"
      6. android:fromYDelta="-100%" android:toYDelta="100%"
      7. android:duration="500" />
      8. </set>
        Up_from_bottom.xml
        1. <?xml version="1.0" encoding="utf-8"?>
        2. <set xmlns:android="http://schemas.android.com/apk/res/android"
        3. android:shareInterpolator="@android:anim/decelerate_interpolator">
        4. <translate
        5. android:fromXDelta="0%" android:toXDelta="0%"
        6. android:fromYDelta="100%" android:toYDelta="0%"
        7. android:duration="400" />
        8. </set>
          Result after animation
          Note
          In this pic, you can't see the animation; please run this code as the entire project is provided and you will see the animation from down to up translates.

          Summary

          This article explains the basics of animation in Android. Basically, it is similar to Google plus animation and animations are very much in demand in the mobile application world.
          Read more articles on Android