Equal vertically spaced columns layout

Equal vertically spaced columns layout - android

I want to make this layout on my main screen of my application.
I have stripes for each image block shown above.
Please guide my which layout (RelativeLayout, LinearLayout...etc) should I use to achieve this.
I am new to android development. I have experimented few layout but not having success. I also used FrameLayout
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<FrameLayout
android:id="#+id/inboxLargeButton"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/inbox_normal"
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_gravity="center_horizontal">
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="2631"
android:layout_gravity="bottom"
android:gravity="center"
android:textColor="#fff"
android:textSize="50dp" />
</FrameLayout>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/outbox_normal"
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_gravity="center_horizontal">
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="0296"
android:layout_gravity="bottom"
android:gravity="center"
android:textColor="#fff"
android:textSize="50dp" />
</FrameLayout>
</TableRow>
<TableRow>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/header_left_normal"
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_gravity="center_horizontal">
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Most sent"
android:layout_gravity="bottom"
android:gravity="center"
android:textColor="#fff"
android:textSize="15dp" />
</FrameLayout>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/header_right_normal"
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_gravity="center_horizontal">
</ImageView>
</FrameLayout>
</TableRow>
<TableRow>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/body_left_normal"
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_gravity="center_horizontal">
</ImageView>
</FrameLayout>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/body_right_normal"
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_gravity="center_horizontal">
</ImageView>
</FrameLayout>
</TableRow>
</TableLayout>
As I want to make the each block clickable too.

Try this code:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/inboxLargeButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:text="2631"
android:textColor="#fff"
android:textSize="50dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:text="0296"
android:textColor="#fff"
android:textSize="50dp" />
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:text="Most sent"
android:textColor="#fff"
android:textSize="15dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonWeddingDayCheatSheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/buttonShareFavoriteRecipe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" >
</ImageView>
</LinearLayout>
</TableRow>
</TableLayout>

Related

RelativeLayout with layout_weight doesn't work

I have 4 LinearLayout with a layout_weight of 0.25 (each one of them uses 25% of the screen height), the first 3 LinearLayout contains an ImageView and a RelativeLayout with a layout_weight of 0.5 (they both take 50% of the LinearLayout width) and they work fine, the problem occurs on the last LinearLayout which contains 2 RelativeLayout, this is the structure:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1.0"
android:layout_weight=".25">
<RelativeLayout
android:layout_height="match_parent"
android:layout_weight=".5"
android:layout_width="0dip"
android:background="#color/white">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/icon_news"
android:scaleType="centerInside"
android:layout_centerHorizontal="true"
android:layout_above="#+id/newsTextView"
/>
<TextView
android:id="#+id/newsTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="News"
android:gravity="center_horizontal"
android:layout_centerInParent="true"
android:textColor="#color/mainBlue"
android:textSize="20sp"
android:textStyle="bold"
android:layout_margin="10dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_height="match_parent"
android:layout_weight=".5"
android:layout_width="0dip"
android:background="#color/white">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/icon_contacts"
android:scaleType="centerInside"
android:layout_centerHorizontal="true"
android:layout_above="#+id/contactTextView"
/>
<TextView
android:id="#+id/contactTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Contatti"
android:gravity="center_horizontal"
android:layout_centerInParent="true"
android:textColor="#color/mainBlue"
android:textSize="20sp"
android:textStyle="bold"
android:layout_margin="10dp"/>
</RelativeLayout>
</LinearLayout>
This LinearLayout doesn't work, it doesn't take the 25% height of the screen and it's just not visible.. Is it a problem with RelativeLayout with layout_weight? what should I do to fix this?
EDIT
This is the whole XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:pew="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1.0">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1.0"
android:layout_weight=".25">
<ImageView
android:layout_height="wrap_content"
android:layout_weight=".5"
android:layout_width="0dip"
android:src="#drawable/img"
android:scaleType="centerCrop"/>
<RelativeLayout
android:layout_height="match_parent"
android:layout_weight=".5"
android:layout_width="0dip"
android:background="#color/mainBlue">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sezione 1"
android:gravity="left"
android:layout_centerInParent="true"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"
android:layout_margin="10dp"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1.0"
android:layout_weight=".25">
<RelativeLayout
android:layout_height="match_parent"
android:layout_weight=".5"
android:layout_width="0dip"
android:background="#color/mainBlue">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sezione 2"
android:gravity="left"
android:layout_centerInParent="true"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"
android:layout_margin="10dp"/>
</RelativeLayout>
<ImageView
android:layout_height="wrap_content"
android:layout_weight=".5"
android:layout_width="0dip"
android:src="#drawable/img"
android:scaleType="centerCrop"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1.0"
android:layout_weight=".25">
<ImageView
android:layout_height="wrap_content"
android:layout_weight=".5"
android:layout_width="0dip"
android:src="#drawable/img"
android:scaleType="centerCrop"/>
<RelativeLayout
android:layout_height="match_parent"
android:layout_weight=".5"
android:layout_width="0dip"
android:background="#color/mainBlue">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sezione 1"
android:gravity="left"
android:layout_centerInParent="true"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"
android:layout_margin="10dp"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1.0"
android:layout_weight=".25">
<RelativeLayout
android:layout_height="match_parent"
android:layout_weight=".5"
android:layout_width="0dip"
android:background="#color/white">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/icon_news"
android:scaleType="centerInside"
android:layout_centerHorizontal="true"
android:layout_above="#+id/newsTextView"
/>
<TextView
android:id="#+id/newsTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="News"
android:gravity="center_horizontal"
android:layout_centerInParent="true"
android:textColor="#color/mainBlue"
android:textSize="20sp"
android:textStyle="bold"
android:layout_margin="10dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_height="match_parent"
android:layout_weight=".5"
android:layout_width="0dip"
android:background="#color/white">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/icon_contacts"
android:scaleType="centerInside"
android:layout_centerHorizontal="true"
android:layout_above="#+id/contactTextView"
/>
<TextView
android:id="#+id/contactTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Contatti"
android:gravity="center_horizontal"
android:layout_centerInParent="true"
android:textColor="#color/mainBlue"
android:textSize="20sp"
android:textStyle="bold"
android:layout_margin="10dp"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Add Linear Layout as Root Layout with weightSum 1.
Refer this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:pew="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:orientation="horizontal"
android:weightSum="1.0">
<ImageView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher" />
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#FFF">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:gravity="left"
android:text="Sezione 1"
android:textColor="#000"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:orientation="horizontal"
android:weightSum="1.0">
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#FFF">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:gravity="left"
android:text="Sezione 2"
android:textColor="#000"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
<ImageView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:orientation="horizontal"
android:weightSum="1.0">
<ImageView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher" />
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#FFF">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:gravity="left"
android:text="Sezione 1"
android:textColor="#000"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:orientation="horizontal"
android:weightSum="1.0">
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#FFF">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_above="#+id/newsTextView"
android:layout_centerHorizontal="true"
android:scaleType="centerInside"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/newsTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:text="News"
android:textColor="#000"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#FFF">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_above="#+id/contactTextView"
android:layout_centerHorizontal="true"
android:scaleType="centerInside"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/contactTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:text="Contatti"
android:textColor="#000"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>

hey I tested your code is it seems there is problem in hight you gave to each 4 child layout.
just replace
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:orientation="horizontal"
android:weightSum="1.0" >
with
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".25"
android:orientation="horizontal"
android:weightSum="1.0" >
and do same for all 4 child views.
For reference
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:pew="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1.0" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".25"
android:orientation="horizontal"
android:weightSum="1.0" >
<ImageView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:scaleType="centerCrop"
android:src="#drawable/cat1" />
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#android:color/holo_blue_bright" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:gravity="left"
android:text="Sezione 1"
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".25"
android:orientation="horizontal"
android:weightSum="1.0" >
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#android:color/holo_blue_bright" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:gravity="left"
android:text="Sezione 2"
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
<ImageView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:scaleType="centerCrop"
android:src="#drawable/cat2" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".25"
android:orientation="horizontal"
android:weightSum="1.0" >
<ImageView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:scaleType="centerCrop"
android:src="#drawable/cat3" />
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#android:color/holo_blue_bright" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:gravity="left"
android:text="Sezione 1"
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".25"
android:orientation="horizontal"
android:weightSum="1.0" >
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#fff" >
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_above="#+id/newsTextView"
android:layout_centerHorizontal="true"
android:scaleType="centerInside"
android:src="#drawable/icon" />
<TextView
android:id="#+id/newsTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:text="News"
android:textColor="#android:color/holo_blue_bright"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#fff" >
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_above="#+id/contactTextView"
android:layout_centerHorizontal="true"
android:scaleType="centerInside"
android:src="#drawable/icon" />
<TextView
android:id="#+id/contactTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:text="Contatti"
android:textColor="#android:color/holo_blue_bright"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Happy coding.

Use below code to solve this issue:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:weightSum="1.0"
android:layout_weight=".25">
<RelativeLayout
android:layout_height="match_parent"
android:layout_weight=".5"
android:layout_width="0dip"
>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:scaleType="centerInside"
android:layout_centerHorizontal="true"
android:layout_above="#+id/newsTextView"
/>
<TextView
android:id="#+id/newsTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="News"
android:gravity="center_horizontal"
android:layout_centerInParent="true"
android:textSize="20sp"
android:textStyle="bold"
android:layout_margin="10dp"/>
</RelativeLayout>
<RelativeLayout
android:layout_height="match_parent"
android:layout_weight=".5"
android:layout_width="0dip"
>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:scaleType="centerInside"
android:layout_centerHorizontal="true"
android:layout_above="#+id/contactTextView"
/>
<TextView
android:id="#+id/contactTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Contatti"
android:gravity="center_horizontal"
android:layout_centerInParent="true"
android:textSize="20sp"
android:textStyle="bold"
android:layout_margin="10dp"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

Android:TextView is not set on top of ImageView?

I'm designing my application. In which I want to set TextView on top of an ImageView without any correction of any Layout. TextView is on top of ImageView like other two Buttons. Is it possible to set TextView on ImageView. In my code TextView is hidden behind ImageView. Here is my code.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginRight="0dp"
android:background="#drawable/call_bg" >
<RelativeLayout
android:id="#+id/rl_photo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rl_photo"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_marginTop="20dp" >
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/relativeLayout1"
android:layout_marginTop="350dp"
android:orientation="horizontal"
android:weightSum="2" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/receive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:background="#drawable/acceptxml" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/reject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="#drawable/rejectxml" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
My Actual Code is like this. this is perfectly working in application. but when i change this like your code. so its contain error.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_main"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="60dp"
android:background="#drawable/call_bg" >
<RelativeLayout
android:id="#+id/rl_photo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#id/rl_photo" >
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/relativeLayout1"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:weightSum="2" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/receive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:background="#drawable/acceptxml" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/reject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="#drawable/rejectxml" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>

Check this and let me know.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginRight="0dp"
android:background="#cccccc" >
<RelativeLayout
android:id="#+id/rl_photo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Medium Text"
android:textColor="#ff0000"
android:textStyle="bold"
android:layout_centerInParent="true"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rl_photo"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_marginTop="20dp" >
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/relativeLayout1"
android:layout_marginTop="350dp"
android:orientation="horizontal"
android:weightSum="2" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/receive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/reject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1" >
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".85" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
</FrameLayout>
<LinearLayout
android:id="#+id/container2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".15"
android:orientation="horizontal"
android:weightSum="2" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/receive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/reject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>

// Try this way,hope this will help you to solve your problem...
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|top"
android:orientation="vertical"
android:padding="10dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_marginTop="5dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="bottom"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hugh Jackman"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(201) 555-5555"
android:layout_marginTop="5dp"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:padding="5dp">
<Button
android:id="#+id/receive1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#drawable/acceptxml" />
<Button
android:id="#+id/reject"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="#drawable/rejectxml" />
</LinearLayout>
</LinearLayout>
</FrameLayout>

Android Linear layout image with text

I am making an android app, i want to make a layout like below image.
How can i manage image and layout weight with color.

Try this..
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/flag"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#1D63A1"
android:gravity="center"
android:padding="7dp"
android:text="#string/hello_world"
android:textColor="#FFFFFF"
android:textSize="20dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/flag"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#1D63A1"
android:gravity="center"
android:padding="7dp"
android:text="#string/hello_world"
android:textColor="#FFFFFF"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/flag"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#1D63A1"
android:gravity="center"
android:padding="7dp"
android:text="#string/hello_world"
android:textColor="#FFFFFF"
android:textSize="20dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/flag"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#1D63A1"
android:gravity="center"
android:padding="7dp"
android:text="#string/hello_world"
android:textColor="#FFFFFF"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Image view with textviews in the linearlayout android

Am new to android UI designing.I want to implement the view (like in the image) into the specified linear layout. please help to sort me out.
<Linear Layout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<include
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
layout="#layout/header" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
?????????????????????????????
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:contentDescription="#string/dash_progress"
android:scaleType="fitXY"
android:src="#drawable/account_progress" />
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true" >
</ListView>
This the desired view i need

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="100dip"
android:layout_height="100dip"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="0.5"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="Button" />
</LinearLayout>
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_launcher"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>

<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/common_signin_btn_icon_dark" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="TextView" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_forward" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_plusone_medium_off_client" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Opthalmologist"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:text="UK" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Check this or you can do this with RelativeLayout simply

You need a RelativeLayout.
It is the best way to position your components this way.

How to make custom "button" like Facebook for Android

I want to make my home screen for my android application like Facebook for Android. Is there anyone know how to make this layout? I am still newbie for Android Development.

You can make a 3x3 table, put 3 buttons per row, and a background image as the button:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_height="match_parent"
android:layout_width="wrap_content">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="Button"
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon1"></Button>
<Button
android:text="Button"
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon2"></Button>
<Button
android:text="Button"
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon3"></Button>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="Button"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon4"></Button>
<Button
android:text="Button"
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon5"></Button>
<Button
android:text="Button"
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon6"></Button>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:text="Button"
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon7"></Button>
<Button
android:text="Button"
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon8"></Button>
<Button
android:text="Button"
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon9"></Button>
</TableRow>
Change the #drawable/iconX to whatever background image you want/need.

Use three linear layout with horizontal orientation and make their parent layout with vertical orientation, like this:
<?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:baselineAligned="false" android:orientation="horizontal">
<LinearLayout android:gravity="center" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_vertical" android:layout_weight="1">
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" >
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
</LinearLayout>
<LinearLayout android:baselineAligned="false" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" >
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
</LinearLayout>
<LinearLayout android:baselineAligned="false" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" >
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:orientation="vertical" android:layout_marginLeft="20dip">
<ImageView android:background="#drawable/icon"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="caption"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Looks like this:

Here is the code:
home_icon_view.xml
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout android:orientation="vertical" android:focusable="true" android:layout_width="90.0dip" android:layout_height="70.0dip" android:layout_margin="5.0dip" xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:gravity="center" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" />
</LinearLayout>
<TextView android:textSize="14.0sp" android:textColor="#color/home_text_color" android:gravity="center_horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" />
</LinearLayout>
And home.xml
<LinearLayout android:orientation="vertical" android:id="#id/home_icons" android:paddingTop="5.0dip" android:paddingBottom="24.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0">
<LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<include android:id="#id/home_news_feed_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_profile_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_friends_icon" layout="#layout/home_icon_view" />
</LinearLayout>
<LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<include android:id="#id/home_messages_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_places_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_groups_icon" layout="#layout/home_icon_view" />
</LinearLayout>
<LinearLayout android:gravity="bottom|center" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<include android:id="#id/home_events_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_photos_icon" layout="#layout/home_icon_view" />
<include android:id="#id/home_chat_icon" layout="#layout/home_icon_view" />
</LinearLayout>
</LinearLayout>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Equal vertically spaced columns layout - android

Related

RelativeLayout with layout_weight doesn't work

Android:TextView is not set on top of ImageView?

Android Linear layout image with text

Image view with textviews in the linearlayout android

How to make custom "button" like Facebook for Android

Categories

Resources