So what I did to make this work was to use the card_background.9.png file with nine patches in Google Music:
Copy this file to card_background.9.png and put in your res/drawable-xhdpi , you can also do the same for:
in res/drawable-hdpi and:
in res/drawable-mdpi .
Next are the presentation of the contents and layouts of the grid elements. In order for everything to be correct, you must be careful about how and where you perform the filling and all the important clipToPadding properties. Firstly, this is a grid layout, it acts as the main main view in action, in the board_grid_layout.xml file:
<?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 BoardGridView in my styles.xml , I measure the constants to support tables / landscaping, but I hardcoded them 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 a grid element layout appears with the map background. Here is my board_grid_item.xml layout 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 bind this together, you need a cursor loader and an adapter, but that is beyond the scope of the question. This layout should allow you to make a map look like Google Music. Here's a screenshot of the above image with nine patches and xml applied on my Samsung Galaxy S3 in portrait mode: