Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>So what I did to make this work was to use the <code>card_background.9.png</code> nine-patch file from Google Music:</p> <p><img src="https://i.imgur.com/tT0dOOn.png" alt="card_background.9.png"></p> <p>Copy this file to <code>card_background.9.png</code> and place in your <code>res/drawable-xhdpi</code> folder, you can also do the same for:</p> <p><img src="https://i.imgur.com/wn4rLIF.png" alt="card_background.9.png"></p> <p>in <code>res/drawable-hdpi</code> and:</p> <p><img src="https://i.imgur.com/nBkz0HY.png" alt="card_background.9.png"></p> <p>in <code>res/drawable-mdpi</code>.</p> <p>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 <code>clipToPadding</code> property. First there's the grid layout, this acts as my main content view in the activity, in file <code>board_grid_layout.xml</code>:</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;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"&gt; &lt;GridView android:id="@+id/board_grid_view" style="@style/BoardGridView" /&gt; &lt;/RelativeLayout&gt; </code></pre> <p>This is the style I used for the BoardGridView in my <code>styles.xml</code>, I dimensionalise the constants for supporting tablets/landscaping, but I've hardcoded them here for ease of use:</p> <pre><code>&lt;style name="BoardGridView" parent="AppTheme"&gt; &lt;item name="android:layout_width"&gt;match_parent&lt;/item&gt; &lt;item name="android:layout_height"&gt;wrap_content&lt;/item&gt; &lt;item name="android:padding"&gt;8dp&lt;/item&gt; &lt;item name="android:clipToPadding"&gt;false&lt;/item&gt; &lt;item name="android:gravity"&gt;top|left&lt;/item&gt; &lt;item name="android:smoothScrollbar"&gt;true&lt;/item&gt; &lt;item name="android:cacheColorHint"&gt;#00000000&lt;/item&gt; &lt;item name="android:fastScrollEnabled"&gt;true&lt;/item&gt; &lt;item name="android:horizontalSpacing"&gt;8dp&lt;/item&gt; &lt;item name="android:verticalSpacing"&gt;8dp&lt;/item&gt; &lt;item name="android:numColumns"&gt;3&lt;/item&gt; &lt;item name="android:stretchMode"&gt;columnWidth&lt;/item&gt; &lt;item name="android:scrollbarStyle"&gt;outsideOverlay&lt;/item&gt; &lt;/style&gt; </code></pre> <p>Then there's the grid item layout with the card background. Here's my layout file <code>board_grid_item.xml</code>:</p> <pre><code>&lt;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" &gt; &lt;RelativeLayout android:id="@+id/grid_item_thread_image_wrap" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="8dp" &gt; &lt;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" /&gt; &lt;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" /&gt; &lt;/RelativeLayout&gt; &lt;LinearLayout android:layout_width="match_parent" android:layout_height="84dp" android:orientation="vertical" &gt; &lt;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" /&gt; &lt;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" /&gt; &lt;/LinearLayout&gt; &lt;/LinearLayout&gt; </code></pre> <p>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:</p> <p><img src="https://i.imgur.com/gty8Fpe.png" width="450"></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload