{"id":438,"date":"2017-06-30T07:53:19","date_gmt":"2017-06-30T07:53:19","guid":{"rendered":"http:\/\/abhiandroid.com\/materialdesign\/?page_id=438"},"modified":"2019-06-13T09:46:45","modified_gmt":"2019-06-13T09:46:45","slug":"cardview","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/materialdesign\/cardview","title":{"rendered":"CardView Tutorial Using RecyclerView Example In Android Studio"},"content":{"rendered":"

In Android, CardView is another main element that can represent the information in a card manner with a drop shadow called elevation and corner radius which looks consistent across the platform. CardView was introduced in Material Design in API level 21 (Android 5.0 i.e Lollipop).<\/p>\n

\"CardView
CardView in Android<\/figcaption><\/figure>\n

CardView uses elevation property on Lollipop for shadows and falls back to a custom emulated shadow implementation on older platforms.<\/p>\n

This new widget is a big step for displaying data\/information inside cards. We can easily design good looking UI when we combined CardView with RecyclerView. A CardView is a ViewGroup that can be added in our Activity or Fragment using a layout XML file.<\/p>\n

\"CardView
CardView in RecyclerView<\/figcaption><\/figure>\n

Basic CardView XML code In Android Studio:<\/strong><\/h4>\n
<android.support.v7.widget.CardView\r\nxmlns:card_view=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\">\r\n<\/android.support.v7.widget.CardView>\r\n<\/pre>\n
Gradle Dependency to use CardView:<\/strong><\/h4>\n
The CardView widget is a part of separate library valid for API 7 level or higher. Add the following dependency in your Gradle build file to use CardView.
\nAdd inside Gradle Scripts > build.gradle (Module: app) and inside dependencies<\/strong><\/p>\n
dependencies {\r\ncompile 'com.android.support:cardview-v7:23.0.1'\r\n}<\/pre>\n
\"CardView<\/strong><\/h4>\n
\n
Attributes of CardView In Android:<\/strong><\/h4>\n
Now let\u2019s we discuss some common attributes of a CardView that helps us to configure it in our layout (xml).<\/p>\n
1. card_view:cardBackgroundColor :<\/span><\/strong><\/p>\n
This attribute is used to set the Background color for the CardView. We can also set the background color programmatically using setCardBackgroundColor(int color) method.<\/p>\n
Below we set the black color in the background of CardView..<\/p>\n
 <android.support.v7.widget.CardView\r\n        android:id=\"@+id\/card_view\"\r\n        android:layout_width=\"250dp\"\r\n        android:layout_height=\"250dp\"\r\n        android:layout_gravity=\"center\"\r\n        card_view:cardBackgroundColor=\"#000\">\r\n\r\n        <TextView\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"match_parent\"\r\n            android:text=\"AbhiAndroid\"\r\n            android:textColor=\"#fff\"\r\n            android:textSize=\"20sp\" \/>\r\n\r\n    <\/android.support.v7.widget.CardView><\/pre>\n
\"CardView2. card view:cardCornerRadius:<\/span><\/strong><\/p>\n
This attribute is used to set the corner radius for the CardView. We can also set the corner radius programmatically using setRadius(float radius) method.<\/p>\n
Below we set the black background and corner radius for CardView.<\/p>\n
 <android.support.v7.widget.CardView\r\n        android:id=\"@+id\/card_view\"\r\n        android:layout_width=\"250dp\"\r\n        android:layout_height=\"250dp\"\r\n        android:layout_gravity=\"center\"\r\n        card_view:cardCornerRadius=\"20dp\"\r\n        card_view:cardBackgroundColor=\"#000\"><!--\r\n    corner radius value 20dp and black background\r\n    -->\r\n\r\n        <TextView\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"match_parent\"\r\n            android:text=\"AbhiAndroid\"\r\n            android:textColor=\"#fff\"\r\n            android:textSize=\"20sp\" \/>\r\n\r\n    <\/android.support.v7.widget.CardView><\/pre>\n
\"CardView3. card_view:cardElevation<\/span><\/strong><\/p>\n
This attribute is used to set the elevation for the CardView. Elevation is used to show the shadow of the CardView. We can also set the card elevation value programmatically using setCardElevation(float elevation) method.<\/p>\n
Below we set the black background and elevation value for the CardView.<\/p>\n
<android.support.v7.widget.CardView\r\n        android:id=\"@+id\/card_view\"\r\n        android:layout_width=\"250dp\"\r\n        android:layout_height=\"250dp\"\r\n        android:layout_gravity=\"center\"\r\n        card_view:cardElevation=\"30dp\"\r\n        card_view:cardBackgroundColor=\"#000\"><!--\r\n    card elevation value 30dp and black background\r\n    -->\r\n\r\n        <TextView\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"match_parent\"\r\n            android:text=\"AbhiAndroid\"\r\n            android:textColor=\"#fff\"\r\n            android:textSize=\"20sp\" \/>\r\n\r\n    <\/android.support.v7.widget.CardView><\/pre>\n
\"CardView4. card_view:contentPadding :<\/strong><\/span><\/p>\n
This attribute is used to set the inner padding between the edges of the Card and children of the CardView. This attribute is used to set the equally padding between all the edges of the card and children of the CardView. We can also set the padding from bottom, top, left and right edges. We can also set padding programmatically using setContentPadding(int left, int top, int right, int bottom) method.<\/p>\n
Below we set the black background and 20dp value for the inner padding between the edges of the Card and children of the CardView.<\/p>\n
<android.support.v7.widget.CardView\r\n        android:id=\"@+id\/card_view\"\r\n        android:layout_width=\"250dp\"\r\n        android:layout_height=\"250dp\"\r\n        android:layout_gravity=\"center\"\r\n        card_view:cardBackgroundColor=\"#000\"\r\n        card_view:cardCornerRadius=\"20dp\"\r\n        card_view:cardElevation=\"30dp\"\r\n        card_view:contentPadding=\"20dp\"><!--\r\n    content padding value 20dp and black background\r\n    -->\r\n\r\n        <TextView\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"match_parent\"\r\n            android:text=\"AbhiAndroid\"\r\n            android:textColor=\"#fff\"\r\n            android:textSize=\"20sp\" \/>\r\n\r\n    <\/android.support.v7.widget.CardView><\/pre>\n
5. cardview:contentPaddingBottom :<\/strong><\/span><\/p>\n
This attribute is used to set the inner padding between the bottom edge of the card and children of the CardView.<\/p>\n
Below we set the black background and 20dp value for the inner padding between the bottom edge of the Card and children of the CardView.<\/p>\n
<android.support.v7.widget.CardView\r\n        android:id=\"@+id\/card_view\"\r\n        android:layout_width=\"250dp\"\r\n        android:layout_height=\"250dp\"\r\n        android:layout_gravity=\"center\"\r\n        card_view:cardBackgroundColor=\"#000\"\r\n        card_view:cardElevation=\"10dp\"\r\n        card_view:contentPaddingBottom=\"20dp\"><!--\r\n    content bottom padding value 20dp and black background\r\n    -->\r\n        <RelativeLayout\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"match_parent\">\r\n\r\n            <TextView\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_alignParentBottom=\"true\"\r\n                android:text=\"AbhiAndroid\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n        <\/RelativeLayout>\r\n\r\n    <\/android.support.v7.widget.CardView><\/pre>\n
6. cardview:contentPaddingLeft :\u00a0<\/strong><\/span><\/p>\n
This attribute is used to set the inner padding between the left edge of the card and children of the CardView.<\/p>\n
Below we set the black background and 20dp value for the inner padding between the left edge of the Card and children of the CardView.<\/p>\n
 <android.support.v7.widget.CardView\r\n        android:id=\"@+id\/card_view\"\r\n        android:layout_width=\"250dp\"\r\n        android:layout_height=\"250dp\"\r\n        android:layout_gravity=\"center\"\r\n        card_view:cardBackgroundColor=\"#000\"\r\n        card_view:cardElevation=\"10dp\"\r\n        card_view:contentPaddingLeft=\"20dp\"><!--\r\n    content left padding value 20dp and black background\r\n    -->\r\n        <RelativeLayout\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"match_parent\">\r\n\r\n            <TextView\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:text=\"AbhiAndroid\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n        <\/RelativeLayout>\r\n\r\n    <\/android.support.v7.widget.CardView><\/pre>\n
7. cardview:contentPaddingRight :\u00a0<\/strong><\/span><\/p>\n
This attribute is used to set the inner padding between the right edge of the card and children of the CardView.<\/p>\n
Below we set the black background and 20dp value for the inner padding between the right edge of the Card and children of the CardView.<\/p>\n
<android.support.v7.widget.CardView\r\n        android:id=\"@+id\/card_view\"\r\n        android:layout_width=\"250dp\"\r\n        android:layout_height=\"250dp\"\r\n        android:layout_gravity=\"center\"\r\n        card_view:cardBackgroundColor=\"#000\"\r\n        card_view:cardElevation=\"10dp\"\r\n        card_view:contentPaddingRight=\"20dp\"><!--\r\n    content right padding value 20dp and black background\r\n    -->\r\n        <RelativeLayout\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"match_parent\">\r\n\r\n            <TextView\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_alignParentRight=\"true\"\r\n                android:text=\"AbhiAndroid\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n        <\/RelativeLayout>\r\n\r\n    <\/android.support.v7.widget.CardView><\/pre>\n
8. cardview:contentPaddingTop :\u00a0<\/strong><\/span><\/p>\n
This attribute is used to set the inner padding between the top edge of the card and children of the CardView.<\/p>\n
Below we set the black background and 20dp value for the inner padding between the top edge of the Card and children of the CardView.<\/p>\n
 <android.support.v7.widget.CardView\r\n        android:id=\"@+id\/card_view\"\r\n        android:layout_width=\"250dp\"\r\n        android:layout_height=\"250dp\"\r\n        android:layout_gravity=\"center\"\r\n        card_view:cardBackgroundColor=\"#000\"\r\n        card_view:cardElevation=\"10dp\"\r\n        card_view:contentPaddingTop=\"20dp\"><!--\r\n    content left padding value 20dp and black background\r\n    -->\r\n        <RelativeLayout\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"match_parent\">\r\n\r\n            <TextView\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:text=\"AbhiAndroid\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n        <\/RelativeLayout>\r\n\r\n    <\/android.support.v7.widget.CardView><\/pre>\n
Important Methods Of CardView:<\/strong><\/h4>\n
Let\u2019s we discuss some important methods of CardView that may be called in order to manage the CardView.<\/p>\n
1. setCardBackgroundColor(int color) :<\/span> <\/strong>This method is used to set the background color for the CardView.<\/p>\n
Below we set the background color for the CardView.<\/p>\n
 \/\/ init the CardView\r\n        CardView cardView = (CardView) findViewById(R.id.card_view);\r\n        \/\/ set black color for the Background of the CardView\r\n        cardView.setCardBackgroundColor(Color.BLACK);<\/pre>\n
2. setCardElevation(float): \u00a0<\/strong><\/span>This method is used to set the backward compatible elevation of the CardView. This method sets the value in float type format.
\nBelow we set the backward compatible elevation value of the CardView.<\/p>\n
 \/\/ init the CardView\r\n        CardView cardView = (CardView) findViewById(R.id.card_view);\r\n        \/\/ set black color for the Background of the CardView\r\n        cardView.setCardBackgroundColor(Color.BLACK);\r\n        cardView.setCardElevation(20f); \/\/ backward compatible elevation value<\/pre>\n
3. getCardElevation() :<\/strong><\/span> This method is used to get the elevation value which we set using setCardElevation(float) method. This method return a float type value.<\/p>\n
Below we firstly set the elevation value and then get the same of CardView.<\/p>\n
 \/\/ init the CardView\r\n        CardView cardView = (CardView) findViewById(R.id.card_view);\r\n        \/\/ set black color for the Background of the CardView\r\n        cardView.setCardBackgroundColor(Color.BLACK);\r\n        cardView.setCardElevation(20f); \/\/ set backward compatible elevation value\r\n        float elevationValue=cardView.getCardElevation(); \/\/ get the card background compatible elevation value<\/pre>\n
4. setRadius(float radius) :<\/strong><\/span> This method is used to set the corner radius value of the CardView. This method sets the value in float type format.<\/p>\n
Below we set the corner radius value of CardView.<\/p>\n
 \/\/ init the CardView\r\n        CardView cardView = (CardView) findViewById(R.id.card_view);\r\n        \/\/ set black color for the Background of the CardView\r\n        cardView.setCardBackgroundColor(Color.BLACK);\r\n        cardView.setRadius(20f); \/\/ sets corner radius value<\/pre>\n
5. getRadius() :<\/strong><\/span> This method is used to get the corner radius value that we set using setRadius(float radius) method. This method return a float type value.<\/p>\n
Below we firstly set the corner radius value and then get the same of CardView.<\/p>\n
\/\/ init the CardView\r\n        CardView cardView = (CardView) findViewById(R.id.card_view);\r\n        \/\/ set black color for the Background of the CardView\r\n        cardView.setCardBackgroundColor(Color.BLACK);\r\n        cardView.setRadius(20f); \/\/ sets corner radius value\r\n        float radiusValue=cardView.getRadius(); \/\/ get the corner radius value<\/pre>\n
6. setContentPadding(int left, int top, int right, int bottom) :<\/span> <\/strong>This method is used to set the padding betweeen the card’s edges and the children of the CardView. This method sets the int type value for the content padding. This method set the equally padding between all the edges of the card and children of the CardVie<\/p>\n
Below we set the value of padding between the card’s edges and the children of the CardView.<\/p>\n
\/\/ init the CardView\r\n        CardView cardView = (CardView) findViewById(R.id.card_view);\r\n        \/\/ set black color for the Background of the CardView\r\n        cardView.setCardBackgroundColor(Color.BLACK);\r\n        cardView.setContentPadding(10,10,10,10); \/\/ set the padding between the card's edges and the children of the CardView<\/pre>\n
7. getContentPaddingBottom() :<\/strong><\/span> This method is used to get the inner padding before the Card’s bottom edge. This method returns an int type value.<\/p>\n
Below we firstly set the content padding and then get the inner padding before the Card’s bottom edge.<\/p>\n
\/\/ init the CardView\r\n        CardView cardView = (CardView) findViewById(R.id.card_view);\r\n        \/\/ set black color for the Background of the CardView\r\n        cardView.setCardBackgroundColor(Color.BLACK);\r\n        cardView.setContentPadding(10, 10, 10, 10); \/\/ set the padding between the card's edges and the children of the CardView\r\n        int bottomPadding = cardView.getPaddingBottom(); \/\/ get the inner padding before the Card's bottom edge.\r\n<\/pre>\n
8. getContentPaddingLeft() :<\/span><\/strong> This method is used to get the inner padding after the Card’s left edge. This method returns an int type value.<\/p>\n
Below we firstly set the content padding and then get the inner padding after the Card’s left edge.<\/p>\n
\/\/ init the CardView\r\n        CardView cardView = (CardView) findViewById(R.id.card_view);\r\n        \/\/ set black color for the Background of the CardView\r\n        cardView.setCardBackgroundColor(Color.BLACK);\r\n        cardView.setContentPadding(10, 10, 10, 10); \/\/ set the padding between the card's edges and the children of the CardView\r\n        int leftPadding = cardView.getPaddingLeft(); \/\/ get the inner padding after the Card's left edge.<\/pre>\n
9. getContentPaddingRight() :<\/span><\/strong> This method is used to get the inner padding before the Card’s right edge. This method returns an int type value.<\/p>\n
Below we firstly set the content padding and then get the inner padding before the Card’s right edge.<\/p>\n
 \/\/ init the CardView\r\n        CardView cardView = (CardView) findViewById(R.id.card_view);\r\n        \/\/ set black color for the Background of the CardView\r\n        cardView.setCardBackgroundColor(Color.BLACK);\r\n        cardView.setContentPadding(10, 10, 10, 10); \/\/ set the padding between the card's edges and the children of the CardView\r\n        int rightPadding = cardView.getPaddingLeft(); \/\/ get the inner padding before the Card's right edge.<\/pre>\n
10. getContentPaddingTop() :<\/span><\/strong> This method is used to get the inner padding after the Card’s top edge. This method returns an int type value.<\/p>\n
Below we firstly set the content padding and then get the inner padding after the Card’s top edge.<\/p>\n
 \/\/ init the CardView\r\n        CardView cardView = (CardView) findViewById(R.id.card_view);\r\n        \/\/ set black color for the Background of the CardView\r\n        cardView.setCardBackgroundColor(Color.BLACK);\r\n        cardView.setContentPadding(10, 10, 10, 10); \/\/ set the padding between the card's edges and the children of the CardView\r\n        int topPadding = cardView.getPaddingLeft(); \/\/ get the inner padding after the Card's top edge.<\/pre>\n
\n
CardView Example Using RecyclerView as GridView in Android Studio:<\/strong><\/h4>\n
Below is the example of RecyclerView As GridView in which we display list of Person Names with their images with default vertical orientation by using RecyclerView. In this example we are using LinearLayoutManager with default vertical orientation to display the items. Firstly we declare a RecyclerView in our XML file and then get the reference of it in our Activity. After that we creates two ArrayList\u2018s for Person Names and Images. After that we set a LinearLayoutManager and finally we set the Adapter to show the list items in RecyclerView. Whenever a user clicks on an item the full size image will be displayed on the next screen.<\/p>\n
Below you can download code, see final output and step by step explanation of the example:<\/p>\n
Download Code (Password: abhiandroid)<\/a><\/p>\n
\"CardViewStep 1:<\/strong> Create a New Project And Name It RecyclerViewExample.<\/p>\n
Step 2:<\/strong> Open Gradle Scripts > build.gradle (Module: app) and add RecyclerView & CardView Library dependency in it.<\/p>\n
 apply plugin: 'com.android.application'\r\nandroid {\r\n    compileSdkVersion 24\r\n    buildToolsVersion \"24.0.1\"\r\n    defaultConfig {\r\n        applicationId \"abhiandroid.com.recyclerviewexample\"\r\n        minSdkVersion 16\r\n        targetSdkVersion 24\r\n        versionCode 1\r\n        versionName \"1.0\"\r\n    }\r\n    buildTypes {\r\n        release {\r\n            minifyEnabled false\r\n            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'\r\n        }\r\n    }\r\n}\r\ndependencies {\r\n    compile fileTree(dir: 'libs', include: ['*.jar'])\r\n    testCompile 'junit:junit:4.12'\r\n    compile 'com.android.support:appcompat-v7:24.1.1'\r\n    compile \"com.android.support:recyclerview-v7:23.0.1\" \/\/ dependency file for RecyclerView\r\n    compile 'com.android.support:cardview-v7:23.0.1' \/\/ CardView dependency file\r\n\r\n}<\/pre>\n
Step 3: <\/strong>Open res -> layout -> activity_main.xml (or) main.xml and add following code:<\/p>\n
In this step we create a RecyclerView in our XML file.<\/p>\n
 <?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\"abhiandroid.com.recyclerviewexample.MainActivity\">\r\n\r\n    <android.support.v7.widget.RecyclerView\r\n        android:id=\"@+id\/recyclerView\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\" \/>\r\n<\/RelativeLayout><\/pre>\n
Step 4: <\/strong>Create a new XML file rowlayout.xml for list item of RecyclerView and paste the following code in it.<\/p>\n
In this step we create a new xml file for item row in which we creates a TextView and ImageView to show the data in grid format. In this we define the views inside CardView to display the items in the form of cards.<\/p>\n
 <android.support.v7.widget.CardView android:id=\"@+id\/card_view\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    card_view:cardElevation=\"20dp\"\r\n    android:layout_margin=\"10dp\"\r\n    card_view:contentPadding=\"20dp\"\r\n    xmlns:card_view=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\r\n\r\n        <RelativeLayout\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:layout_gravity=\"center\">\r\n\r\n            <ImageView\r\n                android:id=\"@+id\/image\"\r\n                android:layout_width=\"100dp\"\r\n                android:layout_height=\"100dp\"\r\n                android:layout_centerHorizontal=\"true\"\r\n                android:src=\"@drawable\/person1\" \/>\r\n\r\n\r\n            <TextView\r\n                android:id=\"@+id\/name\"\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_below=\"@+id\/image\"\r\n                android:layout_centerHorizontal=\"true\"\r\n                android:linksClickable=\"true\"\r\n                android:text=\"https:\/\/abhiandroid.com\"\r\n                android:textColor=\"#000\"\r\n                android:textSize=\"20sp\" \/>\r\n        <\/RelativeLayout>\r\n\r\n    <\/android.support.v7.widget.CardView>\r\n<\/pre>\n
Step 5 :<\/strong> Now open app -> java -> package -> MainActivity.java and add the below code.<\/p>\n
In this step firstly we get the reference of RecyclerView. After that we creates two ArrayList\u2018s for Person Names and Images. After that we set a LinearLayoutManager and finally we set the Adapter to show the list items in RecyclerView.<\/p>\n
package abhiandroid.com.recyclerviewexample;\r\nimport android.os.Bundle;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.support.v7.widget.GridLayoutManager;\r\nimport android.support.v7.widget.LinearLayoutManager;\r\nimport android.support.v7.widget.RecyclerView;\r\n\r\nimport java.util.ArrayList;\r\nimport java.util.Arrays;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n\/\/ ArrayList for person names\r\nArrayList personNames = new ArrayList<>(Arrays.asList(\"Person 1\", \"Person 2\", \"Person 3\", \"Person 4\", \"Person 5\", \"Person 6\", \"Person 7\",\"Person 8\", \"Person 9\", \"Person 10\", \"Person 11\", \"Person 12\", \"Person 13\", \"Person 14\"));\r\nArrayList personImages = new ArrayList<>(Arrays.asList(R.drawable.person1, R.drawable.person2, R.drawable.person3, R.drawable.person4, R.drawable.person5, R.drawable.person6, R.drawable.person7,R.drawable.person1, R.drawable.person2, R.drawable.person3, R.drawable.person4, R.drawable.person5, R.drawable.person6, R.drawable.person7));\r\n\r\n@Override\r\nprotected void onCreate(Bundle savedInstanceState) {\r\nsuper.onCreate(savedInstanceState);\r\nsetContentView(R.layout.activity_main);\r\n\/\/ get the reference of RecyclerView\r\nRecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);\r\n\/\/ set a LinearLayoutManager with default vertical orientaion\r\nLinearLayoutManager linearLayoutManager = new LinearLayoutManager(getApplicationContext());\r\nrecyclerView.setLayoutManager(linearLayoutManager); \/\/ set LayoutManager to RecyclerView\r\n\/\/ call the constructor of CustomAdapter to send the reference and data to Adapter\r\nCustomAdapter customAdapter = new CustomAdapter(MainActivity.this, personNames,personImages);\r\nrecyclerView.setAdapter(customAdapter); \/\/ set the Adapter to RecyclerView\r\n}\r\n}\r\n<\/pre>\n
Step 6:<\/strong> Create a new class CustomAdapter.java inside package and add the following code.<\/p>\n
In this step we create a CustomAdapter class and extends RecyclerView.Adapter class with Viewholder in it. After that we implement the overrided methods and create a constructor for getting the data from Activity.<\/p>\n
In this custom Adapter two methods are important: First is onCreateViewHolder in which we inflate the layout item xml and pass it to View Holder and other is onBindViewHolder in which we set the data in the view\u2019s with the help of ViewHolder. Finally we implement the setOnClickListener event on itemview and on click of item we display the selected image in full size in the next Activity.<\/p>\n
package abhiandroid.com.recyclerviewexample;\r\nimport android.content.Context;\r\nimport android.content.Intent;\r\nimport android.support.v7.widget.RecyclerView;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.widget.ImageView;\r\nimport android.widget.TextView;\r\n\r\nimport java.util.ArrayList;\r\n\r\npublic class CustomAdapter extends RecyclerView.Adapter {\r\n\r\nArrayList personNames;\r\nArrayList personImages;\r\nContext context;\r\n\r\npublic CustomAdapter(Context context, ArrayList personNames, ArrayList personImages) {\r\nthis.context = context;\r\nthis.personNames = personNames;\r\nthis.personImages = personImages;\r\n}\r\n\r\n@Override\r\npublic MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {\r\n\/\/ infalte the item Layout\r\nView v = LayoutInflater.from(parent.getContext()).inflate(R.layout.rowlayout, parent, false);\r\n\/\/ set the view's size, margins, paddings and layout parameters\r\nMyViewHolder vh = new MyViewHolder(v); \/\/ pass the view to View Holder\r\nreturn vh;\r\n}\r\n\r\n@Override\r\npublic void onBindViewHolder(MyViewHolder holder, final int position) {\r\n\/\/ set the data in items\r\nholder.name.setText(personNames.get(position));\r\nholder.image.setImageResource(personImages.get(position));\r\n\/\/ implement setOnClickListener event on item view.\r\nholder.itemView.setOnClickListener(new View.OnClickListener() {\r\n@Override\r\npublic void onClick(View view) {\r\n\/\/ open another activity on item click\r\nIntent intent = new Intent(context, SecondActivity.class);\r\nintent.putExtra(\"image\", personImages.get(position)); \/\/ put image data in Intent\r\ncontext.startActivity(intent); \/\/ start Intent\r\n}\r\n});\r\n\r\n}\r\n\r\n@Override\r\npublic int getItemCount() {\r\nreturn personNames.size();\r\n}\r\n\r\npublic class MyViewHolder extends RecyclerView.ViewHolder {\r\n\/\/ init the item view's\r\nTextView name;\r\nImageView image;\r\n\r\npublic MyViewHolder(View itemView) {\r\nsuper(itemView);\r\n\r\n\/\/ get the reference of item view's\r\nname = (TextView) itemView.findViewById(R.id.name);\r\nimage = (ImageView) itemView.findViewById(R.id.image);\r\n\r\n}\r\n}\r\n}\r\n<\/pre>\n
Step 7: <\/strong>Create a new XML file activity_second.xml and add below code in it.
\nIn this step we create a ImageView in our XML file to show the selected image in full size.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    android:background=\"#fff\">\r\n\r\n    <ImageView\r\n        android:id=\"@+id\/selectedImage\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_centerInParent=\"true\"\r\n        android:scaleType=\"fitXY\" \/>\r\n<\/RelativeLayout>\r\n<\/pre>\n
Step 8:<\/strong> Create a new Activity and name it SecondActivity.class and add the below code in it.<\/p>\n
In this step we get the reference of ImageView and then get Intent which was set from adapter of Previous Activity and then finally we set the image in ImageView.<\/p>\n
package abhiandroid.com.recyclerviewexample;\r\nimport android.content.Intent;\r\nimport android.os.Bundle;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.widget.ImageView;\r\n\r\npublic class SecondActivity extends AppCompatActivity {\r\n\r\nImageView selectedImage;\r\n\r\n@Override\r\nprotected void onCreate(Bundle savedInstanceState) {\r\nsuper.onCreate(savedInstanceState);\r\nsetContentView(R.layout.activity_second);\r\nselectedImage = (ImageView) findViewById(R.id.selectedImage); \/\/ init a ImageView\r\nIntent intent = getIntent(); \/\/ get Intent which we set from Previous Activity\r\nselectedImage.setImageResource(intent.getIntExtra(\"image\", 0)); \/\/ get image from Intent and set it in ImageView\r\n}\r\n}<\/pre>\n
Output:<\/strong><\/p>\n
Now run the App and you can see person names with their images with default vertical orientation in Card style. Click on any image and it will open in large size.<\/p>\n
\n
CardView Example 2 in Android Studio:<\/strong><\/h4>\n
Below is the example of CardView in which we display the data\/information in a Card. In this example we use ImageView and TextView inside a card. Whenever a user click on the card a message “CardView clicked event ” is displayed on the screen with the help of Toast.<\/p>\n
Below you can download code, see final output and step by step explanation of the example:<\/p>\n
Download Code<\/a><\/p>\n
\"CardViewStep 1:<\/span><\/strong> Create a new project and name it CardViewExample.
\nStep 2:<\/span><\/strong> Open Gradle Scripts > build.gradle and add CardView Library dependency in it.<\/p>\n
apply plugin: 'com.android.application'\r\nandroid {\r\n    compileSdkVersion 25\r\n    buildToolsVersion \"25.0.3\"\r\n    defaultConfig {\r\n        applicationId \"abhiandroid.com.cardviewexample\"\r\n        minSdkVersion 15\r\n        targetSdkVersion 25\r\n        versionCode 1\r\n        versionName \"1.0\"\r\n        testInstrumentationRunner \"android.support.test.runner.AndroidJUnitRunner\"\r\n    }\r\n    buildTypes {\r\n        release {\r\n            minifyEnabled false\r\n            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'\r\n        }\r\n    }\r\n}\r\n\r\ndependencies {\r\n    compile fileTree(dir: 'libs', include: ['*.jar'])\r\n    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {\r\n        exclude group: 'com.android.support', module: 'support-annotations'\r\n    })\r\n    compile 'com.android.support:appcompat-v7:25.3.1'\r\n    compile 'com.android.support.constraint:constraint-layout:1.0.2'\r\n    testCompile 'junit:junit:4.12'\r\n    compile 'com.android.support:cardview-v7:23.0.1' \/\/ CardView dependency file\r\n}<\/pre>\n
Step 3:<\/span><\/strong> Open res -> layout -> activity_main.xml (or) main.xml and add following code:<\/p>\n
In this step we create a ImageView and a TextView inside our CardView. We also use elevation, background and other attributes of CardView.<\/p>\n
 <LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:card_view=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"vertical\">\r\n\r\n    <android.support.v7.widget.CardView\r\n        android:id=\"@+id\/card_view\"\r\n        android:layout_width=\"250dp\"\r\n        android:layout_height=\"250dp\"\r\n        android:layout_gravity=\"center\"\r\n        card_view:cardBackgroundColor=\"#000\"\r\n        card_view:cardElevation=\"20dp\"\r\n        card_view:contentPadding=\"20dp\">\r\n\r\n        <RelativeLayout\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:layout_gravity=\"center\">\r\n\r\n            <ImageView\r\n                android:id=\"@+id\/imageView\"\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_centerHorizontal=\"true\"\r\n                android:src=\"@drawable\/abhiandroid\" \/>\r\n\r\n\r\n            <TextView\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_below=\"@+id\/imageView\"\r\n                android:layout_centerHorizontal=\"true\"\r\n                android:linksClickable=\"true\"\r\n                android:text=\"https:\/\/abhiandroid.com\"\r\n                android:textColor=\"#fff\"\r\n                android:textSize=\"20sp\" \/>\r\n        <\/RelativeLayout>\r\n\r\n    <\/android.support.v7.widget.CardView>\r\n\r\n<\/LinearLayout><\/pre>\n
Step 4 :<\/span> <\/strong>Now open app -> java -> package -> MainActivity.java and add the below code.<\/p>\n
In this step firstly we get the reference of CardView and then set the corner radius value.Finally we implement the onClickListener event on CardView so that if a user clicks on CardView a message “CardView clicked event” is displayd on the screen by using a Toast.<\/p>\n
 \r\npackage abhiandroid.com.cardviewexample;\r\nimport android.os.Bundle;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.support.v7.widget.CardView;\r\nimport android.view.View;\r\nimport android.widget.Toast;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        \/\/ init the CardView\r\n        CardView cardView = (CardView) findViewById(R.id.card_view);\r\n        cardView.setRadius(20F); \/\/ set corner radius value\r\n        \/\/ Implement onClickListener event on CardView\r\n        cardView.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n                Toast.makeText(MainActivity.this, \"CardView clicked event \", Toast.LENGTH_LONG).show();\r\n            }\r\n        });\r\n\r\n    }\r\n}\r\n<\/pre>\n
Output:<\/strong><\/p>\n
Now run the App and you will see simple CardView which will display the information.<\/p>\n","protected":false},"excerpt":{"rendered":"
In Android, CardView is another main element that can represent the information in a card manner with a drop shadow called elevation and corner radius which looks consistent across the platform. CardView was introduced in Material Design in API level 21 (Android 5.0 i.e Lollipop). CardView uses elevation property on Lollipop for shadows and falls … Continue reading CardView Tutorial Using RecyclerView Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"footnotes":""},"class_list":["post-438","page","type-page","status-publish","hentry"],"psp_head":"CardView Tutorial Using RecyclerView Example In Android Studio \u2013 Android Material Design Tutorial<\/title>\r\n<meta name=\"description\" content=\"CardView step by step complete tutorial using recyclerview example in Android Studio. In Android, CardView is another main element that can represent the information in a card manner with a drop shadow called elevation and corner radius which looks consistent across the platform.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/materialdesign\/cardview\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/comments?post=438"}],"version-history":[{"count":3,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/438\/revisions"}],"predecessor-version":[{"id":737,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/438\/revisions\/737"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/media?parent=438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}