Use of the Material design CardView

This article describes the use of CardView this control, CardView inherit to Framelayout class, is a class under the SUPPORT-V7 package, use must introduce the CardView dependency package, can be found in the SDK folder download ...

With CardView you can achieve a card-style layout that looks good, and the card can also contain rounded corners, shadows, and backgrounds. CardView is a viewgroup layout that contains other view for an elegant interface effect.

First, let's look at the effect of the interface:

is not very beautiful ah! In fact, it is very simple to use, it is used as a normal layout. As follows:

<android.support.v7.widget.cardview        android:id= "@+id/card_view"        android:layout_width= "Match_parent"        android:layout_height= "wrap_content"        android:layout_margin= "10DP"        app:cardbackgroundcolor= "# FFFFFF "        app:cardcornerradius=" 10DP "        app:cardelevation=" 8DP ">        <textview            android:id=" @+id/ Text "            android:layout_width=" wrap_content "            android:layout_height=" wrap_content "            android:layout_ gravity= "center"            android:layout_margin= "40DP"            android:text= "CardView"            android:textsize= "20SP"/ >    </android.support.v7.widget.CardView>

This corresponding effect is the first effect on the image just now.

The other is the same, not much to say, here to see the CardView effect is simply added a textview as a demonstration.

The entire layout activity_main.xml:

<pre name= "code" class= "HTML" ><linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android" xmlns:app= "Http://schemas.android.com/apk/res-auto" xmlns:tools= "Http://schemas.android.com/tools" Android: Layout_width= "Match_parent" android:layout_height= "match_parent" android:orientation= "vertical" android:paddingBo ttom= "@dimen/activity_vertical_margin" android:paddingleft= "@dimen/activity_horizontal_margin" Android: paddingright= "@dimen/activity_horizontal_margin" android:paddingtop= "@dimen/activity_vertical_margin" tools: Context= ". Mainactivity "> <android.support.v7.widget.cardview android:id=" @+id/card_view "android:layout_width = "Match_parent" android:layout_height= "wrap_content" android:layout_margin= "10DP" App:cardbackgroundc Olor= "#ffffff" app:cardcornerradius= "10DP" app:cardelevation= "8DP" > <textview androi D:id= "@+id/text" Android:layout_width= "WRap_content "android:layout_height=" wrap_content "android:layout_gravity=" Center "Android : layout_margin= "40DP" android:text= "CardView" android:textsize= "20sp"/> </android.support. v7.widget.cardview> <android.support.v7.widget.cardview android:id= "@+id/card_view2" android:layout _width= "Match_parent" android:layout_height= "wrap_content" android:layout_margin= "10DP" app:cardBackg            Roundcolor= "#303069" app:cardcornerradius= "10DP" app:cardelevation= "8DP" > <textview Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_gravity= "cen    ter "android:layout_margin=" 40DP "android:text=" CardView "android:textsize=" 20sp "/> </android.support.v7.widget.CardView> <android.support.v7.widget.cardview android:id= "@+id/card_view3 "Android:layout_Width= "Match_parent" android:layout_height= "wrap_content" android:layout_margin= "10DP" app:cardbackgr Oundcolor= "#ffffff" app:cardcornerradius= "8DP" app:cardelevation= "5DP" > <imageview A            Ndroid:id= "@+id/imageview" android:layout_width= "match_parent" android:layout_height= "Wrap_content" Android:scaletype= "Fitxy" android:src= "@mipmap/bg"/> </android.support.v7.widget.cardview& Gt;</linearlayout>

Setting CardView's Click events is the same as other controls:

CardView Mcardview = (cardview) Findviewbyid (R.id.card_view);        Mcardview.setonclicklistener (New View.onclicklistener () {            @Override public            void OnClick (View v) {                Toast.maketext (Mainactivity.this, "clicked CardView", Toast.length_long). Show ();            }        );

Here are some of the more important common properties in CardView:

• app:cardElevationThe height of the shadow
• app:cardMaxElevationMaximum shadow Height
• app:cardBackgroundColorThe background color of the card
• app:cardCornerRadiusThe size of the rounded corners of the card
• app:contentPaddingThe interval of the card content in the margin
  • app:contentPaddingBottom
  • app:contentPaddingTop
  • app:contentPaddingLeft
  • app:contentPaddingRight
  • app:contentPaddingStart
  • app:contentPaddingEnd
• app:cardUseCompatPaddingSet padding, v21+ version and previous version still have the same calculation method
• app:cardPreventConrerOverlapAdd padding in V20 and previous versions to prevent overlapping of content and corners

the meaning of the first few properties is well understood, not to mention.

contentPaddingLet's take a look at this and you'll understand:

Set up:

app : contentpadding= "20DP"

Effect:

cardUseCompatPadding

Set up:

app : cardusecompatpadding= "true"

Effect:

As we can see from the layout preview, setting this post-layout narrows it down a bit, that is, a little padding.

OK, CardView is so simple!!!

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Use of the Material design CardView