Android

CardView Android Studio

November 20, 2018

1494

CardView Android Studio example gives a further developed and adaptable method for executing unpredictable and custom listview with greater usefulness that is required these days for our applications.

In this post, you will learn about the implementation of the CardView Android Studio. This example of CardView contains one image and three textView.Outline. Android 7.0 presents another gadget called CardView which basically can be thought of as a FrameLayout with adjusted corners and shadow dependent on its height. Note that a CardView wraps a format and will frequently be the holder utilized in a design for everything inside a ListView or RecyclerView.

Prerequisite

“It will good to cover my previous articles before this. It helps to learn more about Android development. In which I explained.”

CardView Android Studio example

The new supporting library in Android Lollipop introduces new UI elements such as Recycle view and CardView.

The CardView is the element of Android Material Design.
A CardView also a view group. The CardView adds into Activity using an XML file.
Each card will represent a row in the RecyclerView.
A CardView is a new widget that shows all the information on a card.
A CardView is like a container where you can place images and as well as textView.
CardView is a component that looks like a card.

Attribute	Explanation
*cardUseCompatPadding*	Set the padding between the edges of the CardView and children of CardView.
*CardBackgroundColor*	This property defines the Background color of the CardView android.
*cardMaxElevation*	If you want to choose Elevation dynamically then use cardMaxElevation.
*cardConerRadius*	Define the corner radius of the card.
*cardPreventCornerOverlap*	Use for Content padding enables and disable.

Create a CardView

The following step has completed

Add the library in the Dependence section.
Single Row layout created.
Created adapter.
Define a Datasource.

Resource section

Adding resources in the Grade file is your first task. You can use the CardView widget to run the older device The following elements added to the dependency section.

compile "com.android.support:appcompat-v7:21.0.+"
compile 'com.android.support:recyclerview-v7:21.0.+'
compile 'com.android.support:cardview-v7:21.0.+'

compile "com.android.support:appcompat-v7:21.0.+"

compile 'com.android.support:recyclerview-v7:21.0.+'

compile 'com.android.support:cardview-v7:21.0.+'

To make a CardView Android Studio example you would need to add the following code to your XML.

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

<android.support.v7.widget.CardView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/card"

</android.support.v7.widget.CardView>

After that create a single_row layout. This layout contains the one textView and one image. The CardView contains one image and text view.

The Image shows the Movie icons.
A TexView display the phone number

It is prescribed to utilize a compartment see like RelativeLayout or LinearLayout as the main kid and CardView used as a child. then place all the content inside the layout.

The XML will look like.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical"
       android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/card">

         <RelativeLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:padding="10dp">
         <ImageView
         android:layout_width="120dp"
         android:layout_height="120dp"
         android:id="@+id/image"
         android:src="@drawable/uyt"
         />
         <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@+id/image"
         android:text="Day of love"
         android:layout_marginLeft="15dp"
         android:layout_marginTop="15dp"
         android:textSize="15dp"
         android:layout_toRightOf="@+id/image"
         android:layout_alignParentTop="true"
         android:id="@+id/text"/>
          <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Country"
          android:layout_below="@+id/text"
          android:layout_marginLeft="15dp"
          android:layout_toRightOf="@+id/image"
          android:textStyle="bold"
          android:id="@+id/text4"
                />
               <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Mobile number"
                android:layout_below="@+id/text4"
                android:layout_marginLeft="15dp"
                android:layout_toRightOf="@+id/image"
                android:textStyle="bold"
                android:id="@+id/text3"
                />
            </RelativeLayout>
            </android.support.v7.widget.CardView>
            </LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<android.support.v7.widget.CardView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/card">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="10dp">

<ImageView

android:layout_width="120dp"

android:layout_height="120dp"

android:id="@+id/image"

android:src="@drawable/uyt"

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/image"

android:text="Day of love"

android:layout_marginLeft="15dp"

android:layout_marginTop="15dp"

android:textSize="15dp"

android:layout_toRightOf="@+id/image"

android:layout_alignParentTop="true"

android:id="@+id/text"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Country"

android:layout_below="@+id/text"

android:layout_marginLeft="15dp"

android:layout_toRightOf="@+id/image"

android:textStyle="bold"

android:id="@+id/text4"

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Mobile number"

android:layout_below="@+id/text4"

android:layout_marginLeft="15dp"

android:layout_toRightOf="@+id/image"

android:textStyle="bold"

android:id="@+id/text3"

</RelativeLayout>

</android.support.v7.widget.CardView>

</LinearLayout>

The single row layout shows you the following output with one image and one text view.

Create a new class
Name of the class ContactNumber
Define some variables and set the getter and setter method. “<Paste the following code on an activity that hosts the layout>”

public class ContactNumber {
public ContactNumber( int imaes_id,String demo,String demo1,String demo2){
      this.setImaes_id(imaes_id);
       this.setDemo(demo);
       this.setDemo(demo1);
       this.setDemo(demo2);
   }
    private int imaes_id;
    private String demo,demo1,demo2;
    public int getImaes_id() {
        return imaes_id;
    }
    public void setImaes_id(int imaes_id) {
    this.imaes_id = imaes_id;
    }
    public String getDemo() {
        return demo;
    }
    public void setDemo(String demo) {
        this.demo = demo;
    }
    public String getDemo1() {
        return demo1;
    }
    public void setDemo1(String demo1) {
        this.demo1 = demo1;
    }
    public String getDemo2() {
        return demo2;
    }
    public void setDemo2(String demo2) {
        this.demo2 = demo2;
    }
}

public class ContactNumber {

public ContactNumber( int imaes_id,String demo,String demo1,String demo2){

this.setImaes_id(imaes_id);

this.setDemo(demo);

this.setDemo(demo1);

this.setDemo(demo2);

}

private int imaes_id;

private String demo,demo1,demo2;

public int getImaes_id() {

return imaes_id;

}

public void setImaes_id(int imaes_id) {

this.imaes_id = imaes_id;

}

public String getDemo() {

return demo;

}

public void setDemo(String demo) {

this.demo = demo;

}

public String getDemo1() {

return demo1;

}

public void setDemo1(String demo1) {

this.demo1 = demo1;

}

public String getDemo2() {

return demo2;

}

public void setDemo2(String demo2) {

this.demo2 = demo2;

}

Create a new class
This class implements the RecycleAdapter.
The name of the class ContAdapter extends RecyclerView

The RecycleAdapter class contains three methods.

onCreateViewHolder()
OnBindViewHolder()
getItemCount()

getItemCount()– will return the value of count how many time you want to inflate your custom view.

OnBindViewHolder()– performing all the action from event handling. Means while performing all the actions of view.

onCreateViewHolder()– a technique where you will pass your custom view format to inflate it with LayoutInflater and in this strategy just you have to make an Object of RecyclerviewHolder class additionally after that you will restore this view question in this strategy.

“<Paste the following code on an activity that hosts the layout>”

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 java.util.ArrayList;

public class ContAdapter extends RecyclerView.Adapter<ContAdapter.ContentViewHolder> {
        ArrayList<ContactNumber> contacts=new ArrayList<ContactNumber>();
        public ContAdapter(ArrayList<ContactNumber> contacts) {
        this.contacts=contacts;
}
    @Override
    public ContentViewHolder onCreateViewHolder(ViewGroup parent, int i) {
View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.card_view, parent, false);
        ContentViewHolder contentViewHolder= new ContentViewHolder(view);
        return contentViewHolder;
    }
       @Override
        public void onBindViewHolder(ContentViewHolder viewHolder, int position) {
        ContactNumber con= contacts.get(position);
        viewHolder.per_image.setImageResource(con.getImaes_id());
        viewHolder.per_dem.setText(con.getDemo());
        viewHolder.per_dem1.setText(con.getDemo1());
        viewHolder.per_dem2.setText(con.getDemo2());
        }
        @Override
        public int getItemCount() {
        return contacts.size();
        }
   public static class ContentViewHolder extends RecyclerView.ViewHolder
          {
         ImageView per_image;
         TextView per_dem;
         TextView per_dem1;
         TextView per_dem2;
         ContentViewHolder(View view){
         super(view);
         per_image=(ImageView) view.findViewById(R.id.image);
         per_dem=(TextView)view.findViewById (R.id.text);
         per_dem1=(TextView)view.findViewById(R.id.text4);
         per_dem2=(TextView)view.findViewById(R.id.text3);
        }   }}

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 java.util.ArrayList;

public class ContAdapter extends RecyclerView.Adapter<ContAdapter.ContentViewHolder> {

ArrayList<ContactNumber> contacts=new ArrayList<ContactNumber>();

public ContAdapter(ArrayList<ContactNumber> contacts) {

this.contacts=contacts;

}

@Override

public ContentViewHolder onCreateViewHolder(ViewGroup parent, int i) {

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

ContentViewHolder contentViewHolder= new ContentViewHolder(view);

return contentViewHolder;

}

@Override

public void onBindViewHolder(ContentViewHolder viewHolder, int position) {

ContactNumber con= contacts.get(position);

viewHolder.per_image.setImageResource(con.getImaes_id());

viewHolder.per_dem.setText(con.getDemo());

viewHolder.per_dem1.setText(con.getDemo1());

viewHolder.per_dem2.setText(con.getDemo2());

}

@Override

public int getItemCount() {

return contacts.size();

}

public static class ContentViewHolder extends RecyclerView.ViewHolder

{

ImageView per_image;

TextView per_dem;

TextView per_dem1;

TextView per_dem2;

ContentViewHolder(View view){

super(view);

per_image=(ImageView) view.findViewById(R.id.image);

per_dem=(TextView)view.findViewById (R.id.text);

per_dem1=(TextView)view.findViewById(R.id.text4);

per_dem2=(TextView)view.findViewById(R.id.text3);

} }}

Data Source

In a ListView and RecycerView, the adapter is used to map the data. You should define Datasource before creating an adapter. The data source will be JSON a string resource Array list.

name=getResources().getStringArray(R.array.d);
email=getResources().getStringArray(R.array.de);
mobile=getResources().getStringArray(R.array.demo2);

name=getResources().getStringArray(R.array.d);

email=getResources().getStringArray(R.array.de);

mobile=getResources().getStringArray(R.array.demo2);

LayoutManager

The Layout Manager manages the position of each item. The layout manager converted the XML appearance into java. simple define the layout Manager and extend it.

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

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

Adapter

This Adapter pursues the view holder configuration design, which implies that to characterize a custom class that expands RecyclerView.ViewHolder. To make an Adapter in a Listview CardView as well as CardView can utilize, you should extend it RecyclerView.Adapter.

“<Paste the following code on an activity that hosts the layout> File: MainActivity”

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuItem;
import java.util.ArrayList;
public class MainActivity extends Activity {
    RecyclerView recyclerView;
    RecyclerView.Adapter adapter;
    RecyclerView.LayoutManager manager;
    ArrayList<ContactNumber> arrayList= new ArrayList<ContactNumber>();
    int [] imag_aa={R.drawable.aaa,R.drawable.bhh,R.drawable.ccc,R.drawable.uyt};
    String[] name,email,mobile;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        name=getResources().getStringArray(R.array.d);
        email=getResources().getStringArray(R.array.de);
        mobile=getResources().getStringArray(R.array.demo2);
        int i=0;
        for (String Name: name){
         ContactNumber contactNumber= new ContactNumber(imag_aa[i],name[i],email[i],mobile[i]);
         i++;
         arrayList.add(contactNumber);
        }
        recyclerView=(RecyclerView)findViewById(R.id.rey_car);
        manager=new LinearLayoutManager(this);
        recyclerView.setLayoutManager(manager);
        recyclerView.setHasFixedSize(true);
        adapter=new ContAdapter(arrayList);
        recyclerView.setAdapter(adapter);
       }}

import android.app.Activity;

import android.os.Bundle;

import android.support.v7.widget.LinearLayoutManager;

import android.support.v7.widget.RecyclerView;

import android.view.Menu;

import android.view.MenuItem;

import java.util.ArrayList;

public class MainActivity extends Activity {

RecyclerView recyclerView;

RecyclerView.Adapter adapter;

RecyclerView.LayoutManager manager;

ArrayList<ContactNumber> arrayList= new ArrayList<ContactNumber>();

int [] imag_aa={R.drawable.aaa,R.drawable.bhh,R.drawable.ccc,R.drawable.uyt};

String[] name,email,mobile;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

name=getResources().getStringArray(R.array.d);

email=getResources().getStringArray(R.array.de);

mobile=getResources().getStringArray(R.array.demo2);

int i=0;

for (String Name: name){

ContactNumber contactNumber= new ContactNumber(imag_aa[i],name[i],email[i],mobile[i]);

i++;

arrayList.add(contactNumber);

}

recyclerView=(RecyclerView)findViewById(R.id.rey_car);

manager=new LinearLayoutManager(this);

recyclerView.setLayoutManager(manager);

recyclerView.setHasFixedSize(true);

adapter=new ContAdapter(arrayList);

recyclerView.setAdapter(adapter);

}}

Here run the application and see the amazing output. the output contains one image and one textView. but you can custom it as you want.

Wrap up

I had explained what is CardView. how created it. In this instructional exercise, you have figured out how to utilize the CardView and RecyclerView gadgets that were presented in Android Lollipop. You have likewise observed precedents of how to make utilization of these gadgets in Material Design applications.