Build Gradle
Add the following dependencies to apps build.gradle .
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:cardview-v7:23.0.1'
}
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:cardview-v7:23.0.1'
}
XML Layout
Create a XML Layout in res/layout and add CardView as a parent View and the UI component inside which will be shown as card .
<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/cardview"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_margin="20dp"
android:foreground="@drawable/card_foreground">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/thumbnail"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:src="@drawable/profile_pic" />
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/thumbnail"
android:text="Pawan Deshpande"
android:textColor="#222"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/title"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/thumbnail"
android:text="hdpavan@xyz.com"
android:textColor="#222"
android:textSize="15sp" />
</RelativeLayout>
</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/cardview"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_margin="20dp"
android:foreground="@drawable/card_foreground">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/thumbnail"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:src="@drawable/profile_pic" />
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/thumbnail"
android:text="Pawan Deshpande"
android:textColor="#222"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/title"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/thumbnail"
android:text="hdpavan@xyz.com"
android:textColor="#222"
android:textSize="15sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Main Activity
Create a class MainActivity which extends activity and set the content of this activity with above defined XML layout .
Get the reference to CardView and set the on click listener .
package com.tutorialsbuzz.cardview;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private CardView mcardView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mcardView = (CardView) findViewById(R.id.cardview);
mcardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "On Card Clicked", Toast.LENGTH_SHORT).show();
}
});
}
}
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private CardView mcardView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mcardView = (CardView) findViewById(R.id.cardview);
mcardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "On Card Clicked", Toast.LENGTH_SHORT).show();
}
});
}
}
Customizing CardView
Some of the common attribute or property of xml tag like android:padding, android:background which doesn't support for cardview , there are some custom property for CardView to work with , lets see some of them
First add the below property for cardview
xmlns:card_view="http://schemas.android.com/apk/res-auto"
Padding
card_view:contentPaddingTop="20dp"
card_view:contentPaddingLeft="20dp"
card_view:contentPaddingBottom="20dp"
card_view:contentPaddingRight="20dp"
card_view:contentPaddingLeft="20dp"
card_view:contentPaddingBottom="20dp"
card_view:contentPaddingRight="20dp"
Background Color
card_view:cardBackgroundColor="#91B2DE"
Radius
card_view:cardCornerRadius="10dp"
Elevation ( Shadow )
card_view:cardUseCompatPadding="true"
card_view:cardElevation="30dp"
card_view:cardElevation="30dp"
6 comments:
helpful tutorial,thanks for posting this type of tutorials
I am trying to run cardview project in eclipse but it is showing me an following error:
'No resource found that matches the given name 'android:Theme.Holo.Light.DialogWhenLarge'.
in the console window plz help me
@Rushikesh
Open res/styles.xml check whether app theme parent " Theme.AppCompat.Light.DarkActionBar "
it should be like
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
</resources>
[…] Create a XML Layout inside res/layout by filename card_layout.xml and add cardview to it . In the previous tutorial we have seen how to create android cardview. […]
[…] have seen tutorial on how to create RecyclerView with scrolling behaviour and also on how to create CardView and it’s customization . As the title of this post suggest in this tutorial we will see the combination of this two […]
Thanks sir,it works in a single attempt...
Post a Comment