Android

CardStyle ListView And Google+ Animation

Custom Listview with Card
Written by Yasir Ameen

Welcome to the Card Style Custom ListView With Images article, In this tutorial I am going to show you how you can create beautifully design ListView with Images and text.

ListView is a view group that displays a list of scrollable items meaning that you can swipe your finger up or down for scrolling the list items.

Let’s Start :CardStyle ListView And Google+ Animation

Step 1 :

1 Create an Android application with blank Activity using Android Studio or Eclipse, I am working with Android Studio.

2 After creating project first of all create XML Layout file in res/layout folder and named it list_item_template.xml we will design the layout of  this xml file looks like mine.

ListViewLet’s create the above design step by step.
In the above design image i created a custom View for this design and i applied a shadow on this view, in order to apply a shadow on customView you need to create a seprate xml file in drawable folder for this. Before creating a view create a xml file in drawable folder and name it shadow_rectangle.xml and paste the follwing xml code.

shadow_rectangle.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#CABBBBBB"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

Now create a View anywhere in list_item_template.xml file and use the shadow_rectangle.xml in this view, here is code

       <View
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="280dp"
        android:background="@drawable/shadow_rectangle"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="5dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

That was easy 🙂
Now see the complete code of list_item_template.xml file which will give you same layout design i created in the above image.

list_item_template.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="280dp"
        android:background="@drawable/shadow_rectangle"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="5dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="190dp"
        android:id="@+id/game_image"
        android:src="@drawable/blops3"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_alignTop="@+id/title"
        android:layout_alignLeft="@+id/title"
        android:layout_alignStart="@+id/title"
        android:layout_alignRight="@+id/title"
        android:layout_alignEnd="@+id/title" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Call Of Duty Black Ops III"
        android:textColor="#000000"
        android:id="@+id/txt_game_name"
        android:layout_below="@+id/game_image"
        android:layout_alignLeft="@+id/game_image"
        android:layout_alignStart="@+id/game_image"
        android:layout_marginTop="6dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Coming Nov 6, 2015"
        android:id="@+id/txt_relase_date"
        android:layout_below="@+id/txt_game_name"
        android:layout_alignLeft="@+id/txt_game_name"
        android:layout_alignStart="@+id/txt_game_name" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="PS4, XONE, PC, X360, PS3"
        android:id="@+id/txt_plateform"
        android:layout_below="@+id/txt_relase_date"
        android:layout_alignLeft="@+id/txt_relase_date"
        android:layout_alignStart="@+id/txt_relase_date" />

</RelativeLayout>

Your work should like this.
ListView

Step 2 :

We are done with the design now lets write some functionality,  i am going to create a custom adapter for this layout and i will use this adapter for the list items in my ListView.

1 Create a class in java folder and named it GameAdapter.java.
i am working with static data in this project so i will create static array for the following purpose.

  • Game Names
  • Game Images
  • Game Release Dates
  • Game Plateforms

See the code in GameAdpater.java file.

GameAdapter.java
public class GameAdapter extends ArrayAdapter<String> {

    private Context con;
    ImageView iv_gameimages;
    TextView tv_gamenames;
    TextView tv_releasdate;
    TextView tv_gameplateform;

     String games_arr[] = {

            "Call of Duty Black Ops III",
            "Assassin's Creed Syndicate",
            "Fallout 4",
            "Need For Speed",
            "Rise of the Tomb Raider",
            "Mafia III",
            "Tom Clancy's The Division",
            "Just Cause 3"
    };

    int images_arr[] = {

            R.drawable.blops3,
            R.drawable.acs,
            R.drawable.falloutfour,
            R.drawable.nfs,
            R.drawable.riseoftomb,
            R.drawable.mafia,
            R.drawable.division,
            R.drawable.justcause
    };

    String releaseDate_arr[] = {

            "Coming Nov 6, 2015",
            "Coming Oct 23, 2015",
            "Coming Nov 10, 2015",
            "Coming Nov 3, 2015",
            "Coming Nov 10, 2015",
            "Coming Dec 31, 2016",
            "Coming Mar 8, 2016",
            "Coming Dec 1, 2015"
    };

    String plateform_arr[] = {

            "PS4, XONE, PC, X360, PS3",
            "PS4, XONE, PC",
            "PS4, XONE, PC",
            "PC, PS4, XONE",
            "XONE, X360, PC, PS4",
            "PS4, XONE, PC",
            "PS4, XONE, PC",
            "PS4, XONE, PC"
    };

    public GameAdapter(Context context, int resource, String[] objects) {
        super(context, resource, objects);
        this.con = context;
        this.games_arr = objects;
    }

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

        LayoutInflater inflater = (LayoutInflater) con.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        View row = inflater.inflate(R.layout.list_item_template,parent,false);

        iv_gameimages = (ImageView) row.findViewById(R.id.game_image);
        iv_gameimages.setImageResource(images_arr[position]);

        tv_gamenames = (TextView) row.findViewById(R.id.txt_game_name);
        tv_gamenames.setText(games_arr[position]);

        tv_releasdate = (TextView) row.findViewById(R.id.txt_relase_date);
        tv_releasdate.setText(releaseDate_arr[position]);

        tv_gameplateform = (TextView) row.findViewById(R.id.txt_plateform);
        tv_gameplateform.setText(plateform_arr[position]);

        Animation animation = AnimationUtils.loadAnimation(getContext(), (position > lastPosition) ?     R.anim.up_from_bottom : R.anim.down_from_top);
        row.startAnimation(animation);
        lastPosition = position;

        return row;
    }
}

2 Now Open activity_main.xml file from res/layout folder and create a ListView, your activity_main.xml file should look like this.

activity_main.xml
    <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"
     tools:context=".MainActivity">

    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/listView"
        android:divider="@null"
        android:dividerHeight="0dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

3 Open MainActivity.java and write the following code inside the onCreate Method

ListView gameList;
String games_arr[] = {

        "Call of Duty Black Ops III",
        "Assassin's Creed Syndicate",
        "Fallout 4",
        "Need For Speed",
        "Rise of the Tomb Raider",
        "Mafia III",
        "Tom Clancy's The Division",
        "Just Cause 3"
};

gameList = (ListView) findViewById(R.id.listView);
GameAdapter adapter = new GameAdapter(MainActivity.this,R.layout.list_item_template,games_arr);
gameList.setAdapter(adapter);

 

Here is the complete code of MainActivity.java.

MainActivity.java
public class MainActivity extends AppCompatActivity {

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

        ListView gameList;
        String games_arr[] = {
                "Call of Duty Black Ops III",
                "Assassin's Creed Syndicate",
                "Fallout 4",
                "Need For Speed",
                "Rise of the Tomb Raider",
                "Mafia III",
                "Tom Clancy's The Division",
                "Just Cause 3"
        };

        gameList = (ListView) findViewById(R.id.listView);
        GameAdapter adapter = new GameAdapter(MainActivity.this,R.layout.list_item_template,games_arr);
        gameList.setAdapter(adapter);
    }
}

Great You Are Done 🙂
Run the program and you will see the output look like this

Android Custom ListView

Android Custom ListViewAndroid Custom ListView

 

 

 

 

 

 

Applying Google+ Animation

1 Create a directory in res folder and called it anim.

2 In the anim directory create two xml resource files.

  1. down_from_top.xml
  2. up_from_bottom.xml

and paste the follwing codes in each file.

 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="0%"
    android:duration="400" />
</set>

Code for up_from_bottom.xml file is here.

 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>

In order to apply google+ like animation when you scroll cards with up down swipe gesture, simply modify  GameAdapter.java Class.

3  Just create a private field in GameAdapter.java class

 private int lastPosition = -1; 

4 Inside the getView method in GameAdapter.java class just add the following lines of code at the end of the method and before the return row statement.


Animation animation = AnimationUtils.loadAnimation(getContext(), (position > lastPosition) ? R.anim.up_from_bottom : R.anim.down_from_top);
row.startAnimation(animation);
lastPosition = position;

Run the application and scroll cards you will see nice animation.

About the author

Yasir Ameen

I'm a programmer, teacher, and speaker. I work out of my home in Pakistan, Karachi for the Mobile, especially Android Platform. I discuss about technology, gadgets, codes, the devices we’re going and we’ve been. I’m excited about community, social equity, and media.

3 Comments

Leave a Comment