Google Now dropshadow on view

Question

I want this awesome dropshadow like the Google Now Cards. How do I create it? I've been googling around a lot but haven't found any answer to my question. I have tried this answer, but I only get this result:

And yes, my ninepatch is ending with .9.png.

Answer 1

So what I did to make this work was to use the card_background.9.png nine-patch file from Google Music:

Copy this file to card_background.9.png and place in your res/drawable-xhdpi folder, you can also do the same for:

in res/drawable-hdpi and:

in res/drawable-mdpi.

Next come the content view, and grid item layouts. To get it right you have to be careful about how and where you do the padding and the all important clipToPadding property. First there's the grid layout, this acts as my main content view in the activity, in file board_grid_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/board_grid_layout"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="0dp">    
    <GridView
            android:id="@+id/board_grid_view"
            style="@style/BoardGridView"
            />
</RelativeLayout>

This is the style I used for the BoardGridView in my styles.xml, I dimensionalise the constants for supporting tablets/landscaping, but I've hardcoded them here for ease of use:

<style name="BoardGridView" parent="AppTheme">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:padding">8dp</item>
    <item name="android:clipToPadding">false</item>
    <item name="android:gravity">top|left</item>
    <item name="android:smoothScrollbar">true</item>
    <item name="android:cacheColorHint">#00000000</item>
    <item name="android:fastScrollEnabled">true</item>
    <item name="android:horizontalSpacing">8dp</item>
    <item name="android:verticalSpacing">8dp</item>
    <item name="android:numColumns">3</item>
    <item name="android:stretchMode">columnWidth</item>
    <item name="android:scrollbarStyle">outsideOverlay</item>
</style>

Then there's the grid item layout with the card background. Here's my layout file board_grid_item.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/grid_item"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              android:background="@drawable/card_background"
        >

        <RelativeLayout
                android:id="@+id/grid_item_thread_image_wrap"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                >

            <ImageView
                    android:id="@+id/grid_item_thread_thumb"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:contentDescription="Thread thumbnail"
                    />
            <ImageView
                    android:id="@+id/grid_item_country_flag"
                    android:layout_width="18dp"
                    android:layout_height="11dp"
                    android:scaleType="fitXY"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentRight="true"
                    android:contentDescription="Thread country flag"
                    />
        </RelativeLayout>

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

            <TextView
                    android:id="@+id/grid_item_thread_subject"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingLeft="8dp"
                    android:paddingRight="8dp"
                    android:textColor="#444"
                    android:textSize="14sp"
                    android:maxLines="2"
                    />

            <TextView
                    android:id="@+id/grid_item_thread_info"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingLeft="8dp"
                    android:paddingRight="8dp"
                    android:textColor="#aaa"
                    android:textSize="12sp"
                    android:maxLines="3"
                    />

        </LinearLayout>

</LinearLayout>

Now to hook this together you need a cursor loader and adapter, but that's outside the scope of the question. This layout should let you make a card-view like Google Music. Here's the resulting screenshot of the above nine-patch image and xml applied on my Samsung Galaxy S3 in portrait mode: