The material design has simplified creating CardView in Android. A new view was introduced through the support v7 library as a CardView. It can be used in many ways to display cards in android.
e.g, it can be used like an independent view to show floating search bar on top of the screen also it can be used to display cards in a list.
This widget can be used to display a card sort of a layout in android. Mostly it displays views on top of each other, with shadows. Simply we can say, Android CardView is such a view which has all material design properties, most importantly showing shadows according to the elevation.
CardView extends the FrameLayout class and lets you show information inside cards that have a consistent look across the platform.
CardView Appearance:
|
1 2 3 4 5 6 7 8 9 |
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xml:cardView="http://schemas.android.com/apk/res-auto" ... > ... .... </android.support.v7.widget.CardView> |
Some of the features of CardView:
1) Overlapping corners:
It has rounded corners. It clips the corners of content automatically. API 21 and above as the clipping is automatically done.Use the card_view:cardCornerRadius attribute.
2) CardView Content Padding:
When a card is displayed on the screen, usually we add multiple views on it. Android CardView supports this property to set the padding for CardView content, which can be set once and for all. we don’t need to set margin or padding for each view inside the CardView individually.
3) CardView Elevation:
This property defines the elevation of CardView. This is the core concepts of Android material design. According to the elevation defined, Android system dynamically shows the shadow of any material on the screen.
CardView uses elevation property on L for shadows and falls back to a custom shadow implementation on older platforms.
4) CardView Background Color:
To set the background color of a card, use the cardView:cardBackgroundColor attribute.
Add Dependencies:
|
1 2 3 |
dependencies { compile 'com.android.support:cardview-v7:21.0.+' } |
Have a look on complete code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_gravity="center" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="5dp" card_view:cardCornerRadius="2dp" card_view:contentPadding="10dp" card_view:cardElevation="10dp"> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/enter_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textStyle="bold" android:layout_alignParentTop="true"/> <TextView android:id="@+id/enter_email" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:layout_below="@+id/textView"/> </RelativeLayout> </android.support.v7.widget.CardView> </LinearLayout> |
Be the first to comment.