GUI like Google Keep

Google Keep has a very nice UI.

First of all, I'm not a designer, but tonight I enjoyed trying to clone it.
Do not take this code too seriously, it is just an example.


We start with ActionBar. Window and ActionBar have same background color.

With Android Action Bar Style Generator (by Jeff Gilfelt) we choose a background and generate our zip code. We take only the part that interests us and integrate it.

    <style name="Theme.Keep" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/ActionBar.Solid.Keep</item>
        <item name="android:windowBackground">@color/default_background_color</item>
        <item name="android:windowActionBarOverlay">true</item>
         <item name="android:actionBarWidgetTheme">@style/ActionBar.Widget.Keep</item>
    </style>
    
    <style name="ActionBar.Solid.Keep" parent="@android:style/Widget.Holo.ActionBar">
        <item name="android:background">@drawable/ab_bottom_solid_keep</item>
        <item name="android:titleTextStyle">@style/Keep.ActionBar.TitleTextStyle</item>
    </style>

For our Activity we choose a RelativeLayout, and we put it under ActionBar.

    <style name="Box_outer">
        <item name="android:layout_marginTop">?android:actionBarSize</item>
        <item name="android:layout_marginLeft">0dp</item>
        <item name="android:layout_marginRight">0dp</item>
    </style>

Then we try to draw first box with title and icons.

We choose a FrameLayout and we adjust margins.

   <FrameLayout
        android:id="@+id/box_inner"
        style="@style/Box_inner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shadow" >

    <style name="Box_inner">
        <item name="android:layout_marginLeft">20dp</item>
        <item name="android:layout_marginRight">20dp</item>
        <item name="android:layout_marginBottom">20dp</item>
    </style>

We want a white rectangle with a light bottom shadow. We can do it with a 9 patch image.
In this case I choose a xml file with a layer-list.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- Bottom 3dp Shadow -->
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#CCCCCC" />
        </shape>
    </item>

    <!-- White Top color -->
    <item android:bottom="3dp">
        <shape android:shape="rectangle" >
            <solid android:color="#FFFFFF" />
        </shape>
    </item>

</layer-list>

Then we fill the box with title, a divider and 4 images.

     <LinearLayout
            android:id="@+id/box_rectangle"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/box_title"
                style="@style/box_text"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="@string/first_title" />

            <View
                android:id="@+id/box_divider"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@android:color/darker_gray" />

            <LinearLayout
                android:id="@+id/box_image"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <ImageView
                    style="@style/ButtonStyle"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:contentDescription="@string/buttondesc"
                    android:src="@drawable/ic_list" />

                 .......

            </LinearLayout>
        </LinearLayout>

For the buttons background we use:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/transparent"/>
</selector>

We should add something like this:

<item android:state_pressed="true" android:drawable="@drawable/button_pressed" />

but I should create images...

In landscape mode, we change something in layout:

  <LinearLayout
            android:id="@+id/box_rectangle"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/box_title"
                style="@style/box_text"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="@string/first_title" />

            <View
                android:id="@+id/box_divider"
                android:layout_width="1dp"
                android:layout_height="fill_parent"
                android:background="@android:color/darker_gray" />

            <LinearLayout
                android:id="@+id/box_image"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.3"
                android:orientation="horizontal" >

                <ImageView
                    style="@style/ButtonStyle"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:contentDescription="@string/buttondesc"
                    android:src="@drawable/ic_list" />

....... and we obtain:

To color a bit the screen we put some shape below.
I don't know what Google used for it.

I think it is a StaggeredGridView or a variant of it, likely.
Someone spoke about it on G+ a few months ago. You can find an experimental in frameworks/ex/widgets/ folder of AOSP.

I honestly do tests before speak about it.
.
You can get code from GitHub: