Post
Ask Question

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 the user a good experience.
  • App functionality increases.
  • Encourages users 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.    
  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.         >    
  40.     
  41.     </ListView>    
  42.     
  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"    
    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.     <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" />    
    16.     
    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;    
    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. }   
      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


          Similar Articles