How to implement Google Like Card View

Question

I wonder how to implement Card View layout like in the google tutorial, in tutorial there is only simple card view, but how to get such result ? https://developer.android.com/design/material/images/card_travel.png

I can implement this, but I need to do this efficiently in order not increase view hierarchy making rendering long.

Please give any example how can I achieve such view.

Eugene H · Answer 1 · 2015-05-24T16:18:05.603

enter image description here

Just add this in your dependency:

    compile 'com.android.support:cardview-v7:21.+'

Example using it in a layout:

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    card_view:cardCornerRadius="1dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:context="com.eugene.fithealth.TestingForSO">


        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:orientation="vertical"
            android:scaleType="centerCrop"
            android:src="@drawable/drawer_image"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_above="@+id/description"
            android:background="#50000000"
            android:gravity="center_vertical"
            android:paddingLeft="16dp"
            android:text="Hello World!"
            android:textColor="#fff"
            android:textSize="22dp"/>


        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image"
            android:layout_marginBottom="8dp"
            android:paddingLeft="16dp"
            android:paddingTop="16dp"
            android:text="Random Text Blah Blah Blah"
            android:textSize="16dp"/>

        <Button
            android:id="@+id/btnOne"
            style="?android:buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/description"
            android:layout_marginBottom="4dp"
            android:layout_marginLeft="4dp"
            android:text="Button One"
            android:textColor="#000"/>

        <Button
            android:id="@+id/btnTwo"
            style="?android:buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/description"
            android:layout_toRightOf="@id/btnOne"
            android:text="Button Two"
            android:textColor="#03A9F4"/>

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

@dyoordec just updated my answer. If it is what you are looking for and solves your question dont forget to mark it as correct. — Eugene H, May 24 '15 at 05:50
Part of your answer concerning the `CardView` is as correct as possible, but your example of layout shows not much good practise. Using 4x `RelativeLayout` in this case is neither optimal nor an original purpose of `RelativeLayout`. — paulina_glab, May 24 '15 at 06:52
@onka I made that half a asleep last night and was not my original answer. My original answer was just implementing the cardview. — Eugene H, May 24 '15 at 10:40
I see, but, if I understand, layout is the point of what OP asked (in first question). I don't want to criticise, I just want to suggest an improvement :) — paulina_glab, May 24 '15 at 10:56
@onka you are 100% correct. I'm out fishing now. I will update it when I get home. Cheers! — Eugene H, May 24 '15 at 12:51

score 1 · Answer 2 · answered May 24 '15 at 05:37

1

Try this cardlib library. I've been using it and it's great!

answered May 24 '15 at 05:37

wwang

605
1
5
13

How to implement Google Like Card View

2 Answers2