Android Material Design - 3 (Android RecyclerView and CardView)

03:28:00 Dhaval Sodha Parmar 0 Comments

Android Lollipop features two new widgets to make your life easier,   RecyclerView     and  CardView.



Download full example on Github.


RecyclerView

This widget is a container for displaying large data sets that can be scrolled very efficiently by maintaining a limited number of views. Use the RecyclerView widget when you have data collections whose elements change at runtime based on user action or network events.

The RecyclerView and CardView both are available in the Android support library, to use support library in android studio.

your app root folder -> right click -> open module setting -> select your module -> select dependence tab -> click on + sign -> Library dependence, add both library.

com.android.support:recyclerview-v7:22.1.1
com.android.support:cardview-v7:22.1.1

now create layout for RecycleView :


 <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"  
   android:paddingBottom="@dimen/activity_vertical_margin1"  
   android:paddingLeft="@dimen/activity_horizontal_margin1"  
   android:paddingRight="@dimen/activity_horizontal_margin1"  
   android:paddingTop="@dimen/activity_vertical_margin1"  
   tools:context=".MyActivity">  
   <android.support.v7.widget.RecyclerView  
     android:id="@+id/cardList"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent" />  
 </RelativeLayout>  


now, in your fragment add below code (you can also use activity just add code in onCreate)


  @Override  
   public View onCreateView(LayoutInflater inflater, ViewGroup container,  
                Bundle savedInstanceState) {  
     View rootView = inflater.inflate(R.layout.fragment_cardrecycle, container, false);  
     RecyclerView recList = (RecyclerView) rootView.findViewById(R.id.cardList);  
     recList.setHasFixedSize(true);  
     LinearLayoutManager llm = new LinearLayoutManager(getActivity());  
     llm.setOrientation(LinearLayoutManager.VERTICAL);  
     if (listitems.size() > 0 & recList != null) {  
       recList.setAdapter(new MyAdapter(listitems));  
     }  
     recList.setLayoutManager(llm);  
     return rootView;  
   }  

Before create adapter we ll design row items of RecycleView using CardView then after we 'll integrate both together.

create layout for CardView.


 <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:card_view="http://schemas.android.com/apk/res-auto"  
   android:id="@+id/card_view"  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content"  
   android:layout_margin="5dp"  
   card_view:cardCornerRadius="4dp">  
   <LinearLayout  
     android:layout_width="match_parent"  
     android:layout_height="250dip"  
     android:orientation="vertical"  
     android:weightSum="4">  
     <LinearLayout  
       android:layout_width="match_parent"  
       android:layout_height="0dip"  
       android:layout_weight="3.2"  
       android:orientation="vertical">  
       <FrameLayout  
         android:layout_width="match_parent"  
         android:layout_height="match_parent"  
         android:layout_gravity="center_horizontal">  
         <ImageView  
           android:id="@+id/image_card_cover"  
           android:layout_width="match_parent"  
           android:layout_height="match_parent"  
           android:layout_gravity="center"  
           android:scaleType="centerCrop"  
           android:src="@drawable/my_pic" />  
         <LinearLayout  
           android:layout_width="match_parent"  
           android:layout_height="wrap_content"  
           android:layout_gravity="left|bottom"  
           android:background="@android:drawable/screen_background_dark_transparent"  
           android:orientation="vertical">  
           <TextView  
             android:id="@+id/text_card_name"  
             android:layout_width="match_parent"  
             android:layout_height="wrap_content"  
             android:paddingBottom="16dp"  
             android:paddingLeft="16dp"  
             android:paddingRight="16dp"  
             android:paddingTop="16dp"  
             android:text="Medium Text"  
             android:textAppearance="?android:attr/textAppearanceMedium"  
             android:textColor="@color/textColorPrimary"  
             android:textStyle="bold" />  
         </LinearLayout>  
         <android.support.v7.widget.Toolbar  
           android:id="@+id/card_toolbar"  
           android:layout_width="match_parent"  
           android:layout_height="?actionBarSize"  
           android:layout_gravity="left|top"  
           android:background="@null"  
           android:contentInsetStart="?actionBarInsetStart"  
           android:popupTheme="@style/ActionBarPopupThemeOverlay"  
           android:theme="@style/ActionBarThemeOverlay"  
           android:titleTextAppearance="@style/ActionBar.TitleText" />  
       </FrameLayout>  
     </LinearLayout>  
     <LinearLayout  
       android:layout_width="match_parent"  
       android:layout_height="0dip"  
       android:layout_weight="0.8"  
       android:gravity="center|right"  
       android:orientation="horizontal">  
       <ImageView  
         android:id="@+id/image_action_like"  
         android:layout_width="60dip"  
         android:layout_height="60dip"  
         android:padding="8dp"  
         android:src="@drawable/ic_action_action_favorite" />  
       <ImageView  
         android:id="@+id/image_action_flag"  
         android:layout_width="60dip"  
         android:layout_height="60dip"  
         android:padding="8dp"  
         android:src="@drawable/ic_action_action_turned_in" />  
       <ImageView  
         android:id="@+id/image_action_share"  
         android:layout_width="60dip"  
         android:layout_height="60dip"  
         android:padding="8dp"  
         android:src="@drawable/ic_action_social_share" />  
     </LinearLayout>  
   </LinearLayout>  
 </android.support.v7.widget.CardView>  


our CardView design look like..




The adapter provides access to the items in your data set, creates views for items, and replaces the content of some of the views with new data items when the original item is no longer visible.

create adapter,


 public class MyAdapter extends RecyclerView.Adapter<ViewHolder> {  
     private ArrayList<CardViewModel> list;  
     // Provide a suitable constructor (depends on the kind of dataset)  
     public MyAdapter(ArrayList<CardViewModel> myDataset) {  
       list = myDataset;  
     }  
     // Create new views (invoked by the layout manager)  
     @Override  
     public ViewHolder onCreateViewHolder(ViewGroup parent,  
                        int viewType) {  
       // create a new view  
       View v = LayoutInflater.from(parent.getContext())  
           .inflate(R.layout.recycle_items, parent, false);  
       // set the view's size, margins, paddings and layout parameters  
       ViewHolder vh = new ViewHolder(v);  
       return vh;  
     }  
     // Replace the contents of a view (invoked by the layout manager)  
     @Override  
     public void onBindViewHolder(final ViewHolder holder, int position) {  
       // - get element from your dataset at this position  
       // - replace the contents of the view with that element  
       holder.text_card_name.setText(list.get(position).getCardName());  
       Drawable dr = getResources().getDrawable(list.get(position).getImageResourceId());  
       holder.image_card_cover.setImageDrawable(dr);  
       /*Palette.from(drawableToBitmap(dr)).generate(new Palette.PaletteAsyncListener() {  
         public void onGenerated(Palette p) {  
           // Use generated instance  
           //int titleBackColor = p.getVibrantColor(0);  
           int titleBackColor = p.getDarkVibrantColor(0);  
           //int titleBackColor = p.getVibrantSwatch();  
           ProgressDrawable titleBackDrawable;  
           if (titleBackColor != 0) {  
             titleBackDrawable = new ProgressDrawable(titleBackColor);  
           } else {  
             titleBackDrawable = new ProgressDrawable(getThemePrimaryColor());  
           }  
           //titleBackDrawable.setMax(holder.text_card_name.getHeight());  
           //titleBackDrawable.setProgress(holder.text_card_name.getHeight());  
           holder.text_card_name.setBackground(titleBackDrawable);  
         }  
       });*/  
     }  
     // Return the size of your dataset (invoked by the layout manager)  
     @Override  
     public int getItemCount() {  
       return list.size();  
     }  
   }  


here is ViewHolder class,



 // Provide a reference to the views for each data item  
   // Complex data items may need more than one view per item, and  
   // you provide access to all the views for a data item in a view holder  
   public static class ViewHolder extends RecyclerView.ViewHolder {  
     // each data item is just a string in this case  
     public TextView text_card_name;  
     public ImageView image_card_cover;  
     public ImageView image_action_like;  
     public ImageView image_action_flag;  
     public ImageView image_action_share;  
     public Toolbar maintoolbar;  
     public ViewHolder(View v) {  
       super(v);  
       text_card_name = (TextView) v.findViewById(R.id.text_card_name);  
       image_card_cover = (ImageView) v.findViewById(R.id.image_card_cover);  
       image_action_like = (ImageView) v.findViewById(R.id.image_action_like);  
       image_action_flag = (ImageView) v.findViewById(R.id.image_action_flag);  
       image_action_share = (ImageView) v.findViewById(R.id.image_action_share);  
       maintoolbar = (Toolbar) v.findViewById(R.id.card_toolbar);  
       maintoolbar.inflateMenu(R.menu.global);  
     }  
   }  


below is full source code of fragment,


 package com.djandroid.jdroid.materialdesign;  
 import android.content.res.TypedArray;  
 import android.graphics.Bitmap;  
 import android.graphics.Canvas;  
 import android.graphics.Color;  
 import android.graphics.drawable.BitmapDrawable;  
 import android.graphics.drawable.Drawable;  
 import android.os.Bundle;  
 import android.support.annotation.Nullable;  
 import android.support.v4.app.Fragment;  
 import android.support.v7.graphics.Palette;  
 import android.support.v7.widget.LinearLayoutManager;  
 import android.support.v7.widget.RecyclerView;  
 import android.support.v7.widget.Toolbar;  
 import android.util.TypedValue;  
 import android.view.LayoutInflater;  
 import android.view.View;  
 import android.view.ViewGroup;  
 import android.widget.ImageView;  
 import android.widget.TextView;  
 import java.util.ArrayList;  
 /**  
  * Created by VCSDEV0100 on 5/4/2015.  
  */  
 public class CardRecycleFragment extends Fragment {  
   ArrayList<CardViewModel> listitems = new ArrayList<CardViewModel>();  
   //String items[] = {"Dhaval Sodha Parmar", "b", "v"};  
   RecyclerView recList;  
   @Override  
   public void onCreate(@Nullable Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setupListItems();  
   }  
   @Override  
   public View onCreateView(LayoutInflater inflater, ViewGroup container,  
                Bundle savedInstanceState) {  
     View rootView = inflater.inflate(R.layout.fragment_cardrecycle, container, false);  
     RecyclerView recList = (RecyclerView) rootView.findViewById(R.id.cardList);  
     recList.setHasFixedSize(true);  
     LinearLayoutManager llm = new LinearLayoutManager(getActivity());  
     llm.setOrientation(LinearLayoutManager.VERTICAL);  
     if (listitems.size() > 0 & recList != null) {  
       recList.setAdapter(new MyAdapter(listitems));  
     }  
     recList.setLayoutManager(llm);  
     return rootView;  
   }  
   @Override  
   public void onActivityCreated(@Nullable Bundle savedInstanceState) {  
     super.onActivityCreated(savedInstanceState);  
   }  
   public class MyAdapter extends RecyclerView.Adapter<ViewHolder> {  
     private ArrayList<CardViewModel> list;  
     // Provide a suitable constructor (depends on the kind of dataset)  
     public MyAdapter(ArrayList<CardViewModel> myDataset) {  
       list = myDataset;  
     }  
     // Create new views (invoked by the layout manager)  
     @Override  
     public ViewHolder onCreateViewHolder(ViewGroup parent,  
                        int viewType) {  
       // create a new view  
       View v = LayoutInflater.from(parent.getContext())  
           .inflate(R.layout.recycle_items, parent, false);  
       // set the view's size, margins, paddings and layout parameters  
       ViewHolder vh = new ViewHolder(v);  
       return vh;  
     }  
     // Replace the contents of a view (invoked by the layout manager)  
     @Override  
     public void onBindViewHolder(final ViewHolder holder, int position) {  
       // - get element from your dataset at this position  
       // - replace the contents of the view with that element  
       holder.text_card_name.setText(list.get(position).getCardName());  
       Drawable dr = getResources().getDrawable(list.get(position).getImageResourceId());  
       holder.image_card_cover.setImageDrawable(dr);  
       /*Palette.from(drawableToBitmap(dr)).generate(new Palette.PaletteAsyncListener() {  
         public void onGenerated(Palette p) {  
           // Use generated instance  
           //int titleBackColor = p.getVibrantColor(0);  
           int titleBackColor = p.getDarkVibrantColor(0);  
           //int titleBackColor = p.getVibrantSwatch();  
           ProgressDrawable titleBackDrawable;  
           if (titleBackColor != 0) {  
             titleBackDrawable = new ProgressDrawable(titleBackColor);  
           } else {  
             titleBackDrawable = new ProgressDrawable(getThemePrimaryColor());  
           }  
           //titleBackDrawable.setMax(holder.text_card_name.getHeight());  
           //titleBackDrawable.setProgress(holder.text_card_name.getHeight());  
           holder.text_card_name.setBackground(titleBackDrawable);  
         }  
       });*/  
     }  
     // Return the size of your dataset (invoked by the layout manager)  
     @Override  
     public int getItemCount() {  
       return list.size();  
     }  
   }  
   // Provide a reference to the views for each data item  
   // Complex data items may need more than one view per item, and  
   // you provide access to all the views for a data item in a view holder  
   public static class ViewHolder extends RecyclerView.ViewHolder {  
     // each data item is just a string in this case  
     public TextView text_card_name;  
     public ImageView image_card_cover;  
     public ImageView image_action_like;  
     public ImageView image_action_flag;  
     public ImageView image_action_share;  
     public Toolbar maintoolbar;  
     public ViewHolder(View v) {  
       super(v);  
       text_card_name = (TextView) v.findViewById(R.id.text_card_name);  
       image_card_cover = (ImageView) v.findViewById(R.id.image_card_cover);  
       image_action_like = (ImageView) v.findViewById(R.id.image_action_like);  
       image_action_flag = (ImageView) v.findViewById(R.id.image_action_flag);  
       image_action_share = (ImageView) v.findViewById(R.id.image_action_share);  
       maintoolbar = (Toolbar) v.findViewById(R.id.card_toolbar);  
       maintoolbar.inflateMenu(R.menu.global);  
     }  
   }  
   public void setupListItems() {  
     listitems.clear();  
     CardViewModel item1 = new CardViewModel();  
     item1.setCardName("Dhawal Sodha Parmar");  
     item1.setImageResourceId(R.drawable.my_pic);  
     item1.setIsfav(0);  
     item1.setIsturned(0);  
     listitems.add(item1);  
     CardViewModel item2 = new CardViewModel();  
     item2.setCardName("Cart Item");  
     item2.setImageResourceId(R.drawable.header_bg);  
     item2.setIsfav(0);  
     item2.setIsturned(0);  
     listitems.add(item2);  
     /*CardViewModel item3 = new CardViewModel();  
     item3.setCardName("Cart Item");  
     item3.setImageResourceId(R.drawable.fc_tab_bg_new);  
     item3.setIsfav(0);  
     item3.setIsturned(0);  
     listitems.add(item3);*/  
     CardViewModel item4 = new CardViewModel();  
     item4.setCardName("Dhawal");  
     item4.setImageResourceId(R.drawable.my_profile);  
     item4.setIsfav(0);  
     item4.setIsturned(0);  
     listitems.add(item4);  
   }  
   public static Bitmap drawableToBitmap(Drawable drawable) {  
     if (drawable instanceof BitmapDrawable) {  
       return ((BitmapDrawable) drawable).getBitmap();  
     }  
     final Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);  
     final Canvas canvas = new Canvas(bitmap);  
     drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());  
     drawable.draw(canvas);  
     return bitmap;  
   }  
   private int getThemePrimaryColor() {  
     final TypedValue typedValue = new TypedValue();  
     getActivity().getTheme().resolveAttribute(R.attr.colorPrimary, typedValue, true);  
     int[] attribute = new int[]{R.attr.colorPrimary};  
     final TypedArray array = getActivity().obtainStyledAttributes(typedValue.resourceId, attribute);  
     return array.getColor(0, Color.MAGENTA);  
   }  
 }  


Download full example on Github.



WHAT IS NEXT?

Next time i will show you example of floating Toolbar when scroll content.

NOTE: my all example related material design is only for Android API 14 to 21 and above.

Any help and suggestions are appreciated. post comments below or you can contact me via E-mail.

0 comments: