I have a vertical LinearLayout with four horizontal LinearLayouts. Each horizontal layout contains 4 Buttons. I want the Buttons in each horizontal LinearLayout to fill the screen width evenly. Currently it looks like this:
The first Button of each row takes up all the width and the other 3 Buttons per row are not visible. Does anyone know how I can fix this?
<LinearLayout
android:id = "#+id/ll_screen_bttns"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/ll1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight = "1">
<Button
android:id="#+id/button0"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"/
/>
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight = "1">
<Button
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button5"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button6"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button7"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight = "1">
<Button
android:id="#+id/button8"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button9"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button10"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button11"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight = "1">
<Button
android:id="#+id/button12"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button13"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button14"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
<Button
android:id="#+id/button15"
android:layout_width="fill_parent"
android:layout_height="#dimen/size"
android:background="#drawable/button"
android:onClick="ButtonOnClick"
android:tag="0"
/>
</LinearLayout>
</LinearLayout>
Abstract XML:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="#dimen/size"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="#dimen/size"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="#dimen/size"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="#dimen/size"
android:layout_weight="1" />
</LinearLayout>
.
.
.
</LinearLayout>
Related
I am having a layout problem.
When the app is opened in Samsung j+ the buttons are not properly placed. Please help.
the problem is explained in the image plz see the image.
here is the xml code:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:gravity="top"
android:id="#+id/relativeLayout">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="#+id/editText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:gravity="right" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/relativeLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="75sp"
android:layout_height="75sp"
android:text="."
android:id="#+id/button"
android:layout_alignParentBottom="true"
android:textSize="25dp"
android:layout_toRightOf="#+id/button3"
android:layout_toLeftOf="#+id/button12"
android:layout_toStartOf="#+id/button12" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="75dp"
android:layout_height="wrap_content"
android:text="1"
android:id="#+id/button2"
android:layout_above="#+id/button"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/button5"
android:textSize="25dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="75dp"
android:layout_height="wrap_content"
android:text="2"
android:id="#+id/button3"
android:layout_toEndOf="#+id/button2"
android:layout_toRightOf="#+id/button2"
android:layout_alignTop="#+id/button5"
android:layout_above="#+id/button4"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:id="#+id/button4"
android:layout_below="#+id/button2"
android:layout_alignRight="#+id/button3"
android:layout_alignEnd="#+id/button3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="75dp"
android:text="3"
android:id="#+id/button5"
android:layout_above="#+id/button"
android:layout_toRightOf="#+id/button4"
android:layout_toEndOf="#+id/button4"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="75dp"
android:text="4"
android:id="#+id/button6"
android:layout_above="#+id/button2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="wrap_content"
android:text="5"
android:id="#+id/button7"
android:layout_alignTop="#+id/button6"
android:layout_toRightOf="#+id/button6"
android:layout_toEndOf="#+id/button6"
android:layout_alignBottom="#+id/button6"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="wrap_content"
android:text="6"
android:id="#+id/button8"
android:layout_above="#+id/button3"
android:layout_toRightOf="#+id/button3"
android:layout_toEndOf="#+id/button3"
android:layout_alignTop="#+id/button7"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="75dp"
android:text="7"
android:id="#+id/button9"
android:layout_above="#+id/button8"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
android:id="#+id/button10"
android:layout_alignTop="#+id/button9"
android:layout_toRightOf="#+id/button9"
android:layout_above="#+id/button6"
android:layout_alignRight="#+id/button7"
android:layout_alignEnd="#+id/button7"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:id="#+id/button11"
android:layout_above="#+id/button8"
android:layout_toRightOf="#+id/button10"
android:layout_alignTop="#+id/button10"
android:layout_alignRight="#+id/button8"
android:layout_alignEnd="#+id/button8"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="
android:id="#+id/button12"
android:layout_toRightOf="#+id/button5"
android:layout_below="#+id/button8"
android:layout_alignParentBottom="true"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:id="#+id/button13"
android:layout_alignTop="#+id/button11"
android:layout_toRightOf="#+id/button11"
android:layout_alignRight="#+id/button12"
android:layout_alignEnd="#+id/button12"
android:layout_alignBottom="#+id/button8"
android:textSize="25dp" />
<Button
android:layout_width="75dp"
android:layout_height="75dp"
android:text="/"
android:id="#+id/button14"
android:layout_above="#+id/button9"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/button10"
android:layout_alignEnd="#+id/button10"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:id="#+id/button15"
android:layout_alignBottom="#+id/button14"
android:layout_alignTop="#+id/button14"
android:layout_alignRight="#+id/button13"
android:layout_alignEnd="#+id/button13"
android:layout_toRightOf="#+id/button11"
android:layout_toEndOf="#+id/button11"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="*"
android:id="#+id/button16"
android:layout_alignBottom="#+id/button14"
android:layout_alignTop="#+id/button14"
android:layout_toRightOf="#+id/button14"
android:layout_toLeftOf="#+id/button15"
android:layout_toStartOf="#+id/button15"
android:textSize="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CLEAR SCREEN"
android:id="#+id/button17"
android:layout_above="#+id/button14"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="#+id/button15"
android:layout_alignEnd="#+id/button15" />
</RelativeLayout>
here is a complete responsive xml no matter what device you use it
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:text="CLEAR SCREEN" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:text="/"
android:textSize="25dp" />
<Button
android:id="#+id/button15"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="-"
android:textSize="25dp" />
<Button
android:id="#+id/button16"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="*"
android:textSize="25dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="7"
android:textSize="25dp" />
<Button
android:id="#+id/button10"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="8"
android:textSize="25dp" />
<Button
android:id="#+id/button11"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="9"
android:textSize="25dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="4"
android:textSize="25dp" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="5"
android:textSize="25dp" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="6"
android:textSize="25dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="+"
android:id="#+id/button13"
android:textSize="25dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
android:textSize="25dp" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="2"
android:textSize="25dp" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="3"
android:textSize="25dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:text="0"
android:id="#+id/button4"
android:textSize="25dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="."
android:id="#+id/button"
android:textSize="25dp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="="
android:id="#+id/button12"
android:layout_toRightOf="#+id/button5"
android:layout_below="#+id/button8"
android:layout_alignParentBottom="true"
android:textSize="25dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I have a layout which looks perfect in portrait mode but looks worst in landscape mode, I also created different folder for landscape. Still now able to make it perfect for all screens in landscape.
Here is the xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top|center"
android:orientation="vertical"
android:padding="5dp" >
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/gray"
android:gravity="center" >
<TextView
android:id="#+id/head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/imageView1"
android:layout_alignParentTop="true"
android:layout_marginBottom="10dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="#+id/imageView1"
android:text="Choose Mode"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/question_image" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/menu_image" />
</RelativeLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/button1"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/button2"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="2" />
<Button
android:id="#+id/button3"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="3" />
<Button
android:id="#+id/button4"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="4" />
<Button
android:id="#+id/button5"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="5" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/button6"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="6" />
<Button
android:id="#+id/button7"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
<Button
android:id="#+id/button8"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="8" />
<Button
android:id="#+id/button9"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="9" />
<Button
android:id="#+id/button10"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/button11"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="8" />
<Button
android:id="#+id/button12"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
<Button
android:id="#+id/button13"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="9" />
<Button
android:id="#+id/button14"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
<Button
android:id="#+id/button15"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="8" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/button16"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
<Button
android:id="#+id/button17"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
<Button
android:id="#+id/button18"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
<Button
android:id="#+id/button19"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
<Button
android:id="#+id/button20"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/button21"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
<Button
android:id="#+id/button22"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
<Button
android:id="#+id/button23"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
<Button
android:id="#+id/button24"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
<Button
android:id="#+id/button25"
style="#style/box_sky_blue"
android:layout_weight="1"
android:text="7" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:gravity="center" >
<ImageView
android:id="#+id/imageButton1"
android:layout_width="40dp"
android:layout_height="fill_parent"
android:layout_weight="0.25"
android:background="#drawable/reset" />
<ImageView
android:id="#+id/imageButton2"
android:layout_width="40dp"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_weight="0.25"
android:background="#drawable/check_solution" />
<ImageView
android:id="#+id/imageButton3"
android:layout_width="40dp"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_weight="0.25"
android:background="#drawable/hint" />
<ImageView
android:id="#+id/imageButton4"
android:layout_width="40dp"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_weight="0.25"
android:background="#drawable/next" />
</LinearLayout>
</LinearLayout>
</ScrollView>
For portrait
For Landscape
Do i need to remove the weight from those four icons, help me out :(
The main problem I see is the ImageView's.
First off , never use "fill_parent" values since they are deprecated, instead use "match_parent".
Then, you need to remove weight property from them aswell. That's why they try to fill the screen by stretching which makes them look out of proportion.
Use fixed dp (density pixel) size (width/height) for the images, so that they maintain a proportion, no matter the size or the display quality.
You can then, use different sizes and element display for both landscape and portrait using layout and layout-land folders, both storing different layout compositions with the same name so that they get called by the android framework depending on orientation.
You have official documentation about supporting multiple screen sizes / orientation (more specifically) here.
on the imageview of last 4 button add this attributes -
android:adjustViewBounds="true"
android:scaleType="fitCenter"
I used several RelativeLayouts within one LinearLayout. And the RelativeLayout used for buttons caused improper appearance as seen below:
This is my .xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/wood"
android:orientation="vertical"
android:padding="25dp" >
<RelativeLayout
android:id="#+id/relative"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/button1"
android:text="Button" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/button2"
android:text="Button" />
<Button
android:id="#+id/button4"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relative2"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/btn5"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="#+id/btn8"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="#+id/btn7"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/btn8"
android:text="Button" />
<Button
android:id="#+id/btn6"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/btn7"
android:text="Button" />
</RelativeLayout>
</LinearLayout>
How can I align my buttons properly and nicely without using Grid View since it requires additional library and API 14 and above? Thank you.
Instead of RelativeLayouts use LinearLayouts horizontally oriented:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/wood"
android:orientation="vertical"
android:padding="25dp" >
<LinearLayout
android:id="#+id/relative"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:id="#+id/relative2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/btn5"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/btn8"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/btn7"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/btn6"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
Here is my xml file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="15dp"
android:paddingRight="15dp"
tools:context=".MainActivity" >
<TextView
android:id="#+id/ResultText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:textSize="20sp"
android:layout_marginTop="5dp"
android:background="#EEEEEE" />
<TextView
android:id="#+id/InputText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/ResultText"
android:layout_below="#+id/ResultText"
android:background="#BBBBBB"
android:gravity="right"
android:textColor="#FFFFFF"
android:layout_marginTop="4dp"
android:textSize="15sp" />
<Button
android:id="#+id/button5"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button1"
android:layout_below="#+id/button1"
android:text="5" />
<Button
android:id="#+id/button7"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button3"
android:layout_alignTop="#+id/button6"
android:text="7" />
<Button
android:id="#+id/button8"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button4"
android:layout_alignTop="#+id/button7"
android:text="8" />
<Button
android:id="#+id/button9"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button5"
android:layout_below="#+id/button5"
android:text="9" />
<Button
android:id="#+id/buttonMultiply"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/buttonDivide"
android:text="x" />
<Button
android:id="#+id/buttonSubtract"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonAdd"
android:layout_alignBottom="#+id/buttonAdd"
android:layout_alignParentRight="true"
android:text="-" />
<Button
android:id="#+id/buttonDivide"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button8"
android:layout_alignBottom="#+id/button8"
android:layout_alignLeft="#+id/buttonAdd"
android:text="/" />
<Button
android:id="#+id/buttonAdd"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button4"
android:layout_alignBottom="#+id/button4"
android:layout_toLeftOf="#+id/buttonSubtract"
android:text="+" />
<Button
android:id="#+id/button4"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button8"
android:layout_toLeftOf="#+id/buttonDivide"
android:text="4" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button7"
android:layout_toLeftOf="#+id/button8"
android:text="3" />
<Button
android:id="#+id/buttonDot"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button0"
android:layout_alignBottom="#+id/button0"
android:layout_alignLeft="#+id/button7"
android:text="." />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button3"
android:layout_alignBottom="#+id/button3"
android:layout_toLeftOf="#+id/button3"
android:text="2" />
<Button
android:id="#+id/button6"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button0"
android:layout_toLeftOf="#+id/button7"
android:text="6" />
<Button
android:id="#+id/button0"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button9"
android:layout_alignBottom="#+id/button9"
android:layout_alignLeft="#+id/button6"
android:text="0" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/InputText"
android:layout_marginTop="26dp"
android:layout_toLeftOf="#+id/button2"
android:text="1" />
<Button
android:id="#+id/buttonEqual"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonDot"
android:layout_alignBottom="#+id/buttonDot"
android:layout_alignRight="#+id/buttonMultiply"
android:layout_toRightOf="#+id/button8"
android:text="=" />
<Button
android:id="#+id/buttonDel"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/buttonDot"
android:layout_toRightOf="#+id/buttonDot"
android:text="del" />
<Button
android:id="#+id/buttonSin"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button9"
android:layout_below="#+id/button9"
android:text="sin" />
<Button
android:id="#+id/buttonCos"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button0"
android:layout_alignTop="#+id/buttonSin"
android:text="cos" />
<Button
android:id="#+id/buttonTan"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonDot"
android:layout_alignTop="#+id/buttonCos"
android:text="tan" />
<Button
android:id="#+id/buttonCot"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/buttonSec"
android:text="cot" />
<Button
android:id="#+id/buttonSec"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonCosec"
android:layout_alignBottom="#+id/buttonCosec"
android:layout_toLeftOf="#+id/buttonCot"
android:text="sec" />
<Button
android:id="#+id/buttonCosec"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonTan"
android:layout_alignBottom="#+id/buttonTan"
android:layout_toLeftOf="#+id/buttonSec"
android:layout_marginLeft="1dp"
android:text="csec" />
<Button
android:id="#+id/buttonPow"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonSin"
android:layout_below="#+id/buttonSin"
android:layout_alignRight="#+id/buttonSin"
android:gravity="left"
android:textSize="10sp"
android:text="yX" />
<Button
android:id="#+id/buttonLog10"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/buttonPow"
android:layout_toRightOf="#+id/buttonPow"
android:text="log" />
<Button
android:id="#+id/buttonLoge"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonLog10"
android:layout_alignBottom="#+id/buttonLog10"
android:layout_toRightOf="#+id/buttonLog10"
android:text="ln" />
<Button
android:id="#+id/buttonSquare"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/buttonLoge"
android:layout_toRightOf="#+id/buttonLoge"
android:text="sqr" />
<Button
android:id="#+id/buttonSqrt"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/buttonSquare"
android:layout_toRightOf="#+id/buttonSquare"
android:text="sqrt" />
<Button
android:id="#+id/buttonFactorial"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/buttonSqrt"
android:text="x!" />
<Button
android:id="#+id/buttonSinh"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonPow"
android:layout_below="#+id/buttonPow"
android:layout_toLeftOf="#+id/buttonLoge"
android:text="sinh" />
<Button
android:id="#+id/buttonCosh"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonSinh"
android:layout_alignBottom="#+id/buttonSinh"
android:layout_alignLeft="#+id/buttonLoge"
android:layout_toLeftOf="#+id/buttonSqrt"
android:text="cosh" />
<Button
android:id="#+id/buttonTanh"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonSqrt"
android:layout_alignRight="#+id/buttonFactorial"
android:layout_alignTop="#+id/buttonCosh"
android:text="tanh" />
</RelativeLayout>
here are some screen shots:
As you can see the left portion is not filled completely it is on a 4.65 inch xhdpi screen
On a 4 inch hdpi screen its perfect covering full width and full height
Basically, what Ben Pearson suggested, you can use TableLayout and several TableRow layouts. For example, a single row layout XML might look like this:
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button5"
style="?android:attr/buttonStyleSmall"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:id="#+id/button6"
style="?android:attr/buttonStyleSmall"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="6" />
<Button
android:id="#+id/button7"
style="?android:attr/buttonStyleSmall"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:id="#+id/button8"
style="?android:attr/buttonStyleSmall"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="8" />
<Button
android:id="#+id/buttonDivide"
style="?android:attr/buttonStyleSmall"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="/" />
<Button
android:id="#+id/buttonMultiply"
style="?android:attr/buttonStyleSmall"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="x" />
</TableRow>
Note that since TableRow is a subclass of LinearLayout, it understands the layout_weight attribute on its children. Set the layout_width to 0dp and layout_weight to 1 on each button (or 2, for some buttons).
I have set up 4 linear layouts: 2 vertical ones, side by side and 2 horizontal ones, arranged vertically.
This will give me a total of 3 vertical ones.
Then end goal is to have one layout for multiple screen sizes.
I set the weight of all 4 layouts to "1" to fill evenly.
I have tried to use android:layout_height="wrap_content", but it does not fill the entire background.
If I use android:layout_height="fill_parent", the layouts get clipped.
Here is screenshot of "wrap_content"
Here is screenshot of "fill_parent"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff606060"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".SimpleRGB_Main" >
<LinearLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:layout_weight="1"
android:text="Scene 1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button1"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button2"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 3" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button3"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 4" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button4"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 5" />
</LinearLayout>
<LinearLayout
android:id="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/relativeLayout1"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_toRightOf="#+id/button1"
android:layout_weight="1"
android:text="Scene 6" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button6"
android:layout_toRightOf="#+id/button2"
android:layout_weight="1"
android:text="Scene7" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button7"
android:layout_toRightOf="#+id/button3"
android:layout_weight="1"
android:text="Scene8" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button8"
android:layout_toRightOf="#+id/button4"
android:layout_weight="1"
android:text="Scene9" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button9"
android:layout_toRightOf="#+id/button5"
android:layout_weight="1"
android:text="Scene10" />
</LinearLayout>
<LinearLayout
android:id="#+id/relativeLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/relativeLayout1"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="RECORD" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="PLAY" />
</LinearLayout>
<LinearLayout
android:id="#+id/relativeLayout4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/relativeLayout3"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="RECORD1" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="PLAY1" />
</LinearLayout>
Here is what I am trying to attempt. Green is the layouts filled with buttons and or widgets.
Putting layout weights on children of RelativeLayout does not work. Weights only work on LinearLayout (that is, children of linear layout, not linear layout itself). Try starting by making your root layout linear, not RelativeLayout.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff606060"
android:weightSum="6"
android:layout_gravity="fill_horizontal|center_vertical"
tools:context=".SimpleRGB_Main" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:weightSum="2"
android:layout_weight="1">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:layout_weight="1"
android:text="Scene 1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button1"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 6" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:weightSum="2">
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button2"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 2" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button3"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 7" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:weightSum="2">
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button4"
android:layout_marginLeft="0dp"
android:layout_weight="1"
android:text="Scene 3" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_toRightOf="#+id/button1"
android:layout_weight="1"
android:text="Scene 8" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:weightSum="2">
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button6"
android:layout_toRightOf="#+id/button2"
android:layout_weight="1"
android:text="Scene 4" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button7"
android:layout_toRightOf="#+id/button3"
android:layout_weight="1"
android:text="Scene 9" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="2"
android:layout_weight="1">
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button8"
android:layout_toRightOf="#+id/button4"
android:layout_weight="1"
android:text="Scene 5" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button9"
android:layout_toRightOf="#+id/button5"
android:layout_weight="1"
android:text="Scene 10" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:weightSum="2">
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="RECORD" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="RECORD 1" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:weightSum="2">
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="PLAY " />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="PLAY 1" />
</TableRow>
</TableLayout>
graphical view