This is a example code for designing UI which supports a variety of devices that offer different screen sizes and densities. For example, the UI for tablets and the UI for handsets appears same due to the following code style which uses TableLayout of android.
1.MainActivity.java
=================
package com.rajuandroid.blogspot.com;
import android.app.Activity;
import android.os.Bundle;
public class MainActivity extends Activity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
2.layout/main.xml
===================
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layoutMiddle"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/white"
android:fillViewport="true" >
<TableLayout
android:id="@+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/white" >
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:padding="5dip" >
<TextView
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/currentselection"
android:textColor="#000000"
android:textStyle="bold" />
<TextView
android:id="@+id/selectedTv"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="#F7FE2E"
android:gravity="center"
android:text="text1"
android:textColor="#000000" />
<TextView
android:id="@+id/selectedTimeTv"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="2"
android:background="#F7FE2E"
android:gravity="center"
android:text="u can set dynamically"
android:textColor="#000000" />
</TableRow>
</TableLayout>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="35dp"
android:gravity="center_horizontal"
android:minHeight="50dp"
android:padding="2dip" >
<Button
android:id="@+id/apple"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/apple"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/banana"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/banana"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/bread"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/bread"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/burger"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/burger"
android:textColor="#FFFFFF" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:minHeight="50dp"
android:padding="2dip" >
<Button
android:id="@+id/candy"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/candy"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/chips"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/chips"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/coffe"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/coffe"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/cookie"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/cookie"
android:textColor="#FFFFFF" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:minHeight="50dp"
android:padding="2dip" >
<Button
android:id="@+id/egg"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/egg"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/milk"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/milk"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/orange"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/orange"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/pasta"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/pasta"
android:textColor="#FFFFFF" />
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:minHeight="50dp"
android:padding="2dip" >
<Button
android:id="@+id/salad"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/salad"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/soda"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/soda"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/soup"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/soup"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/tea"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/tea"
android:textColor="#FFFFFF" />
</TableRow>
</TableLayout>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TableRow
android:id="@+id/tableRow34"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:minHeight="50dp"
android:padding="2dip" >
<Button
android:id="@+id/now"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/now"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/fiveMinAgo"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/fiveminago"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/fifteenMinAgo"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/fifteenminago"
android:textColor="#FFFFFF" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:minHeight="50dp"
android:padding="2dip" >
<Button
android:id="@+id/thirtyMinAgo"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/thirtyminago"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/oneHourAgo"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/onehourago"
android:textColor="#FFFFFF" />
<Button
android:id="@+id/twoHourAgo"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/twohago"
android:textColor="#FFFFFF" />
</TableRow>
<TableRow
android:id="@+id/tableRow35"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:minHeight="50dp"
android:padding="2dip" >
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@null"
android:gravity="center"
android:text=""
android:textColor="#FFFFFF" />
<Button
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@drawable/presetbtnbg"
android:gravity="center"
android:text="@string/send1"
android:textColor="#FFFFFF" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="2dip"
android:layout_weight="1"
android:background="@null"
android:gravity="center"
android:text=""
android:textColor="#FFFFFF" />
</TableRow>
</TableLayout>
</TableLayout>
</ScrollView>
3.values/strings.xml
====================
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">RajuAndroidBlog</string>
<string name="currentselection">Current selection</string>
<string name="apple">Apple</string>
<string name="banana">Banana</string>
<string name="bread">Bread</string>
<string name="burger">Burger</string>
<string name="candy">Candy</string>
<string name="chips">Chips</string>
<string name="coffe">Coffe</string>
<string name="cookie">Cookie</string>
<string name="egg">Egg</string>
<string name="milk">Milk</string>
<string name="orange">Orange</string>
<string name="pasta">Pasta</string>
<string name="salad">Salad</string>
<string name="soda">Soda</string>
<string name="soup">Soup</string>
<string name="tea">Tea</string>
<string name="fifteenminago">15 min ago</string>
<string name="fiveminago">5 min ago</string>
<string name="now">Now</string>
<string name="twohago">2h ago</string>
<string name="onehourago">1 hour ago</string>
<string name="thirtyminago">30 min ago</string>
<string name="send1">Send</string>
</resources>
4.drawable/presetbtnbg.xml
=========================
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/button_newbg_selected"/> <!--pressed -->
<item android:drawable="@drawable/btnnewbg" /> <!-- Normal -->
</selector>
5.Notes
=============
"@drawable/btnnewbg" is a black small image and "@drawable/button_newbg_selected" is a white small image.
 |
| btnnewbg |
 |
| button_newbg_selected |
6.Screenshots
=================
