How to design Twitter interface Layout in Android

In my android app i want to design a layout exactly like twitter layout with a Image and Text View.

See the following screenshot

Please help me with this. How can i design this layout ?

Update:

Forget about backgroun开发者_运维百科d images and top bar. I am requiring 6 images and textviews. In the below image twobirds with Tweets(167), Lists, Mentions, Retweets etc.,

What you want is fairly simple, tho I am sure there are more fancy way's of doing this then i'm about to show you.

For my application I used 4 ImageButtons, but the principle is the same for 4 or 6 buttons.

This is my XML layout:

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

<RelativeLayout 
    android:id="@+id/actionbar_layout" 
    android:layout_width="fill_parent" 
    android:layout_height="45dip"
    android:background="@drawable/actionbar_background"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/tekst"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="App name"
        android:textColor="#FFFFFF"
        android:textSize="18dp"
        android:layout_marginLeft="5dp"
        android:textStyle="bold"/>

</RelativeLayout>

<RelativeLayout 
    android:id="@+id/button_layout" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:layout_below="@id/actionbar_layout">

    <ImageButton
        android:id="@+id/button_schedule"
        android:src="@drawable/schedule_icon"
        android:scaleType="fitCenter"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="40dp"
        android:background="#FFFFFF"
        />

    <TextView
        android:id="@+id/text_schedule"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:text="Rooster"
        android:textSize="20dp"
        android:layout_below="@id/button_schedule"
        android:gravity="center" 
        />

    <ImageButton
        android:id="@+id/button_locations"
        android:src="@drawable/locations_icon"
        android:scaleType="fitCenter"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="50dp"
        android:background="#FFFFFF"        
        android:layout_below="@id/text_schedule"
        />

    <TextView
        android:id="@+id/text_locations"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:text="Links"
        android:textSize="20dp"
        android:layout_below="@id/button_locations"
        android:gravity="center"
        />

    <ImageButton
        android:id="@+id/button_rss"
        android:src="@drawable/rss_icon"
        android:scaleType="fitCenter"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="40dp"
        android:background="#FFFFFF"
        android:layout_toRightOf="@id/button_schedule"
        android:layout_alignParentRight="true" 
        />

    <TextView
        android:id="@+id/text_rss"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:text="RSS"
        android:textSize="20dp"
        android:layout_toRightOf="@id/text_schedule"
        android:layout_below="@id/button_rss"
        android:layout_alignParentRight="true"
        android:gravity="center"
        />

    <ImageButton
        android:id="@+id/button_settings"
        android:src="@drawable/settings_icon"
        android:scaleType="fitCenter"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="50dp"
        android:background="#FFFFFF"
        android:layout_toRightOf="@id/text_locations"
        android:layout_below="@id/text_schedule"
        android:layout_alignParentRight="true" 
        />

    <TextView
        android:id="@+id/text_settings"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:text="Instellingen"
        android:textSize="20dp"
        android:layout_toRightOf="@id/text_locations"
        android:layout_below="@id/button_settings"
        android:layout_alignParentRight="true" 
        android:gravity="center"
        />

</RelativeLayout>

<RelativeLayout
    android:id="@+id/twitter_layout"
    android:layout_width="wrap_content"
    android:layout_height="150dp"
    android:layout_alignParentBottom="true"
    android:layout_below="@id/button_layout">

   <Gallery android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:id="@+id/gallery"           
        android:layout_gravity="bottom"
        android:layout_alignParentBottom="true">    
   </Gallery>
</RelativeLayout>     

I pasted the whole file, so you can see how I implemented my actionbar. But what you need is the second RelativeLayout tag.

You align your buttons/textviews by using "android:layout_toRightOf" and "android:layout_below" attributes.

Your first button is simple, the second one (the one to its right) you align with "android:layout_toRightOf="@id/first_button"

A third button (below the first button) can be aligned using "android:layout_below="@id/first_button"

The same goes for textviews, just use layout_toRightOf and layout_below to align them. The attributes only apply to the RelativeLayout.

Hope this will help you out a bit.

What you want to do is called a Dashboard pattern.

You can find implementation of ActionBar and Dashboard patterns in sources of the Google IO app. ActionBar in the file actionbar.xml (and HomeActivity.java, ActivityHelper.java), Dashboard in the file fragment_dashboard.xml (and DashBoard.java).

im sure , it's can be created like this :

image and textView mustBe on  layout - so :
    //start "a" code
    LinearLayout oneObject ;
    oneObject= new LinearLayout(this);
    //need set to vertical mode  
    oneObject.setOrientation(LinearLayout.VERTICAL);
    //it's our one object . image+text
    next : TextView text = new TextView(this);
    text.setText("tweets"); // or get from array 
    ///image it's can be what you want - button, layout, textView(-____-) 
    // just need set on background new image . iget button - for normal clicking ;//
    ImageButton image = new ImageButton(this);
    image.setImageResource(r.drawable.blabla)
    oneObject.addView(image);
    oneObject.addView(text);
//also u need create 2 columns and add to this columns our object

//for size of oneObject - use LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(curWidth/2,curHeight/6); curWidth and curHeight - its my resolution of screen.
//end "a" code

for creating 6 objects u must rung it in cycle : all code = "a"; so

for(int i = 0;i<6;i++)
{
 a/// where a all our code
}

Hope it's help you.. also i can put more code where need some fixings