Use of the Material design CardView

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.