Use of Material Design CardView, materialcardview

Use of Material Design CardView, materialcardview

This article introduces the use of the CardView control, CardView inherits to the FrameLayout class, is a class under the support-v7 package, you must introduce the cardview dependency package, you can find in the downloaded sdk folder...

CardView can be used to achieve the card layout effect, which is very nice. Cards can also contain rounded corners, shadows, and backgrounds. CardView is a ViewGroup that contains other views for an elegant UI.

First, let's take a look at the interface effect:

Pretty! In fact, it is easy to use, just use it 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>

The corresponding effect is the first effect on the image.

This is also true for others. Here we simply add a TextView for demonstration to see the CardView effect.

Activity_main.xml:

<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:paddingBottom="@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: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>    <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:cardBackgroundColor="#303069"        app:cardCornerRadius="10dp"        app:cardElevation="8dp">        <TextView            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_view3"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="10dp"        app:cardBackgroundColor="#ffffff"        app:cardCornerRadius="8dp"        app:cardElevation="5dp">        <ImageView            android: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></LinearLayout>

Set the CardView click event to be 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, "click CardView", Toast. LENGTH_LONG ). show ();}});

The following describes important common attributes in CardView:

• app:cardElevationShadow height
• app:cardMaxElevationMaximum shadow height
• app:cardBackgroundColorBackground Color of the card
• app:cardCornerRadiusCard rounded corner size
• app:contentPaddingPadding interval of card content
  • app:contentPaddingBottom
  • app:contentPaddingTop
  • app:contentPaddingLeft
  • app:contentPaddingRight
  • app:contentPaddingStart
  • app:contentPaddingEnd
• app:cardUseCompatPaddingSet the padding. The V21 + version is still computed in the same way as the previous version.
• app:cardPreventConrerOverlapAdd padding in V20 and earlier versions to prevent overlap between content and corners

The meaning of the previous attributes is well understood.

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

Settings:

app:contentPadding="20dp"

Effect:

cardUseCompatPadding 

Settings:

app:cardUseCompatPadding="true"

Effect:

We can see from the layout preview that after setting this layout, the layout is reduced to a little bit, that is, a little fill.

Okay, CardView is that simple !!!

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.