Material Designer's low version compatible implementations (14)--cardview

Today, it's a new control in 5.0.--cardview (Card view). In fact, we have already seen this thing, whether it is Weibo or the client, it has appeared. Usually we do this by customizing a background image and then by setting the background style for layout to implement the card view. Although 5.0 and third-party libraries now have this view, I still recommend customizing the view, why? Can be seen in the compiler visual effect, and can set a good system. The most important thing is that it's not difficult to do it yourself, but the introduction of third-party libraries increases the volume of your application. In short, this article mainly explains how to use the Open Source Library and supportV7 in the CardView.

First, through the open Source Library to introduce CardView

When I write this article, this open source library does not have any custom property settings for CardView, it can also set a background color and size. Will there be more attributes to join in the future? I don't feel very likely. The idea of this open source library is to use Java and drawable to create a view, this drawable is also used in the picture to do, of course, no code to write so flexible, if you want to add a lot of properties, there is only one way: Let the author of the project to make drastic changes, The idea of changing the custom view.

1.1 Adding LIB Support

First, download lib, add support, and write a namespace.

Https://github.com/navasmdc/MaterialDesignLibrary

After adding the Lib support, we can use this control, before we put the layout file or write the namespace.

xmlns:app= "Http://schemas.android.com/apk/res-auto"

< Com.gc.materialdesign.views.Card                 Android:layout_width = "Wrap_content"                 android:layout_height= "Wrap_content"                android:layout_gravity= "Center_ Horizontal "/>

If the background is not set, then in the editor can not see the general effect, so it is recommended to set a background color, more intuitive. The picture on the right is the actual effect

1.2 Setting the size and background color in the layout file

android:layout_width= "100DP" because CardView inherits from Relativelayout, so I can set the control wide.
android:layout_height= "100DP"

< Com.gc.materialdesign.views.Card                 Android:layout_width = "100DP"                 android:layout_height= "100DP"                android:layout_gravity= "Center_ Horizontal "                android:background=" #ff0000 "/>

android:background= "@color/blue" set background color, default is white

<TextViewAndroid:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:text= "background = #ff0000" />            <Com.gc.materialdesign.views.CardAndroid:layout_width= "100DP"Android:layout_height= "100DP"android:layout_gravity= "Center_horizontal"Android:background= "#ff0000" />            <TextViewAndroid:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:text= "background [email Protected]/blue" />            <Com.gc.materialdesign.views.CardAndroid:layout_width= "100DP"Android:layout_height= "100DP"android:layout_gravity= "Center_horizontal"Android:background= "@color/blue" />

1.3 Setting the background color by code

Because CardView inherits from Relativelayout, the parent class's set inner bounds and other properties are available ~

 Packagecom.example.hhh;ImportAndroid.os.Bundle;Importandroid.support.v7.app.ActionBarActivity;ImportCom.gc.materialdesign.views.Card; Public classCardtestextendsactionbaractivity {@Overrideprotected voidonCreate (Bundle savedinstancestate) {Super. OnCreate (savedinstancestate);                Setcontentview (R.layout.card); Card card01=(Card) Findviewbyid (R.ID.CARD01); Card01.setbackgroundcolor (0xffff0000); Card card02=(Card) Findviewbyid (R.ID.CARD02);    Card02.setbackgroundcolor (Getresources (). GetColor (R.color.orange)); }}

Second, with Google's SupportV7 package in the CardView

This cardview is provided by Google, can be customized more things

2.1 Attribute Explanation:

<Resources>    <declare-styleablename= "CardView">        <!--Background color for CardView. -        <!--Background Color -        <attrname= "Cardbackgroundcolor"format= "Color" />        <!--Corner radius for CardView. -        <!--Edge Radian Number -        <attrname= "Cardcornerradius"format= "Dimension" />        <!--elevation for CardView. -        <!--Height -        <attrname= "Cardelevation"format= "Dimension" />        <!--Maximum elevation for CardView. -        <!--Maximum Height -        <attrname= "Cardmaxelevation"format= "Dimension" />        <!--ADD padding in API v21+ as well to has the same measurements with previous versions. -        <!--set padding, v21+ version and previous version still have the same calculation method -        <attrname= "Cardusecompatpadding"format= "Boolean" />        <!--Add padding to CardView in V20 and before to prevent intersections between the Card content and rounded corners.  -        <!--add padding to V20 and previous versions to prevent overlapping of card contents and corners -        <attrname= "Cardpreventcorneroverlap"format= "Boolean" />        <!--here is the distance from the inside of the card boundary -        <!--Inner padding between the edges of the Card and children of the CardView. -        <attrname= "Contentpadding"format= "Dimension" />        <!--Inner padding between the left edge of the the Card and children of the CardView. -        <attrname= "Contentpaddingleft"format= "Dimension" />        <!--Inner padding between the right edge of the the Card and children of the CardView. -        <attrname= "Contentpaddingright"format= "Dimension" />        <!--Inner padding between the top edge of the The Card and children of the CardView. -        <attrname= "Contentpaddingtop"format= "Dimension" />        <!--Inner padding between the bottom edge of the The Card and children of the CardView. -        <attrname= "Contentpaddingbottom"format= "Dimension" />    </declare-styleable></Resources>

2.2 Small Examples:

    <Android.support.v7.widget.CardViewAndroid:id= "@+id/card_view"Android:layout_width= "200DP"Android:layout_height= "200DP"android:layout_gravity= "Center"App:cardbackgroundcolor= "#ff0000"App:cardcornerradius= "10DP"app:cardelevation= "1DP"app:cardmaxelevation= "10DP"App:cardpreventcorneroverlap= "true"app:cardusecompatpadding= "true" >    </Android.support.v7.widget.CardView>

Please refer to my previous article for specific use, in fact, it is quite simple to use.

Android5.0 Introduction and use of new control CardView:http://www.cnblogs.com/tianzhijiexian/p/4067308.html

Material Designer's low version compatible implementations (14)--cardview