Android Cardview

Android CardView Example

Android Cardview Example – The recent release of Android os support collection (v7:21.0.+) has presented two new interface widget: RecyclerView and CardView that helps in building abundant Android apps.

Android CardView

The RecyclerView is more complex and adaptable and successful version of ListView. RecyclerView ViewGroup can be an container for greater data group of views that may be recycled and scrolled very successfully. RecyclerView can be utilized for much larger datasets to be rendered on the UI just like a list. RecyclerView provides maximum overall flexibility to create different kind of views. If you didn’t know about Android RecyclerView then click.

Inside the other side the CardView widget, can be an expansion of existing FrameLayout category. This can help to cover other UI elements as Google style cards. CardView widgets can have shadows and round corners. The next image shows example Google card design used Google Now application.

android cardview

Add Android CardView Support Library

Android os SDK doesn’t includes the CardView class, and therefore for using CardView in assembling your project you need to include the greeting card view support collection to assembling your project. Android Studio room users can truly add the next graddle dependency in your build.graddle data file to include CardView to job.

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

 

Declare Android CardView Layout

Now that we’ve added the build dependencies to task, let us just do it to declare the CardView structure. In this particular example, we will add an ImageView and two TextViews as shown in the next screenshot.

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="380dp"
    android:layout_margin="8dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/thumbnail"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:layout_alignParentTop="true"
            android:scaleType="centerCrop"
            android:src="@drawable/wallpaper" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/thumbnail"
            android:maxLines="3"
            android:padding="8dp"
            android:text="@string/title"
            android:textColor="#222"
            android:textStyle="bold"
            android:textSize="22dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/title"
            android:maxLines="3"
            android:padding="8dp"
            android:text="@string/description"
            android:textColor="#666"
            android:textSize="14dp" />

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

The outcome of the aforementioned code is really as follows


Do You Have Any Question About This Tutorial? Ask Question Now On Andro Development & Get Answer Instantly. No Signup/Login Needed


android cardview

Customize Android CardView Appearance

The CardView structure declaration is really straight forward. Why don’t we now take a peek into using a few of the precise CardView characteristics for customization. CardView widget gives you to control the backdrop color, shadow, spot radius etc. For using the custom features in XML, you will need to add the next namespace declaration to your design parent.

<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:cardView="http://schemas.android.com/apk/res-auto"
  ... >

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

 

Now why don’t we use the next CardView properties to modify the looks of the CardView

  • To create the nook radius in your designs, use the cardView:cardCornerRadius feature. To create the part radius in your code, use the cardView.setRadius method.
  • To set the backdrop color of a card, use the cardView:cardBackgroundColor feature.

 Cardview Elevation Not Showing

Most of the android developers get errors about cardview elevation and search google cardview elevation not showing. recently my website user contacts me and share this problem. I think that I have to update my android cardview article so now I am updating.

If your shadow is not shown then in the root layout you have to add following code

xmlns:card_view="http://schemas.android.com/apk/res-auto"

and for cardview, set cardElevation to 5dp

card_view:cardElevation="5dp"

have you thought why shadow is not shown? why shadow will show? just because of  they are drawn outside of the bounds of the Android RelativeLayout and the view is clipped to its bound. here is two solution

    1.  Set clipchilder to false android:clipChildren=”false” to the parent of your RelativeLayout

2. Set Padding to little amount to your view e.g android:clipToPadding=”false”

if this not work then  android:elevation property to the redbubble imageview. add android:elevation to that view to view shadow here is example.

<ImageView
       android:id="@+id/redbubble"
       android:layout_width="25dp"
       android:layout_height="25dp"
       android:layout_gravity="center"
       android:contentDescription="@string/app_name"
       android:scaleType="centerCrop"
       android:elevation="2dp"
       android:src="@drawable/redbubble" />

Another Solution Set cardUseCompatPadding To True card_view:cardUseCompatPadding="true" to your CardView and shadows will show on Lollipop devices.

Here Our Tutorial Ends! 🙂

See Also:

Android ListView

Android RecyclerView

Android RelativeLayout

 

 


Do You Have Any Question About This Tutorial? Ask Question Now On Andro Development & Get Answer Instantly. No Signup/Login Needed