How to make Cardview According to material design in android?

android material-design android-cardview

24,413

Solution 1

Here's the link to GitHub project with CardView layouts implemented in compliance with Material Design guidelines.

Solution 2

use this.

<android.support.v7.widget.CardView
    android:id="@+id/cardView"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="2dp"
    card_view:cardBackgroundColor="#fff"
    card_view:cardCornerRadius="5dp"
    card_view:cardElevation="4dp"

    card_view:cardUseCompatPadding="true"
    xmlns:tools="http://schemas.android.com/tools">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="@color/white"

        >

        <ImageView
            android:id="@+id/appImage"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_marginLeft="16dp"
            android:background="@drawable/img_android"
            android:scaleType="centerCrop"
            tools:ignore="ContentDescription"/>

        <TextView
            android:id="@+id/headingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/appImage"
            android:paddingLeft="16sp"
            android:paddingRight="16dp"
            android:text="Title"
            android:textColor="#000"
            android:textSize="18sp"
            tools:ignore="RtlHardcoded"/>

        <TextView
            android:id="@+id/subHeaderText"
            style="@style/Base.TextAppearance.AppCompat.Subhead"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/headingText"
            android:layout_toRightOf="@+id/appImage"
            android:paddingLeft="16dp"
            android:text="SubTiltle"
            android:paddingRight="16dp"
            android:textColor="#000"
            android:textSize="15sp"/>

        <TextView
            android:id="@+id/subHeadingText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/subHeaderText"
            android:layout_toRightOf="@+id/appImage"
            android:gravity="left"
            android:lines="5"
            android:maxLines="5"
            android:paddingBottom="16dp"
            android:paddingLeft="16dp"
            android:paddingTop="16dp"
            android:text="stories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detailstories_detail"
            android:textColor="#737078"
            android:textSize="14sp"/>

        <Button
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:id="@+id/getDealBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/subHeadingText"
            android:textColor="#FFFFFF"
            android:background="@color/clrDarkGreen"
            android:textSize="14sp"
            android:textStyle="bold"
            android:text="Button"/>

    </RelativeLayout>
    </android.support.v7.widget.CardView>ort.v7.widget.CardView>

Solution 3

// Add style as per your requirement

<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/appImage"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_marginLeft="16dp"
            android:scaleType="centerCrop"
            tools:ignore="ContentDescription"
            android:layout_margin="10dp"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
            android:id="@+id/headingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/appImage"
            android:paddingLeft="16sp"
            android:paddingRight="16dp" 
            android:text="Title"
            android:textColor="#000"
            android:textSize="18sp"
            tools:ignore="RtlHardcoded"/>

            <TextView
                android:id="@+id/subHeaderText"
                style="@style/Base.TextAppearance.AppCompat.Subhead"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/headingText"
                android:layout_toRightOf="@+id/appImage"
                android:paddingLeft="16dp"
                android:text="SubTiltle"
                android:paddingRight="16dp"
                android:textColor="#000"
                android:textSize="15sp"
                android:layout_marginTop="20dp"/>


            <TextView
                android:id="@+id/subHeadingText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:lines="5"
            android:maxLines="5"
            android:paddingBottom="16dp"
            android:paddingLeft="16dp"
            android:paddingTop="16dp"
            android:textColor="#737078"
            android:textSize="14sp"
            android:layout_marginTop="20dp"/>

        </LinearLayout>

    </LinearLayout>

    <Button
        android:id="@+id/getDealBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="2dp"
        android:textAllCaps="true"
        android:textColor="#FFFF"
        android:textSize="14sp"
        android:textStyle="bold"/>

</LinearLayout>

24,413

Author by

Rajesh

Updated on July 09, 2022

Comments

Rajesh almost 2 years

I saw material design guidelines regarding but it little confusion ,while I design my card having Image on left and some text on right of Image.But I did n't satisfy whether it is according to guide line or not ...pls check and tell. and also I want my dummy text paragraph justify.

here is my code :-

<android.support.v7.widget.CardView
style="@style/MyCardViewStyle"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >

    <ImageView
        android:id="@+id/appImage"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:layout_marginLeft="16dp"
        android:background="@drawable/video"
        android:scaleType="centerCrop"
        tools:ignore="ContentDescription"/>

    <TextView
        android:id="@+id/headingText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/appImage"
        android:paddingLeft="16sp"
        android:paddingRight="16dp"
        android:text="Title"
        android:textColor="#000"
        android:textSize="18sp"
        tools:ignore="RtlHardcoded"/>

    <TextView
        android:id="@+id/subHeaderText"
        style="@style/Base.TextAppearance.AppCompat.Subhead"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/headingText"
        android:layout_toRightOf="@+id/appImage"
        android:paddingLeft="16dp"
        android:text="SubTiltle"
        android:paddingRight="16dp"
        android:textColor="#000"
        android:textSize="15sp"/>

    <TextView
        android:id="@+id/subHeadingText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/subHeaderText"
        android:layout_toRightOf="@+id/appImage"
        android:gravity="left"
        android:lines="5"
        android:maxLines="5"
        android:paddingBottom="16dp"
        android:paddingLeft="16dp"
        android:paddingTop="16dp"
        android:text="@string/stories_detail"
        android:textColor="#737078"
        android:textSize="14sp"/>

    <Button
        android:id="@+id/getDealBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/subHeadingText"
        android:background="@drawable/get_deal_button"
        android:elevation="2dp"
        android:textAllCaps="true"
        android:textColor="#FFFF"
        android:textSize="14sp"
        android:textStyle="bold"/>

</RelativeLayout>

and here is my cardview looks like:-