Android responsive layout
I am building application (calculator). I use table layout with buttons inside. It looks perfect on screen of Samsung Galaxy II, however it looks very bad on bigger screens. The buttons hight is very small. How I can stretch the buttons on bigger screens?
The layout XML is bellow:
<ScrollView xmlns:android="http://schemas.an
xmlns:tools="http://schemas.android.com/
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:paddingBottom="@dimen/activity_v
android:paddingLeft="@dimen/activity_hor
android:paddingRight="@dimen/activity_ho
android:paddingTop="@dimen/activity_vert
tools:context=".MainActivity" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
>
<TableRow
android:id="@+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="0dp">
<Button
android:id="@+id/Button01"
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="fill_pare
android:text="@string/button_1"
android:visibility="visible" />
<Button
android:id="@+id/Button02"
android:layout_width="0dp"
android:layout_weight="0.34"
android:layout_height="fill_pare
android:text="@string/button_2"
<Button
android:id="@+id/Button03"
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="fill_pare
android:text="@string/button_3"
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="0dp" >
<Button
android:id="@+id/Button04"
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="fill_parent"
android:text="@string/button_4" />
<Button
android:id="@+id/Button05"
android:layout_width="0dp"
android:layout_weight="0.34"
android:layout_height="fill_parent"
android:text="@string/button_5" />
<Button
android:id="@+id/Button06"
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="fill_parent"
android:text="@string/button_6" />
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="0dp" >
<Button
android:id="@+id/Button07"
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="fill_pare
android:text="@string/button_7"
<Button
android:id="@+id/Button08"
android:layout_width="0dp"
android:layout_weight="0.34"
android:layout_height="fill_pare
android:text="@string/button_8"
<Button
android:id="@+id/Button09"
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="fill_pare
android:text="@string/button_9"
</TableRow>
<TableRow
android:id="@+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="0dp" >
<Button
android:id="@+id/ButtonUndo"
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="fill_pare
android:text="@string/button_und
<Button
android:id="@+id/Button00"
android:layout_width="0dp"
android:layout_weight="0.34"
android:layout_height="fill_pare
android:text="@string/button_0"
<Button
android:id="@+id/ButtonCheck"
android:layout_width="0dp"
android:layout_weight="0.33"
android:layout_height="fill_pare
android:text="@string/button_che
</TableRow>
<TableRow
android:id="@+id/ResTable"
android:layout_width="match_parent"
android:layout_height="0dp" >
<TableLayout
android:layout_weight="0.3"
android:id="@+id/table_score_cor
<TableRow
android:id="@+id/tableRow5_11"
android:layout_width="wrap_conte
android:layout_height="fill_pare
android:gravity="center_vertical
<TextView
android:id="@+id/labelCorrec
android:layout_width="wrap_c
android:layout_height="fill_
android:ems="4"
android:text="@string/correc
android:gravity="center_vertic
android:textSize="15sp" />
</TableRow>
<TableRow
android:id="@+id/tableRow5_12"
android:layout_width="wrap_conte
android:layout_height="0dp" >
<TextView
android:id="@+id/scoreCorr
android:layout_width="0dp"
android:layout_height="fil
android:ems="4"
android:gravity="center_ve
android:text=""
android:textSize="30sp"
android:textStyle="bold" /
</TableRow>
</TableLayout>
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content
android:layout_height="fill_parent
android:layout_weight="0.3"
android:contentDescription="@strin
android:fitsSystemWindows="true"
android:scaleType="fitCenter"
android:src="@drawable/trees" />
<TableLayout
android:id="@+id/table_score_inc
android:layout_weight="0.3">
<TableRow
android:id="@+id/tableRow5_21"
android:layout_width="wrap_conte
android:layout_height="fill_pare
android:gravity="center_vertical
<TextView
android:id="@+id/labelIncorrec
android:layout_width="wrap_con
android:layout_height="fill_pa
android:ems="4"
android:text="@string/incorrec
android:gravity="center_vertic
android:textSize="15sp" />
</TableRow>
<TableRow
android:id="@+id/tableRow5_22"
android:layout_width="wrap_conte
android:layout_height="fill_pare
<TextView
android:id="@+id/scoreInco
android:layout_width="0dp"
android:layout_height="fil
android:ems="4"
android:gravity="center_ve
android:text=""
android:textSize="30sp"
android:textStyle="bold" /
</TableRow>
</TableLayout>
</TableRow>
<TableRow
android:id="@+id/tableRow_menu"
android:layout_width="wrap_content
android:layout_height="fill_parent
<Button
android:id="@+id/ButtonPlus"
android:layout_width="0dp"
android:layout_height="38dp"
android:layout_weight="0.25"
android:text="@string/action_p
<Button
android:id="@+id/ButtonMinus"
android:layout_width="0dp"
android:layout_height="38dp"
android:layout_weight="0.25"
android:text="@string/action_m
<Button
android:id="@+id/ButtonMult"
android:layout_width="0dp"
android:layout_height="38dp"
android:layout_weight="0.25"
android:text="@string/action_m
<Button
android:id="@+id/ButtonDivide"
android:layout_width="0dp"
android:layout_height="38dp"
android:layout_weight="0.25"
android:text="@string/action_d
</TableRow>
</TableLayout>
</ScrollView>
Answer
Over and all, you need to create different layouts/drawables for supporting all the screens. It depends on your requirement, say for example, if you would want to include 2 buttons in small screen and 4 buttons on large screens then obvious you have to create different layouts.
If you would want to display same number of buttons in all screens then I would suggest you to prepare different set of images/drawables and include them in your project. Here you don't need to do anything other than placing images in particular drawable folders.
One more thing, If its a plain background then you can create 9-patch image so that it can stretch with whatever size you want or your device supports.
More study: