How to make Cardview According to material design in android?

Question

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

Answer 1

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

Answer 2

Card View The card container is the only required element in a card. All other elements shown here are optional.

Card layouts can vary to support the types of content they contain. The following elements are commonly found among that variety.

1. Container Card containers hold all card elements, and their size is determined by the space those elements occupy. Card elevation is expressed by the container.

2. Thumbnail [optional] Cards can include thumbnails to display an avatar, logo, or icon.

3. Header text [optional] Header text can include things like the name of a photo album or article.

4. Subhead [optional] Subhead text can include text elements such as an article byline or a tagged location.

5. Media [optional] Cards can include a variety of media, including photos, and graphics, such as weather icons.

6. Supporting text [optional] Supporting text includes text like an article summary or a restaurant description.

7. Buttons [optional] Cards can include buttons for actions.

8. Icons [optional] Cards can include icons for actions.

Code:

<com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:clickable="true"
            android:focusable="true"
            android:minHeight="148dp">

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

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="16dp"
                    android:paddingBottom="8dp">

                    <androidx.appcompat.widget.AppCompatImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_marginEnd="8dp"
                        android:contentDescription="Card Logo"
                        app:srcCompat="@drawable/ic_components_24px"/>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1.0"
                        android:layout_marginStart="8dp"
                        android:orientation="vertical">
                        <TextView
                            style="?attr/textAppearanceHeadline6"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Title goes here"/>

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="8dp"
                            android:ellipsize="end"
                            android:maxLines="1"
                            android:text="Secondary message card layouts can vary to support the types of content they contain. The following elements are commonly found among that variety."/>
                    </LinearLayout>
                </LinearLayout>

                <androidx.appcompat.widget.AppCompatImageView
                    android:layout_width="match_parent"
                    android:layout_height="194dp"
                    android:background="@android:color/transparent"
                    android:contentDescription="Card Image"
                    app:backgroundTint="@color/material_on_surface_emphasis_medium"
                    app:backgroundTintMode="add"

                    android:scaleType="centerCrop"
                    app:srcCompat="@drawable/sample2"
                   />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="16dp"
                    android:maxLines="2"
                    android:text="Lorem ipsum dolor sit amet, nec no nominavi scaevola. Per et sint sapientem, nobis perpetua salutandi mei te. Quo tamquam probatus reprehendunt in. Eos esse purto eruditi ea. Enim tation persius ut sea, eos ad consul populo.
Ne eum solet altera. Cibo eligendi et est, electram theophrastus te vel eu."/>


                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="8dp"
                    android:orientation="horizontal">

                    <com.google.android.material.button.MaterialButton
                        style="?attr/borderlessButtonStyle"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="8dp"
                        android:text="Action 1"/>

                    <com.google.android.material.button.MaterialButton
                        style="?attr/borderlessButtonStyle"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="8dp"
                        android:text="Action 2"/>

                </LinearLayout>

            </LinearLayout>

        </com.google.android.material.card.MaterialCardView>

Read more: https://material.io/develop/android/components/cards

Answer 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>

Answer 4

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>