Android layout of a menu to fill screen with buttons - android

I have a 3 by 3 stack of buttons which i want to make into a menu,
How can i lay them out so that they automatically fill the screen ? eg if there are 3 in a row each one will take up a third etc.
here is my xml code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"/>
<ImageButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:contentDescription="Food"/>
<ImageButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<ImageButton
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<ImageButton
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<ImageButton
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<ImageButton
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>

Try this code.
In this code I set equal weight[1] for three linear layout rows. And in each linearlayout I set equal weight[1] to each buttons or imageviews.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher"/>
<ImageButton
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher"
android:contentDescription="Food"/>
<ImageButton
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/ic_launcher"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<ImageButton
android:id="#+id/button5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<ImageButton
android:id="#+id/button6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/button7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<ImageButton
android:id="#+id/button8"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<ImageButton
android:id="#+id/button9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>

You can use weighting. See the docs for LinearLayout params.
Basically if you have a LinearLayout that takes up the whole width, with three buttons in it, you can set weight on all the buttons to 1 and they will fill the layout taking up equal space.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="3" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3" >
<ImageButton
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/ic_launcher"
android:contentDescription="Food" />
<ImageButton
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3" >
<ImageButton
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
<ImageButton
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
<ImageButton
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3" >
<ImageButton
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
<ImageButton
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
<ImageButton
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>

Related

Android: Place 4 buttons on RelativeLayout

I am trying to place 4 buttons to fill all the relative layout.. I want each button have width and height till the center of the RelativeLayout (with about 2dp space between them).. I don't think that I can explain it very good, so I have made an image and here is the code I have made... Any ideas?? Thank you!! The view right now is:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:textAlignment="center"
android:textSize="30sp"
android:layout_marginTop="10dp"
android:id="#+id/textView" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="35dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:id="#+id/relativeLayout"
android:weightSum="1">
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button4"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
Try this code. I used two linear layouts instead of one relative layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="TextView"
android:textAlignment="center"
android:textSize="30sp" />
<LinearLayout
android:orientation="horizontal"
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Button" />
</LinearLayout>
</LinearLayout>
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:text="TextView"
android:textAlignment="center"
android:textSize="30sp" />
<LinearLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="5dp"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="5dp"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="5dp"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="5dp"
android:text="Button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Android Linear Layout Suggestion

How do I get buttons to lay on the screen most optimally distributed and centered on the screen as follows:
The nearest I am able to get is this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal"
>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button3" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button4" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button5"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button6"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button7"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button8"
android:layout_weight="1"/>
</LinearLayout>
Use a relativeLayout for the 3 linearLayouts.
To place the 3 linears below eachother use:
android:layout_below="#+id/linearLayout1"
and
android:layout_below="#+id/linearLayout2"
To center the linears use:
android:layout_centerInParent="true"
android:layout_gravity="center_vertical"
That will give you something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_below="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center_vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button7" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_below="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center_vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button8" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button4" />
</LinearLayout>
Unfortunately it is not showing the last line which is </RelativeLayout>

How to stretch the component to match the width of parent components in Android layout?

Below is the layout I designed.
Here is my code:
<LinearLayout
android:id="#+id/digitRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/login_button_1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/login_button_2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/login_button_3" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_4" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_5" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_6" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_7" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_8" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_9" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_clear" />
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_0" />
<Button
android:id="#+id/buttonBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_back" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="#+id/buttonChange"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_dhange" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_disable" />
</LinearLayout>
The problem is that I want to stretch the bottom two buttons, "Change" and "Back", to match the width of the buttons above.
You can use weight on both of them, like this:
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="#+id/buttonChange"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_dhange" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_disable" />
You probably want something like the code below.
I used a hard coded button width, but you probably want to put this in dimen.xml and reference it. I centered everything with gravity.
I tried this with weights as well, but the re-sizing is funny. As your screen gets wider the buttons get two wide.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/digitRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="1" />
<Button
android:id="#+id/button2"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="2" />
<Button
android:id="#+id/button3"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="3" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button4"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="#+id/button5"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:id="#+id/button6"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="6" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button7"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:id="#+id/button8"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="8" />
<Button
android:id="#+id/button9"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="9" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonClear"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Clear" />
<Button
android:id="#+id/button0"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="0" />
<Button
android:id="#+id/buttonBack"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Back" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp"
android:gravity="center_horizontal"
>
<Button
android:id="#+id/buttonChange"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="Change" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="Disable" />
</LinearLayout>
Try to use weight like below. Also use margins to tweak the positions of the buttons.
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="#+id/buttonChange"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_dhange" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_disable" />

How to fill remaining space in layout?

I have these button like shown on the picture below, and I want them to arrange themselve so they begin at the top of the layout and end at the bottom, and also auto arrange space in between. How to do that?
My xml 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="#drawable/background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="360dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="50"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="5dp" >
<Button
android:id="#+id/bA1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A1"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A2"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A3"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A4"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A5"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A6"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A7"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bA8"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="A8"
android:background="#drawable/buttons" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="50"
android:gravity="top"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="10dp" >
<Button
android:id="#+id/bB1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/buttons"
android:text="B1" />
<Button
android:id="#+id/bB2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B2"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bB3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B3"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bB4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B4"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bB5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B5"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bB6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B6"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bB7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B7"
android:background="#drawable/buttons" />
<Button
android:id="#+id/bB8"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="B8"
android:background="#drawable/buttons" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
Use weight. Some sample code follows.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:padding="48dp"
android:weightSum="4" >
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="button 1" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="button 2" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="button 3" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="button 4" />
</LinearLayout>
The code android:weightSum="4"will say to use a "weight" of 4, and each child here use 1 of that weight, a procentual value (25%). You could alter the weightSum and the weight of each child and thus giving each child a percentage width or height. Use 0dp to manipulate the dimension.
Try this.. its working for me.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:baselineAligned="false"
android:orientation="horizontal"
android:layout_weight="8" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="5dp"
android:weightSum="8" >
<Button
android:id="#+id/bA1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A1" />
<Button
android:id="#+id/bA2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A2" />
<Button
android:id="#+id/bA3"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A3" />
<Button
android:id="#+id/bA4"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A4" />
<Button
android:id="#+id/bA5"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A5" />
<Button
android:id="#+id/bA6"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A6" />
<Button
android:id="#+id/bA7"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A7" />
<Button
android:id="#+id/bA8"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="A8" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="10dp"
android:weightSum="8" >
<Button
android:id="#+id/bB1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B1" />
<Button
android:id="#+id/bB2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B2" />
<Button
android:id="#+id/bB3"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B3" />
<Button
android:id="#+id/bB4"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B4" />
<Button
android:id="#+id/bB5"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B5" />
<Button
android:id="#+id/bB6"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B6" />
<Button
android:id="#+id/bB7"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B7" />
<Button
android:id="#+id/bB8"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:drawable/dialog_frame"
android:text="B8" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:background="#android:drawable/dark_header"
android:layout_weight="1" />
Now it will look like
As i added Header and Footer also.

Evenly spaced out row of buttons required

Using 3 rows and 4 columns I have tried to evenly space out all the buttons horizontally but have failed. vertically is fine.
Below are 3 different attempts to space out the buttons, 1 for each of my 3 rows. The first row stretches the graphic (which is unwanted), the second row does not stretch but there is no spacing (spacing between the graphics is required), while the third stretches without any spacing. Please help me to evenly space these out. Other peoples solutions on this same site have not worked. Should I try using a table instead?
Visual summary= without stretching the graphic:
I want | x x x x |
and not | xxxx |
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight=".1" >
</View>
<Button
android:id="#+id/a1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/blanktilesml"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/clear64" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight=".1" >
</View>
<Button
android:id="#+id/a2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/blanktilesml"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/clear64" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight=".1" >
</View>
<Button
android:id="#+id/a3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/blanktilesml"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/clear64" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight=".1" >
</View>
<Button
android:id="#+id/a4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/blanktilesml"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/clear64" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight=".1" >
</View>
</LinearLayout>
<LinearLayout
android:id="#+id/row2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/b1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/blanktilesml"
android:gravity="center"
android:src="#drawable/clear64" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/b2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/blanktilesml"
android:gravity="center"
android:src="#drawable/clear64" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/b3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/blanktilesml"
android:gravity="center"
android:src="#drawable/clear64" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/b4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/blanktilesml"
android:gravity="center"
android:src="#drawable/clear64" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/row3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="1" >
<Button
android:id="#+id/c1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:background="#drawable/blanktilesml"
android:paddingLeft="10dp"
android:src="#drawable/clear64" />
<Button
android:id="#+id/c2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:background="#drawable/blanktilesml"
android:paddingLeft="10dp"
android:src="#drawable/clear64" />
<Button
android:id="#+id/c3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:background="#drawable/blanktilesml"
android:paddingLeft="10dp"
android:src="#drawable/clear64" />
<Button
android:id="#+id/c4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:background="#drawable/blanktilesml"
android:paddingLeft="10dp"
android:src="#drawable/clear64" />
</LinearLayout>
</LinearLayout>
Try this:
<LinearLayout
android:id="#+id/row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageButton
android:id="#+id/a1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/arrow_up_float"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageButton
android:id="#+id/a2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/arrow_up_float"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageButton
android:id="#+id/a3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/arrow_up_float"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageButton
android:id="#+id/a4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/arrow_up_float"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
try this for your first row. Similarly can be done for all the row,
So unless you don't want the images to be stretched you need to rap them in a layout. Doing so you will manage the spacing and the drawable will look just fine. If you stretch the buttons then the drawable will also be stretched accordingly.
Here is what I did with a calculator project I was working on. Requiring buttons in rows all the same size. You will need to add padding to your buttons to suit your needs.:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp"
android:id="#+id/NumberPad">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/NumberRow123"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/button1"
android:layout_weight="1"
android:background="#drawable/unpressed7"/>
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/button2"
android:layout_weight="1"
android:background="#drawable/unpressed8"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/button3"
android:layout_weight="1"
android:background="#drawable/unpressed9"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/NumerRow456"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/button4"
android:layout_weight="1"
android:background="#drawable/unpressed4"/>
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/button5"
android:layout_weight="1"
android:background="#drawable/unpressed5"/>
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/button6"
android:layout_weight="1"
android:background="#drawable/unpressed6"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:id="#+id/NumberRow789">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button7"
android:layout_weight="1"
android:background="#drawable/unpressed1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/button8"
android:layout_weight="1"
android:background="#drawable/unpressed2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/button9"
android:layout_weight="1"
android:background="#drawable/unpressed3"/>
</LinearLayout>

Categories

Resources