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 |
|
Set the padding between the edges of the CardView and children of CardView. |
|
This property defines the Background color of the CardView android. |
|
If you want to choose Elevation dynamically then use cardMaxElevation. |
|
Define the corner radius of the card. |
|
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.
|
1 2 3 |
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.
|
1 2 3 4 5 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<?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>”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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>”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
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.
|
1 2 3 |
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.
|
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”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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.
