What is the best way to create a layout like "Google drive app" in Android?

Question

I'm a newie in Android apps and now I'm stuck triyng to get something like this layout...

http://cloud.addictivetips.com/wp-content/uploads/2012/04/Google-Drive-for-Android-Home.jpg

I've started doing with RelativeLayout, but I don't know how to do this cute buttons. I've use buttons with background images with no success. I've seen there's antoher layouts... What would you use to achieve these one? Or where can I follow a good example talking about layouts and buttons with different examples, because I couldn't find anything interesting about :(

Thanks in advance and sorry about my english

Answer 1

It sounds like you basically have two questions:

1. How to create this layout?
2. How to create or where to get these buttons?

To attempt to answer the first question, there are numerous ways to create a layout such as the one you presented. Since you mention that you are a "newbie" I will present you with one simple way, and that is to use a linear layout.

> <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/TextView03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/4_collections_collection"
        android:gravity="center"
        android:text="My Drive" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dip"
        android:layout_above="@id/your_image_view_id"
        android:layout_centerVertical="true"
        android:background="#808080" />

    <TextView
        android:id="@+id/TextView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/6_social_group"
        android:gravity="center"
        android:text="Shared with me" />



    <View
        android:layout_width="fill_parent"
        android:layout_height="1dip"
        android:background="#808080" />

    <TextView
        android:id="@+id/TextView04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/3_rating_important"
        android:gravity="center"
        android:text="Starred" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dip"
        android:background="#808080" />

    <TextView
        android:id="@+id/TextView04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/10_device_access_alarms"
        android:gravity="center"
        android:text="Recent" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dip"
        android:background="#808080" />

    <TextView
        android:id="@+id/TextView04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/9_av_make_available_offline"
        android:gravity="center"
        android:text="Offline" />

</LinearLayout>

The key parts here are:

• android:drawableLeft - the textview has a property called android:drawableLeft that allows you to assign an icon and place it easily on the left.
• View - View here was used to draw a horizontal line.

Another important part of that layout is Action Bar. For that you can use the following reference: Action Bar Reference on developer.android.com

The regarding the second question, the icon/buttons can be attained in the download section of developer.android.com. Of course you in developing applications it will become necessary to use a graphics program to design your own icons and buttons.

Hope this helps you get going in the right direction.