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
| XML attributes | methods | introduce |
|---|---|---|
| app:cardBackgroundColor | setCardBackgroundColor(int color) | Set the background color |
| app:cardCornerRadius | setRadius(float radius) | Set the rounded corner size |
| app:cardElevation | setCardElevation(float elevation) | Set the z-axis shadow |
| app:cardMaxElevation | setMaxCardElevation(float maxElevation) | Set the maximum height of the Z-axis |
| app:cardUseCompatPadding | setUseCompatPadding(boolean useCompatPadding) | Whether to use CompatPadding defaults to false |
| app:cardPreventCornerOverlap | setPreventCornerOverlap(boolean preventCornerOverlap) | Whether to add padding to content to prevent it from overlapping with rounded corners. Default is true |
| app:contentPadding | setContentPadding(int left, int top, int right, int bottom) | Set the padding inside the content |
| app:contentPaddingLeft | setContentPadding(int left, int top, int right, int bottom) | Set the left margin padding of the content |
| app:contentPaddingTop | setContentPadding(int left, int top, int right, int bottom) | Set the padding for the content |
| app:contentPaddingRight | setContentPadding(int left, int top, int right, int bottom) | Set the right margin padding of the content |
| app:contentPaddingBottom | setContentPadding(int left, int top, int right, int bottom) | Set the padding of the content |
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 codeBy 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 codeCardView 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 codeAdd 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 codeIn 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 code2. 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 codeNote: 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: 764040616Android 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.
