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,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.gkumar.explorecity.MainActivity">

    <TextView
        android:id="@+id/basic_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Explore your city today"
        android:padding="10dp"
        android:layout_centerInParent="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/text_view_background"
        android:visibility="visible"/>

    <View
        android:id="@+id/line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#7f7f7f"
        android:layout_below="@+id/basic_text_view"
        android:layout_marginTop="20dp"
        android:visibility="visible"/>

    <ListView
        android:id="@+id/categoryListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/line"
        android:layout_marginTop="15dp"
        android:visibility="gone"
        >

    </ListView>

</RelativeLayout>

Ok, this will look like below:




Step 3

Now take another xml for your list part:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/front"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    android:padding="8dp">


    <ImageView
        android:id="@+id/leftImageView"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentLeft="true"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/NameTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="N/A"
        android:layout_marginLeft="5dp"
        android:textSize="14sp"
        android:typeface="sans"
        android:layout_centerVertical="true"
        android:layout_alignTop="@id/leftImageView"
        android:layout_toRightOf="@+id/leftImageView"
         />


</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.

package com.example.gkumar.explorecity;

import android.app.Activity;
import android.content.Context;
import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    ArrayList<String> completeCategories = new ArrayList<String>();
    private TextView basic_text_view;
    private ListView mCategoryListView;
    private ItemsAdapter mItemAdapter;


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

        basic_text_view = (TextView) findViewById(R.id.basic_text_view);
        mCategoryListView = (ListView) findViewById(R.id.categoryListView);

        completeCategories.add(0, "BreakFast/Lunch/Dinner");
        completeCategories.add(1, "Movies and Theaters");
        completeCategories.add(2, "Shopping");
        completeCategories.add(3, "Hotels/Restaurants");
        completeCategories.add(4, "Cars/Bikes");
        mItemAdapter = new ItemsAdapter(this, completeCategories);
        mCategoryListView.setAdapter(mItemAdapter);


        basic_text_view.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.basic_text_view:
                mCategoryListView.setVisibility(View.VISIBLE);
                break;
        }

    }

// Adapter class

    public class ItemsAdapter extends BaseAdapter {

        ArrayList<String> list;

        Context context;
        int commentId;

        public ItemsAdapter(Activity activity,

                            ArrayList<String> mDataList) {
            super();

            list = mDataList;
            context = activity;
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub

            return list.size();

        }

        @Override
        public Object getItem(int position) {
            // TODO Auto-generated method stub
            return list.get(position);
        }

        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            final ViewHolder holder;
            int finalPosition = -1;

            if (convertView == null) {

                LayoutInflater vi = (LayoutInflater) context
                        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = vi.inflate(R.layout.category_list_row_data_items,
                        parent, false);
                holder = new ViewHolder();
                holder.commentNameTextView = (TextView) convertView
                        .findViewById(R.id.NameTextView);
                holder.categoryImage = (ImageView) convertView.findViewById(R.id.leftImageView);


                convertView.setTag(holder);

            } else {

                holder = (ViewHolder) convertView.getTag();
            }

            holder.commentNameTextView.setText(list.get(position));
           /** we can use picaso as well but no need this time**/
            // Picasso.with(getApplicationContext()).load(R.drawable.superman).into(holder.categoryImage);
            Animation animation = AnimationUtils.loadAnimation(MainActivity.this, (position > finalPosition) ? R.anim.up_from_bottom : R.anim.down_from_top);
            convertView.startAnimation(animation);
            finalPosition = position;
            return convertView;
        }
    }

    public class ViewHolder {
        TextView commentNameTextView;
        ImageView categoryImage;

    }


}

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="@android:anim/decelerate_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="0%"
        android:fromYDelta="-100%" android:toYDelta="100%"
        android:duration="500" />
</set>

Up_from_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="@android:anim/decelerate_interpolator">
    <translate
        android:fromXDelta="0%" android:toXDelta="0%"
        android:fromYDelta="100%" android:toYDelta="0%"
        android:duration="400" />
</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:

• Google Map Implementation In Android App
• Android App ListView Adapter - Day Six