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.
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.
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.
<?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>
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();
}
}
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;
}
}
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();
}
}
}
<?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>
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;
}
}