ZOFTINO.COM android and web dev tutorials

Android CardView Example

Android CardView supports material design guidelines. Card view is a frame layout which can be configured to be round cornered view with shadow. Card view can be used like any other view and it inherits all the methods from view, view group and frame layout.

Card view’s round corners can be set using setRadius method. Shadow of a card view can be configured using setCardElevation method.

Android CardView Example

I am going to show how to use card view using the coupons app. Card view will be used to show store data in coupon app’s store screen, which displays list of stores with store image, store name, number of coupons and cashback offers data. Each store’s data would be displayed in card view. List of card views will be part of recycler view.

Android Card View Implementation Steps

First, we need to crate layout xml file for the stores screen which contains coordinator layout with app bar, tab layout and recycler view. Here recycler view displays list of stores. Then we need to define layout for each row in recycler view to display store data. We need to add card view to the row layout and within card view, we need to add image view and text views to display store information.

Once layouts are created, we need to create recycler view adapter, event handler, fragment and activity. See below output and code to understand how card view is used with recycler view in this example.

Android Card View Output

android card view example

Android Card View Example Code

Activity layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card_view_activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zoftino.materialdesign.CardViewActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/appbar">
        <android.support.v7.widget.Toolbar android:id="@+id/z_toolbar" android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary"
            android:elevation="4dp" app:layout_scrollFlags="scroll|enterAlways">
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:id="@+id/tabL">
            <android.support.design.widget.TabItem
                android:text="@string/stores"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:id="@+id/stores"></android.support.design.widget.TabItem>

            <android.support.design.widget.TabItem
                android:text="@string/coupons"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:id="@+id/coupons"></android.support.design.widget.TabItem>

            <android.support.design.widget.TabItem
                android:text="@string/cashback"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:id="@+id/cashback"></android.support.design.widget.TabItem>
        </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/storesContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/cardview_dark_background"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <FrameLayout android:id="@+id/cpn_str_container" android:layout_width="match_parent" android:layout_height="match_parent"></FrameLayout>

    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Activity

package com.zoftino.materialdesign;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;

public class CardViewActivity extends AppCompatActivity {
    private RecyclerView couponStoreRecyclerView;
    private RecyclerView.Adapter couponStoreAdapter;
    private RecyclerView.LayoutManager couponStoreLayoutManager;

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

        Toolbar myToolbar = (Toolbar) findViewById(R.id.z_toolbar);
        setSupportActionBar(myToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        getCouponStoreContent("");

        TabLayout tabLayout = (TabLayout)findViewById(R.id.tabL);

        tabLayout.addOnTabSelectedListener( new TabLayout.OnTabSelectedListener(){
            public void onTabReselected(TabLayout.Tab tab) {

            }
            public void onTabSelected(TabLayout.Tab tab){
                String tabId = (String)tab.getText();
                CardViewActivity.this.getCouponStoreContent(tabId);
            }
            public void onTabUnselected(TabLayout.Tab tab){

            }
        });

    }
    public void getCouponStoreContent(String tabIndex){
        ContentFragment contentFragment = ContentFragment.newInstance(tabIndex);

        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();

        ft.replace(R.id.cpn_str_container, contentFragment);
        ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
        ft.commit();
    }

}

Fragment

package com.zoftino.materialdesign;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ContentFragment extends Fragment{

    public static ContentFragment newInstance(String contIndex) {
        ContentFragment cf = new ContentFragment();

        Bundle args = new Bundle();
        args.putString("contIndex", contIndex);
        cf.setArguments(args);
        return cf;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        String contIndex = getArguments().getString("contIndex");

        RecyclerView couponStoreRecyclerView  = new RecyclerView(getActivity());

        RecyclerView.LayoutManager couponStoreLayoutManager = new LinearLayoutManager(getActivity());
        couponStoreRecyclerView.setLayoutManager(couponStoreLayoutManager);

        RecyclerView.Adapter couponStoreAdapter = new StoreRecyclerViewAdapter(CouponStoreData.getStoreData(contIndex),getActivity());
        couponStoreRecyclerView.setAdapter(couponStoreAdapter);

        return couponStoreRecyclerView;
    }
}

Recycler view adapter

package com.zoftino.materialdesign;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.List;

public class StoreRecyclerViewAdapter extends RecyclerView.Adapter<StoreRecyclerViewAdapter.ViewHolder> {

    private List<Store> storeList;
    private Context context;

    public StoreRecyclerViewAdapter(List<Store> storeLst, Context ctx){
        storeList = storeLst;
        context = ctx;
    }

    @Override
    public StoreRecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                                   int viewType) {

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.store_row, parent, false);

        StoreRecyclerViewAdapter.ViewHolder viewHolder = new StoreRecyclerViewAdapter.ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(StoreRecyclerViewAdapter.ViewHolder holder, int position) {
        Store store = storeList.get(position);
        holder.storeImg.setImageResource(store.getStoreImg());
        holder.totalCoupons.setText(store.getTotalCoupons());
        holder.cashback.setText(store.getCashback());
    }

    @Override
    public int getItemCount() {
        return storeList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{

        public ImageView storeImg;
        public TextView totalCoupons;
        public TextView cashback;

        public ViewHolder(View view) {
            super(view);
            storeImg = (ImageView) view.findViewById(R.id.storeImg);
            totalCoupons = (TextView) view.findViewById(R.id.total_coupons);
            cashback = (TextView) view.findViewById(R.id.cashback);
            view.setOnClickListener(this);
        }
        @Override
        public void onClick(View v){

            Toast.makeText(context, "View latest coupons for store at "+ getAdapterPosition(),
                    Toast.LENGTH_LONG).show();
        }
    }
}

Recycler view layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardv="http://schemas.android.com/apk/res-auto"
    android:id="@+id/store_row"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <android.support.v7.widget.CardView
        android:id="@+id/store_card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        cardv:cardCornerRadius="6dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <ImageView
                android:id="@+id/storeImg"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:textAlignment="center"></ImageView>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="@dimen/activity_horizontal_margin"
                android:layout_weight="1"
                android:orientation="vertical"
                android:gravity="center_vertical">

                <TextView
                    android:id="@+id/total_coupons"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="15dp"></TextView>

                <TextView
                    android:id="@+id/cashback"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"></TextView>
            </LinearLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

Store

package com.zoftino.materialdesign;

public class Store {
    private String storeName;
    private int storeImg;
    private String totalCoupons;
    private String cashback;

    public String getStoreName() {
        return storeName;
    }

    public void setStoreName(String storeName) {
        this.storeName = storeName;
    }

    public int getStoreImg() {
        return storeImg;
    }

    public void setStoreImg(int storeImg) {
        this.storeImg = storeImg;
    }

    public String getTotalCoupons() {
        return totalCoupons;
    }

    public void setTotalCoupons(String totalCoupons) {
        this.totalCoupons = totalCoupons;
    }

    public String getCashback() {
        return cashback;
    }

    public void setCashback(String cashback) {
        this.cashback = cashback;
    }
}