Google Plus Similar to Animation In ListView Android

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:

  • Gives user a good experience.
  • App functionality increases.
  • Encourages user to use application.
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">  
  11.   
  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"/>  
  22.   
  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"/>  

  31.     <ListView  
  32.         android:id="@+id/categoryListView"  
  33.         android:layout_width="match_parent"  
  34.         android:layout_height="match_parent"  
  35.         android:layout_below="@+id/line"  
  36.         android:layout_marginTop="15dp"  
  37.         android:visibility="gone"  
  38.         >  
  39.   
  40.     </ListView>  
  41.   
  42. </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"  
  2.   
  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">  
  8.   
  9.   
  10.     <ImageView  
  11.         android:id="@+id/leftImageView"  
  12.         android:layout_width="40dp"  
  13.         android:layout_height="40dp"  
  14.         android:layout_alignParentLeft="true"  
  15.         android:scaleType="fitXY"  
  16.         android:src="@mipmap/ic_launcher" />  
  17.   
  18.     <TextView  
  19.         android:id="@+id/NameTextView"  
  20.         android:layout_width="match_parent"  
  21.         android:layout_height="wrap_content"  
  22.         android:text="N/A"  
  23.         android:layout_marginLeft="5dp"  
  24.         android:textSize="14sp"  
  25.         android:typeface="sans"  
  26.         android:layout_centerVertical="true"  
  27.         android:layout_alignTop="@id/leftImageView"  
  28.         android:layout_toRightOf="@+id/leftImageView"  
  29.          />  
  30.   
  31.   
  32. </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;  
  2.   
  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;  
  17.   
  18. import com.squareup.picasso.Picasso;  
  19.   
  20. import java.util.ArrayList;  
  21.   
  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;  
  27.   
  28.   
  29.     @Override  
  30.     protected void onCreate(Bundle savedInstanceState) {  
  31.         super.onCreate(savedInstanceState);  
  32.         setContentView(R.layout.activity_main);  
  33.   
  34.         basic_text_view = (TextView) findViewById(R.id.basic_text_view);  
  35.         mCategoryListView = (ListView) findViewById(R.id.categoryListView);  
  36.   
  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);  
  44.   
  45.   
  46.         basic_text_view.setOnClickListener(this);  
  47.   
  48.     }  
  49.   
  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.         }  
  57.   
  58.     }  
  59.   
  60. // Adapter class  
  61.   
  62.     public class ItemsAdapter extends BaseAdapter {  
  63.   
  64.         ArrayList<String> list;  
  65.   
  66.         Context context;  
  67.         int commentId;  
  68.   
  69.         public ItemsAdapter(Activity activity,  
  70.   
  71.                             ArrayList<String> mDataList) {  
  72.             super();  
  73.   
  74.             list = mDataList;  
  75.             context = activity;  
  76.         }  
  77.   
  78.         @Override  
  79.         public int getCount() {  
  80.             // TODO Auto-generated method stub  
  81.   
  82.             return list.size();  
  83.   
  84.         }  
  85.   
  86.         @Override  
  87.         public Object getItem(int position) {  
  88.             // TODO Auto-generated method stub  
  89.             return list.get(position);  
  90.         }  
  91.   
  92.         @Override  
  93.         public long getItemId(int position) {  
  94.             // TODO Auto-generated method stub  
  95.             return position;  
  96.         }  
  97.   
  98.         @Override  
  99.         public View getView(int position, View convertView, ViewGroup parent) {  
  100.   
  101.             final ViewHolder holder;  
  102.             int finalPosition = -1;  
  103.   
  104.             if (convertView == null) {  
  105.   
  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);  
  114.   
  115.   
  116.                 convertView.setTag(holder);  
  117.   
  118.             } else {  
  119.   
  120.                 holder = (ViewHolder) convertView.getTag();  
  121.             }  
  122.   
  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.     }  
  132.   
  133.     public class ViewHolder {  
  134.         TextView commentNameTextView;  
  135.         ImageView categoryImage;  
  136.   
  137.     }  
  138.   
  139.   
  140. }  
Now, lets 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 seeit in the code.
 
Step 5

On the click of the button that we have already created we will show our list using animation.

Now code for animation is below:

Firstly, put these two files in 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 about 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: