如何使我的小部件看起来像Google日历小部件？

Question

I'd like to make my widget as much consistent as possible with Google calendar widget. See the image link (sorry I don't have enough reputation to paste the image). Colors are used to identify how much space each element takes.

image link

widget.xml

<FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="@dimen/widget_margin">

<RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <RelativeLayout
    android:id="@+id/headerLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:background="@drawable/appwidget_dark_bg_clickable">

    <LinearLayout
      android:id="@+id/configureButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      android:layout_toLeftOf="@+id/refreshButton"
      android:layout_centerInParent="true"
      android:layout_gravity="center_vertical"
      android:background="#aa999966">

      <TextView
        android:id="@+id/headerTextView"
        android:clickable="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="top|left"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_above="@+id/footerTextView"
        style="@style/headerTextStyle"
        android:text="Channel"/>

      <TextView
        android:id="@+id/footerTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="bottom|left"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        style="@style/footerTextStyle"
        android:text="last update: just started"/>
    </LinearLayout>

    <ImageView
      android:id="@+id/refreshButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="#aa8888bb"
      android:src="@drawable/ic_refresh_white_36dp"
      android:layout_alignParentRight="true"
      android:layout_centerInParent="true"
      android:layout_gravity="center_vertical"/>
  </RelativeLayout>

  <GridView
    android:id="@+id/fieldsGridView"
    android:numColumns="1"
    android:gravity="center"
    android:stretchMode="columnWidth"
    android:background="@color/white"
    android:layout_below="@+id/headerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    android:clipToPadding="false">
  </GridView>

  <TextView
      android:id="@+id/empty_view"
      android:background="@color/white"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_alignParentBottom="true"
      android:layout_below="@+id/headerLayout"
      android:gravity="center"
      style="@style/emptyTextStyle"
      android:text="Empty"/>

</RelativeLayout>
</FrameLayout>

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/appwidget_dark_bg_clickable"
    android:paddingLeft="8dp"
    android:paddingRight="8dp">
    <TextView
        android:id="@+id/fieldNameTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical|left"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@+id/fieldValueTextView"
        android:background="#aaff0000"
        style="@style/fieldNameTextStyle"/>
    <TextView
        android:id="@+id/fieldValueTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerInParent="true"
        android:gravity="center_vertical|right"
        android:background="#aa00ff00"
        style="@style/fieldValueTextStyle"/>
</RelativeLayout>

My questions:

1. How can I make the lower part of my heading a straight rectangle? Do I need to modify the nine patch image? I'm using google's template. Any chances that I can find the png they use for calendar?
2. How do I reduce the extra space in the list item? There is some kind of padding, even if I'm using only android:paddingLeft="8dp" and android:paddingRight="8dp"
3. How do I increase the border between two listitems?

Thanks

Answer 1

Answering my own question after some research:

Result, see link

1. Header shape

A drawable shape can be used. It is a very simple solution and no png editing is involved.

widget_header_background.xml in res/drawable

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

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
      android:topLeftRadius="3dp"
      android:topRightRadius="3dp"/>
    <solid android:color="#ffff0000"/>
    <stroke
            android:color="#ffff0000"
            android:width="1dp"/>
</shape>

using android:background="@drawable/widget_header_background" in widget.xml

2. Extra space in the listview

Use another drawable shape

widget_header_background.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
      android:radius="3dp"/>
    <solid android:color="@color/grey"/>
    <stroke
            android:color="@color/grey"
            android:width="1dp"/>
</shape>

3. Listview divider space

Add

android:divider="#ffffff" 
android:dividerHeight="4dp"

in your listview