Android Implementing and Styling CardView

screen-shot-2016-09-20-at-11-38-01-pm
We are going to learn CardView,

Customizing CardView

using Image and text to make it beautiful in the layout.

Your xml layout Should Look Like this:

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.v7.widget.CardView style="@style/CardViewStyle" android:layout_width="match_parent" android:layout_margin="10dp" android:layout_height="wrap_content" android:clickable="true" app:contentPadding="-2dp">

    <!--app:cardUseCompatPadding="true"-->
    <!--app:cardPreventCornerOverlap="true"-->
    <!--android:background="@drawable/card_bg"-->

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

        <RelativeLayout android:id="@+id/header_rl" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_marginTop="16dp">

            <ImageView android:id="@+id/user_iv" android:layout_width="50dp" android:src="@mipmap/ic_launcher" android:layout_height="50dp" android:layout_centerVertical="true" android:layout_marginRight="10dp" android:scaleType="centerCrop" />

            <!--android:background="@drawable/shape_google_avatar"-->

            <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toRightOf="@id/user_iv" android:orientation="vertical">

                <TextView android:text="infinite Loops" android:id="@+id/display_name_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15sp" android:textStyle="bold" />


                <TextView android:id="@+id/timestamp_tv" android:text="www.infiniteloops.info" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/gray15" android:textSize="12sp" />
            </LinearLayout>


        </RelativeLayout>

        <ImageView android:id="@+id/post_iv" android:src="@drawable/girl" android:layout_width="match_parent" android:layout_height="250dp" android:scaleType="centerCrop" />
        <RelativeLayout android:layout_width="match_parent" android:layout_height="62dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:gravity="center_vertical">

            <TextView android:id="@+id/plus_one_tv" android:layout_width="wrap_content" android:layout_height="30dp" android:background="@drawable/shape_rounded_rectangle" android:gravity="center" android:paddingLeft="12dp" android:text="12" android:paddingRight="12dp" android:textColor="@color/gray15" android:textSize="14sp" android:textStyle="bold" />

            <ImageView android:layout_width="wrap_content" android:layout_height="30dp" android:id="@+id/share" android:layout_marginLeft="5dp" android:layout_toRightOf="@id/plus_one_tv" android:background="@drawable/shape_rounded_rectangle" android:contentDescription="" android:gravity="center" android:padding="4dp" android:src="@android:drawable/ic_menu_share" />

            <TextView android:id="@+id/view_count" android:layout_width="wrap_content" android:layout_height="30dp" android:layout_marginLeft="5dp" android:layout_toRightOf="@id/share" android:background="@drawable/shape_rounded_rectangle" android:drawableLeft="@android:drawable/ic_menu_view" android:drawablePadding="-2dp" android:gravity="center" android:paddingLeft="4dp" android:text="1" android:paddingRight="12dp" android:textColor="@color/gray15" android:textSize="12sp" android:textStyle="bold" />


        </RelativeLayout>

        <RelativeLayout android:layout_width="match_parent" android:layout_height="62dp" android:background="@drawable/shape_whitesmoke_semi_rounded_rectangle" android:gravity="center_vertical" android:paddingLeft="20dp" android:paddingRight="20dp">

            <TextView android:id="@+id/comment_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" android:maxLines="2" android:text="Hello World android" android:textSize="15sp" />

        </RelativeLayout>

    </LinearLayout>

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




 

From here we will customize the same by using some styling onto the drawable:

card_default.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent" />

</shape>

<!--<corners android:radius="8dp" />-->

card_highlighted.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/transparent_white_twenty" />
    <corners android:radius="4dp" />
</shape>

<!--<corners android:radius="8dp" />-->


selector_bg_card.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="150" android:exitFadeDuration="150">
    
    <item android:state_pressed="true" android:drawable="@drawable/card_highlighted" /> <!-- pressed -->
    <item android:state_focused="true" android:drawable="@drawable/card_highlighted" /> <!-- focused -->
    <item android:state_hovered="true" android:drawable="@drawable/card_highlighted" /> <!-- hovered -->
    <item android:drawable="@drawable/card_default" /> <!-- default -->
</selector>

shape_rounded_rectangle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <stroke android:width="1dp" android:color="@color/gray1" />
    
    <solid android:color="@android:color/transparent"/>

    <corners android:radius="2dp" />

</shape>

shape_whitesmoke_semi_rounded_rectangle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@color/whitesmoke" />

    <corners android:bottomLeftRadius="4dp" android:bottomRightRadius="4dp"/>

</shape>

In your styles.xml

</pre>
<pre>
<style name="CardViewStyle" parent="android:Widget.TextView">
    <item name="android:foreground">@drawable/selector_bg_card</item>
    <item name="cardCornerRadius">4dp</item>
    <item name="cardElevation">2dp</item>
</style></pre>
<pre>

Your colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#607D8B</color>
    <color name="colorPrimaryDark">#37474F</color>
    <color name="colorAccent">#E91E63</color>

    <color name="bulgarian_blue">#4771BC</color>
    <color name="gray1">#f1f2f1</color>
    <color name="gray15">#A4A4A4</color>
    <color name="transparent_white_twenty">#33ffffff</color>
    <color name="whitesmoke">#f5f5f5</color>

</resources>

For full code fork me on GITHUB I love it