Android Cards List View

Hello Friends,

You can create stylish listview in android. Card Style Listview is one of them. This is to help achieve a specific styling.

Card Listview is a new concept. This kind of listview is used to display multiple items like card style.

You can refer following sample code for implement it in your android application.

Sample Code:

File: listview.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e2e4fe">

<ListView
android:id="@+id/card_listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:listSelector="@android:color/transparent"
android:cacheColorHint="@android:color/transparent"
android:divider="@null"
android:dividerHeight="10dp" />
</LinearLayout>

File: list_item_card.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:descendantFocusability="beforeDescendants">

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:paddingRight="15dp"
android:background="@drawable/card_background_selector"
android:descendantFocusability="afterDescendants">

<TextView
android:id="@+id/line1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text line 1"
android:textColor="#FF8000"/>

<TextView
android:id="@+id/line2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text line 2"
android:textColor="#FF8000"/>

</LinearLayout>
</FrameLayout>

File: CardListActivity.java

package com.sneha.cardslistview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ListView;

public class CardListActivity extends Activity
{
    private static final String TAG = "CardListActivity";
    private CardArrayAdapter cardArrayAdapter;
    private ListView listView;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.listview);
        listView = (ListView) findViewById(R.id.card_listView);

        listView.addHeaderView(new View(this));
        listView.addFooterView(new View(this));

        cardArrayAdapter = new CardArrayAdapter(getApplicationContext(), R.layout.list_item_card);

        for (int i = 0; i < 10; i++)
        {
            Card card = new Card("Card " + (i+1) + " Line 1", "Card " + (i+1) + " Line 2");
            cardArrayAdapter.add(card);
        }
        listView.setAdapter(cardArrayAdapter);
    }
}

File: CardArrayAdapter.java

package com.sneha.cardslistview;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;

public class CardArrayAdapter extends ArrayAdapter<Card>
{
    private static final String TAG = "CardArrayAdapter";
    private List<Card> cardList = new ArrayList<Card>();

    static class CardViewHolder
    {
        TextView line1;
        TextView line2;
    }

    public CardArrayAdapter(Context context, int textViewResourceId)
    {
        super(context, textViewResourceId);
    }

    @Override
    public void add(Card object)
    {
        cardList.add(object);
        super.add(object);
    }

    @Override
    public int getCount()
    {
        return this.cardList.size();
    }

    @Override
    public Card getItem(int index)
    {
        return this.cardList.get(index);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent)
    {
        View row = convertView;
        CardViewHolder viewHolder;
     
        if (row == null)
        {
            LayoutInflater inflater = (LayoutInflater) this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            row = inflater.inflate(R.layout.list_item_card, parent, false);
            viewHolder = new CardViewHolder();
            viewHolder.line1 = (TextView) row.findViewById(R.id.line1);
            viewHolder.line2 = (TextView) row.findViewById(R.id.line2);
            row.setTag(viewHolder);
        }
        else
        {
            viewHolder = (CardViewHolder)row.getTag();
        }
        Card card = getItem(position);
        viewHolder.line1.setText(card.getLine1());
        viewHolder.line2.setText(card.getLine2());
        return row;
    }

    public Bitmap decodeToBitmap(byte[] decodedByte)
    {
        return BitmapFactory.decodeByteArray(decodedByte, 0, decodedByte.length);
    }
}

File: Card.java

package com.sneha.cardslistview;

public class Card
{
    private String line1;
    private String line2;

    public Card(String line1, String line2)
    {
        this.line1 = line1;
        this.line2 = line2;
    }

    public String getLine1()
    {
        return line1;
    }

    public String getLine2()
    {
        return line2;
    }
}

Output:

Download Full Source Code: CardListView

Enjoy Coding...!!!