preface

CardView has been added in Android version 5.0. CardView inherits FrameLayout class, FrameLayout with rounded corners and shadows, and can be set with rounded corners and shadows to make the control have stereo, and can also contain other layout containers and controls.

This article introduces Android CardView in detail and usage methods and examples, mainly including Android CardView in detail and usage methods and examples, application skills, basic knowledge summary and matters needing attention.

1. Common properties of CardView

2. Basic use of CardView

1. Add dependency packages

To add CardView’s dependencies, you must add the Google Maven code base to your project. Add dependencies for required artifacts to your application or module’s build.gradle file:

dependencies {
    implementation "Androidx. Cardview: cardview: 1.0.0."
}
Copy the code

By the way, on androidx, a lot of friends have written me why I used to rely on v7 packages. Androidx is a product of Google’s previous v4 and v7 packages, and all controls will rely on androidx in the future

2. Create the layout

Create a CardView control in a layout file using the same method as a ViewGroup. You can add a series of child controls to your CardView. In general, CardView can be treated as a parent container, which can contain other child views and be used as an item layout in ListView or RecyclerView.

      
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"  android:layout_height="wrap_content"  android:layout_margin="5dp"  app:contentPadding="8dp">   <androidx.constraintlayout.widget.ConstraintLayout  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:orientation="horizontal">   <TextView  android:id="@+id/tv_name"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="Jaynm"  app:layout_constraintLeft_toLeftOf="parent"  app:layout_constraintTop_toTopOf="parent" />   <TextView  android:id="@+id/tv_time"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="2020-01-18"  app:layout_constraintEnd_toEndOf="parent"  app:layout_constraintTop_toTopOf="@+id/tv_name" />   <TextView  android:id="@+id/tv_title"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="A mobile developer thinking about the future."  app:layout_constraintStart_toStartOf="@+id/tv_name"  app:layout_constraintTop_toBottomOf="@+id/tv_name" />   </androidx.constraintlayout.widget.ConstraintLayout> </androidx.cardview.widget.CardView> Copy the code

CardView uses a 3d z-axis, and you can set shadows and rounded corners to make your layout look like a card and make your UI look three-dimensional. Here’s how it looks:

CardView sets the shadow effect

Now the Android system has reached 10.0, so the Material Design control is introduced above 5.0 in this paper. Friends who need to adapt to 5.0 or lower versions need to set different layouts for the properties of CardView. There is no detailed distinction here.

App :cardElevation or setCardElevation(float Elevation) implements the CardView shadow effect, directly pasting layout files and running effects.

      
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
 android:layout_height="match_parent"  android:background="@color/white"  android:gravity="center"  android:orientation="vertical">   <androidx.cardview.widget.CardView  android:layout_width="200dp"  android:layout_height="60dp"  app:cardElevation="0dp" />   <androidx.cardview.widget.CardView  android:layout_width="200dp"  android:layout_height="60dp"  android:layout_marginTop="30dp"  app:cardElevation="10dp" />   <androidx.cardview.widget.CardView  android:layout_width="200dp"  android:layout_height="60dp"  android:layout_marginTop="30dp"  app:cardElevation="50dp"/>  </LinearLayout> Copy the code

Add 3 cardViews to the LinearLayout and set the shadows of 0DP / 10DP / 50DP respectively. The shadow effect can be clearly seen in the picture.

4. CardView sets rounded corner effect

Setting the app:cardCornerRadius property or the setRadius(float radius) method in the XML layout can set the CardView rounded corner effect.

The following image shows the effect of setting app:cardCornerRadius to 0dp/ 10DP / 100DP respectively.

5. CardView sets Ripple effect

By default, the CardView is unclickable and has no touch feedback. Touch feedback animation gives visual feedback to the user when they click on the CardView. Google gives us a really cool Ripple effect, which is what we call the Ripple effect. Use the Android: Foreground property to add the Ripple style.

1. The system has Ripple effect

      
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
 android:layout_height="match_parent"  android:background="@color/white"  android:gravity="center"  android:orientation="vertical">   <androidx.cardview.widget.CardView  app:cardCornerRadius="0dp"  app:cardBackgroundColor="@color/md_cyan_500"  android:layout_width="200dp"  android:layout_height="60dp"  android:elevation="0dp" />   <androidx.cardview.widget.CardView  android:clickable="true"  android:foreground="? android:attr/selectableItemBackground"  app:cardCornerRadius="10dp"  app:cardBackgroundColor="@color/md_cyan_500"  android:layout_width="200dp"  android:layout_height="60dp"  android:layout_marginTop="30dp"  app:cardElevation="10dp" />   <androidx.cardview.widget.CardView  android:clickable="true"  android:foreground="? android:attr/selectableItemBackgroundBorderless"  app:cardCornerRadius="100dp"  app:cardBackgroundColor="@color/md_cyan_500"  android:layout_width="200dp"  android:layout_height="60dp"  android:layout_marginTop="30dp"  app:cardElevation="50dp"/>  </LinearLayout> Copy the code

In the above XML layout file, the two effects of the system are set in sections 2 and 3 respectively:

android:background=”? Android: attr/selectableItemBackground “water ripple border

android:background=”? Android: attr/selectableItemBackgroundBorderless “water ripple beyond boundaries

Note: CardView Settingsandroid:foregroundProperty, you need to setandroid:clickable="true"To have Ripple effect.

2. Customize Ripple effects

System with 2 in the default effect in the actual development basically can meet the needs, but often there will be strange UI designers, Design from think very cool effect (I think Google Material Design series control effect is the most beautiful). At this point you have to customize the Ripple effect to the designer’s needs.

1. Create a new item_touch_bg. XML file under the drawable file and select the Ripple tag

      
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/md_grey_500">
    <item android:id="@android:id/mask"
 android:drawable="@android:color/white" />
</ripple> Copy the code

2. Set Android :foreground=”@drawable/item_touch_bg” property in CardView.

<androidx.cardview.widget.CardView
    android:clickable="true"
    android:foreground="@drawable/item_touch_bg"
    app:cardCornerRadius="10dp"
    app:cardBackgroundColor="@color/md_cyan_500"
 android:layout_width="200dp"  android:layout_height="60dp"  android:layout_marginTop="30dp"  app:cardElevation="10dp" /> Copy the code

Note: The water ripple effect is also android 5.0 version above the effect, 5.0 needs to be adapted to friends can be set layout and layouting-V21 respectively.

Source code download contains Material Design series control set, regularly updated, please look forward to!

Six, summarized

This article has shown you how to use the CardView and RecyclerView widgets introduced in Android Lollipop. You also saw examples of how to use these widgets in the Material Design application. CardView is often used in APP development, so if you haven’t already used it in your project, try it out.

Thank you so much for reading this article! Your praise and comments are the biggest motivation for my creation!

My WeChat: Jaynm888

Programmer interview networking group: 764040616

Android programmers are cordially invited to join the wechat communication group. The public account can reply to the wechat group or add my wechat invitation to join the group.