ZOFTINO.COM

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



    
        
        

        
            

            

            
        
    
    
        

    

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




    

        
            

            

                

                
            
        
    

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;
    }
}