Android Articles » CardView
IntroductionCardView is the part of the Material Design User Interface(UI) widgets, which is introduced to Android in 2014, with the release of Android Lollipop. The CardView provides a flexible and advanced way of implementing complex and custom list with a couple of advanced UI features. CardView extends the FrameLayout class . The CardView shows information inside the Card itself. We can add text , images, buttons and many more widgets inside the Card. We can also set the elevation to make it looks like it's floating and even curve the edges to make it look more smooth and elegant.
Here is a live demo of the expected output.
Here is a sample code to place the CardView widget which contains a TextView in it. This is the layout xml code.
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="CardView"
android:textColor="#000000"
android:textSize="40dp" />
</android.support.v7.widget.CardView>
</LinearLayout>
Some of the most commonly used attributes of the CardView are as follows:
app:cardCornerRadius=""
app:cardElevation=""
app:cardBackgroundColor=""
Now let's have a look at a sample program for implementing the card view :
Create a new project and go to the build.gradle(Module:app) and add the dependency for the CardView:
compile 'com.android.support:cardview-v7:26.0.0-alpha1'
Now create three activities - CardViewActivity, ElevatedCardViewActivity, CurvedCardViewActivity .
In the first activity (CardViewActivity), a simple CardView will be shown.
In the second activity(ElevatedCardViewActivity), a CardView with elevation is shown.
In the third activity(CurvedCardViewActivity), another CardView with a curved corner radius is shown.
Let's take look at the activities now:
The first activity is activity_card_view.xml : In this activity, a simple CardView will be placed and a button to navigate to the next page.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_curved_card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
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:weightSum="10">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="7"
android:padding="10dp">
<android.support.v7.widget.CardView
android:id="@+id/card_view1"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="CardView"
android:textColor="#000000"
android:textSize="40dp" />
</android.support.v7.widget.CardView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical"></LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Next" />
</RelativeLayout>
</LinearLayout>
The corresponding java class will be CardViewActivity :
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.widget.CardView;
import android.view.View;
import android.widget.Button;
public class CardViewActivity extends Activity {
CardView cardview;
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_card_view);
//initialize cardview
cardview = (CardView) findViewById(R.id.card_view1);
//set cardview background color
cardview.setCardBackgroundColor(0xFFEEEEEE);
button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent i = new Intent(getApplication(), ElevatedCardViewActivity.class);
startActivity(i);
}
});
}
}
The second activity is activity_elevated_card_view.xml : Here, a CardView, SeekBar and a button is placed. We can change the elevation of the CardView when we seek the thumb of the SeekBar.
We can navigate to the next page by clicking the button.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_curved_card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:orientation="vertical"
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:weightSum="10">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="7">
<android.support.v7.widget.CardView
android:id="@+id/card_view2"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_margin="15dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="50dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="CardView with Elevation"
android:textColor="#555"
android:textSize="30dp" />
</android.support.v7.widget.CardView>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical">
<android.support.v7.widget.AppCompatSeekBar
android:id="@+id/elevation_seek"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Next" />
</RelativeLayout>
</LinearLayout>
The java class ElevatedCardViewActivity :
import android.content.Intent;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.CardView;
import android.view.View;
import android.widget.Button;
import android.widget.SeekBar;
import android.widget.TextView;
public class ElevatedCardViewActivity extends AppCompatActivity {
CardView cardview;
SeekBar seek_elevation;
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_elevated_card_view);
cardview = (CardView) findViewById(R.id.card_view2);
cardview.setCardBackgroundColor(0xFFEEEEEE); //set cardview background
seek_elevation = (SeekBar) findViewById(R.id.elevation_seek); //seekbar to change the elevation
seek_elevation.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean b) {
cardview.setCardElevation(progress); //floating like effect for the card view
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent i = new Intent(getApplication(), CurvedCardViewActivity.class);
startActivity(i);
}
});
}
}
The third activity is activity_curved_card_view.xml : Here, a CardView, SeekBar and a button is placed. With the SeekBar, we can change the corner radius of the CardView when we seek the thumb of the SeekBar and in the click of the button, we will be go back to the first page.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_curved_card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
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:weightSum="10">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="7"
android:padding="10dp">
<android.support.v7.widget.CardView
android:id="@+id/card_view3"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:layout_marginTop="50dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="CardView with Curved Radius"
android:textColor="#0000FF"
android:textSize="40dp" />
</android.support.v7.widget.CardView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical">
<android.support.v7.widget.AppCompatSeekBar
android:id="@+id/radius_seek"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Back" />
</RelativeLayout>
</LinearLayout>
The java class CurvedCardViewActivity :
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.CardView;
import android.view.View;
import android.widget.Button;
import android.widget.SeekBar;
public class CurvedCardViewActivity extends AppCompatActivity {
CardView cardview;
SeekBar seek_radius;
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_curved_card_view);
cardview = (CardView) findViewById(R.id.card_view3);
cardview.setCardBackgroundColor(0xFFFEFEFE); //set cardView background
seek_radius = (SeekBar) findViewById(R.id.radius_seek); //seekbar to change the radius
seek_radius.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean b) {
cardview.setRadius(progress); //curve the edges of the cardview
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent i = new Intent(getApplicationContext(), CardViewActivity.class);
startActivity(i);
}
});
}
}
Make sure that the activities are declared in the AndroidManifest.xml.
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".CardViewActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".ElevatedCardViewActivity" />
<activity android:name=".CurvedCardViewActivity"></activity>
</application>
With this the setup is complete. Now try running the app & you should get the output, you see in the live demo.
