Develop Reference

Divide Screen into Four Equal Parts using Relative Layout

I currently have code that allows me to divide the screen into four equal parts, with an image button in each part. However, the code uses linear layouts which brings up the suggestion "nested weights are bad for performance". How can I make my layout using relative layouts?
Below is the code, and here is a picture of the intended format
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:orientation="horizontal"
android:background="#ff191919">
<ToggleButton
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff414141"
android:layout_weight="1.0"
android:text="Plane"
android:layout_margin="5dp"
android:textSize="20sp"
android:onClick="airplaneClicked"/>
<ImageButton
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff414141"
android:layout_weight="1.0"
android:layout_margin="5dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_brightness"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:orientation="horizontal"
android:background="#ff191919">01
<ImageButton
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff414141"
android:layout_weight="1.0"
android:layout_margin="5dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_sound" />
<ImageButton
android:id="#+id/settingsbutton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff414141"
android:layout_weight="1.0"
android:layout_margin="5dp"
android:scaleType="fitCenter"
android:src="#drawable/settings2"/>
</LinearLayout>
</LinearLayout>

Using below xml:
<?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="0.5" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#242425"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#d5d5d5" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#d5d5d5"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#d5d5d5"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#242425"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#d5d5d5" />
</LinearLayout>
</LinearLayout>

Try this code for your RelativeLayout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/r1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/r3"
android:layout_width="match_parent"
android:layout_height="225dp"
android:layout_marginBottom="10dp"
android:layout_alignParentTop="true" >
<ImageButton
android:id="#+id/i1"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/i2"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/ic_launcher" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/r2"
android:layout_width="match_parent"
android:layout_height="225dp"
android:layout_alignParentBottom="true"
android:layout_below="#+id/r3" >
<ImageButton
android:id="#+id/i3"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/i4"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>

Try this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_green_light"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:orientation="horizontal" >
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_light"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_red_light"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>

Not able to display buttons in the screen

I am having a screen which has many layouts having title,list view ,comment and buttons but buttons are not getting displayed at all,after list view display I am getting a huge amount of empty space after which comment is getting displayed and buttons are not seen ,this is my code.
<?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"
android:background="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_margin="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="12345617890" />
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:fontFamily="#android:color/black"
android:text="Ramakrisha Tripati" />
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="9876543210" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_weight="1"
android:layout_margin="10dp"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="13/1/2015" />
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Rohit Sharma" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="55dp"
android:orientation="horizontal"
android:background="#android:color/holo_orange_light">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item#\nstyle#"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="M Wt\nD Wt\nCS Wt"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Making\nD Rate\nCS Rate"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Margin\nDis %\nDiscount"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GT\nFSP"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:divider="#00000000"
android:dividerHeight="5dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25dp"
android:text="Comment" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:ems="10"
android:hint="Comment goes here"
android:inputType="textMultiLine" />
</LinearLayout>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="accept"
android:src="#drawable/accept"
/>
</LinearLayout>

I have modified your layout code and now the button has appeared.
<?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:background="#android:color/white"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="12345617890" />
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:fontFamily="#android:color/black"
android:text="Ramakrisha Tripati" />
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="9876543210" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:gravity="right"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="13/1/2015" />
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Rohit Sharma" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="55dp"
android:background="#android:color/holo_orange_light"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="item#\nstyle#" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="M Wt\nD Wt\nCS Wt" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Making\nD Rate\nCS Rate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Margin\nDis %\nDiscount" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="GT\nFSP" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:divider="#00000000"
android:dividerHeight="5dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Comment"
android:textSize="25dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:ems="10"
android:hint="Comment goes here"
android:inputType="textMultiLine" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:onClick="accept"
android:src="#drawable/accept" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Just put your main LinearLayout inside scrollview and you will see thr buttons.
And if not so maybe your image is so small or transparent.
check with another image maybe.

Android how to proper overlay image to support multiple screen

I was able to overlay an image in the table layout, but the design will be run in multiple size of screen. Because i'm using margin to achieve the effect of overlay. Below is the code. Is there any suggestion that i can achieve the desired result? Thanks.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="0.7"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="35dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:background="#drawable/ads_body"
android:stretchColumns="*">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.10"
android:gravity="center"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="260dp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="50dp">
</View>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="0.20"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/scoreboard_avatar_how_to_earn_point"
android:textColor="#color/dark_grey"
android:textStyle="bold" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:layout_weight="0.20"
android:gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/scoreboard_avatar_how_to_earn_point"
android:textColor="#color/dark_grey" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="0.5"
android:background="#drawable/ads_table_border"
android:paddingTop="5dp">
<ImageView
android:id="#+id/scoreboard_point"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:src="#drawable/scoreboard_point" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#drawable/ads_table_border"
android:paddingTop="5dp">
<TextView
android:id="#+id/ads_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/scoreboard_point"
android:textColor="#color/dark_grey"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#drawable/ads_table_border"
android:paddingTop="5dp">
<ImageView
android:id="#+id/scoreboard_coin"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_centerHorizontal="true"
android:src="#drawable/dibs_scoreboard_coin" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_weight="0.5"
android:background="#drawable/ads_table_border"
android:paddingTop="5dp">
<TextView
android:id="#+id/ads_coin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="#string/scoreboard_coin"
android:textColor="#color/dark_grey"
android:textStyle="bold" />
</RelativeLayout>
</TableRow>
</TableLayout>
</RelativeLayout>
</FrameLayout>
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:layout_marginTop="-150dp"
android:adjustViewBounds="true"
android:background="#drawable/head_female_1_circle"
android:scaleType="fitCenter" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.30"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp">
<ImageView
android:id="#+id/ifc_reward"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:background="#drawable/hero_chamber_city_line"
android:contentDescription="#string/app_name" />
</RelativeLayout>
</LinearLayout>
<ImageView
android:id="#+id/btnView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:background="#drawable/ads_button" />
</LinearLayout>

Create folders and xml files for different screen sizes:
See: http://developer.android.com/guide/practices/screens_support.html
If that doesn't help try getting screen size from Java code and then setting margins programatically.

Android table layout issue caused by vertical divider

following is my layout for Android App,
I've tried the table layout,
It will be fine if I don't add the vertical divider.
but the problems are:
the images are not right align the center, caused by my vertical divider(linear layout).
here is my sample code:
<TableLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:layout_centerHorizontal="true"
android:id="#+id/tableexample"
android:showDividers="middle" android:divider="?android:attr/dividerVertical"
android:layout_weight="1">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/tableRowContainer1"
>
<LinearLayout android:layout_width="0dp" android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_weight="1"
android:id="#+id/tableRowLayout1"
android:layout_centerHorizontal="true"
android:paddingTop="#dimen/example_list_padding"
>
<ImageButton android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/exampleImg1"
android:background="#android:color/transparent"
android:src="#drawable/reconstruct_icon01"/>
<TextView android:layout_width="match_parent" android:layout_height="wrap_content"
android:textColor="#color/example_list_color"
android:layout_centerHorizontal="true" android:textSize="#dimen/example_font_size"
android:text="Caption1" android:layout_below="#id/exampleImg1"
/>
</LinearLayout>
<LinearLayout android:layout_width="1dp" android:layout_height="wrap_content"
android:orientation="vertical" android:minWidth="1dp"
android:gravity="center"
android:id="#+id/tableRowDivider1">
<View
style="#style/Divider"
/>
</LinearLayout>
<LinearLayout android:layout_width="0dp" android:orientation="vertical"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:paddingTop="#dimen/example_list_padding"
>
<ImageButton android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/exampleImg2"
android:background="#android:color/transparent"
android:src="#drawable/reconstruct_icon02"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:gravity="center_horizontal|center" android:textColor="#color/example_list_color"
android:layout_centerHorizontal="true" android:textSize="#dimen/example_font_size"
android:text="Caption2" android:layout_below="#id/exampleImg2"
/>
</LinearLayout>
</TableRow>
<TableRow>
<TextView android:background="#color/example_list_divider_color" android:layout_height="1dp"
android:layout_span="3"
/>
</TableRow>
.....
</TableLayout>
by the way, the top left one is padding programatically for testing.
if I do so, the image is right on the position, but that will cause another problem: the image will transform.
the following is what I really want.
What is the proper way to render this layout?
Thanks a lot!

i'm not sure but take a look at my layout i hope it will help you
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#android:color/darker_gray"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/myPRsTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:textColor="#android:color/white"
android:text="My PRs"
/>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="0.03"
android:background="#android:color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/workoutsTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:layout_marginTop="5dp"
android:textColor="#android:color/white"
android:gravity="center"
android:text="Workouts"
/>
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<View
android:id="#+id/divider"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:background="#android:color/white" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.03"
android:background="#android:color/white" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:background="#android:color/white" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv3"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:fontFamily="sans-serif-light"
android:textColor="#android:color/white"
android:gravity="center"
android:text="Timers"
android:layout_marginTop="5dp"/>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="0.03"
android:background="#android:color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv4"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:text="Statistics"
android:textColor="#android:color/white"
android:layout_marginTop="5dp"/>
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<View
android:id="#+id/divider"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_weight="1"
android:background="#android:color/white" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.03"
android:background="#android:color/white" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_weight="1"
android:background="#android:color/white" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv5"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:text="Box Locator"
android:textColor="#android:color/white"
android:layout_marginTop="5dp"/>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="0.03"
android:background="#android:color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tv6"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:text="Something"
android:textColor="#android:color/white"
android:layout_marginTop="5dp"/>
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<View
android:id="#+id/divider"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_weight="1"
android:background="#android:color/white" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.03"
android:background="#android:color/white" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_weight="1"
android:background="#android:color/white" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This area is decorative image"
android:textColor="#android:color/white"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>
</FrameLayout>

Go for Grid View. It's quite easy and you will achieve what you wish, also, it is supported in all screen sizes. Refer: http://developer.android.com/guide/topics/ui/layout/gridview.html

How to create a layout like this?

I want to show four images as shown in given imaages . each image must be equally far apart from others I have tried a LinearLayout and use it weight property but all in sane.
I have eight icons, four for selected state and four for unselected state. I have tried many ways,
Thanks in Advance.
Image Icons are ..
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="match_parent"
android:background="#drawable/bg" >
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/bottom" />
<LinearLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/article_icn"
android:padding="10dp"
android:layout_margin="10dp"
android:scaleType="center" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/forum_icn"
android:padding="10dp"
android:layout_margin="10dp"
android:scaleType="fitXY" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/profile_icn"
android:padding="10dp"
android:layout_margin="10dp"
android:scaleType="fitXY" />
</LinearLayout>
</RelativeLayout>

I tried your code and modified a bit:
<?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="match_parent" >
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/bottom" />
<LinearLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:weightSum="3" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#drawable/icon"
android:padding="10dp"
android:scaleType="center" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#drawable/icon"
android:padding="10dp"
android:scaleType="fitXY" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#drawable/icon"
android:padding="10dp"
android:scaleType="fitXY" />
</LinearLayout>
</RelativeLayout>
Assigning android:weightSum="3" to container and weight 1 to all images works fine:
Output:

Check this layout, works exactly as you want. Just replace the image icons and background.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:background="#517398" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center" >
<ImageButton
android:id="#+id/image_agenda"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center" >
<ImageButton
android:id="#+id/image_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center" >
<ImageButton
android:id="#+id/image_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center" >
<ImageButton
android:id="#+id/image_day"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
OUTPUT

You can use weight attrib:
<?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="wrap_content"
android:background="#000000"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:src="#android:drawable/sym_action_chat" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:src="#android:drawable/sym_action_chat" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:src="#android:drawable/sym_action_chat" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:src="#android:drawable/sym_action_chat" />
</LinearLayout>
output is like this:

Try this..
<?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="match_parent" >
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/bottom" />
<LinearLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/ic_launcher"
android:padding="10dp"
android:scaleType="center" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Textview" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/ic_launcher"
android:padding="10dp"
android:scaleType="center" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Textview" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/ic_launcher"
android:padding="10dp"
android:scaleType="fitXY" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Textview" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/ic_launcher"
android:padding="10dp"
android:scaleType="fitXY" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Textview" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Screen