Position of buttons in LinearLayout

Question

I've added 5 buttons (see below), I need that reset button should be equally align as that of the above two buttons in order to maintain uniformity. Also I am not able to align submit button exact below of GoodButton.

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="2dp"
            android:layout_weight="0"
            android:text="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="4dp"
            android:layout_weight="0"
            android:text="1" />


        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_weight="0"
            android:background="@android:color/darker_gray"></View>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="4dp"
            android:layout_weight="2"
            android:text="Good" />
    </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_marginRight="4dp"
            android:layout_weight="1"
            android:text="Reset" />


        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_weight="0"
            android:background="@android:color/darker_gray"></View>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="4dp"
            android:layout_weight="1"
            android:text="Submit" />
    </LinearLayout>

</LinearLayout>

I feel it is due to extra layout margin space i have added on top buttons.

Use a RelativeLayout, for exact alignment. You can also get rid of the **layout nesting** — Phantômaxx, Jul 24 '15 at 07:31

score 2 · Accepted Answer · answered Jul 24 '15 at 07:35

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_weight="1"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">
            <Button android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"></Button>
            <Button android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"></Button>
        </LinearLayout>

        <Button android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"></Button>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_weight="1"
        android:layout_height="match_parent">
        <Button android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"></Button>
        <Button android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"></Button>
    </LinearLayout>

</LinearLayout>

Use it, exactly what you need

Nested weight may bring performance issue, http://stackoverflow.com/questions/9430764/why-are-nested-weights-bad-for-performance-alternatives — subair_a, Jul 24 '15 at 07:44
Just with depth of 2 doesn't matter much when it comes to perfection it suits for all resolutions. Desing is a lot simpler one, I hope it wont make much difference to him. Anyway its Yogesh's call... — Logic, Jul 24 '15 at 07:47
Not giving proper output . The above layout have 3 Buttons even if you equally weight them ..below once are getting a bit misplaced...and Whenever I am putting some padding its getting distorted — Yogesh, Jul 24 '15 at 07:50
I placed the 2 of 3 buttons in the top layout inside a LinearLayout and Button separately with equal weights so it will be equal. when comes to padding give equal padding to all buttons — Logic, Jul 24 '15 at 07:52
If it solved your problem.. can you upvote and mark it as answer — Logic, Jul 24 '15 at 07:56

score 0 · Answer 2 · answered Jul 24 '15 at 08:01

Using nested weight can bring performance issues. This design can easily be achieved by using Relative layout.

Check this code

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
    android:id="@+id/layout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="1"
    android:layout_margin="10dp">
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.25"
        android:text="1" />
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.25"
        android:text="2" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="5"
        android:text="3" />
</LinearLayout>

<LinearLayout
    android:layout_below="@+id/layout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="1"
    android:layout_margin="5dp">
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:text="4" />
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:text="5" />

</LinearLayout>

score 0 · Answer 3 · answered Jul 24 '15 at 13:20

your problem is that you are not distributing well the weight of the views. You must apply weight to both horizontal LinearLayout and then try to distribute the weight of their child views equally.

See my example above:

<LinearLayout 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:padding="5dp"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="2"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_weight="1">


    <Button
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_weight=".5"/>

    <Button
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_weight=".5" />
    </LinearLayout>


    <Button
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Good" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">


    <Button
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_marginRight="4dp"
        android:layout_weight="1"
        android:text="Reset" />



    <Button
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="Submit" />
</LinearLayout>

score 0 · Answer 4 · answered Jul 24 '15 at 16:53

You can also use a TableLayout like this:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="wrap_content">
    <TableRow>
        <Button
            android:layout_marginRight="2dp"
            android:text="1" />
        <Button
            android:layout_marginRight="4dp"
            android:text="1" />
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@android:color/darker_gray" />
        <Button
            android:layout_marginLeft="4dp"
            android:layout_weight="1"
            android:text="Good" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_marginRight="4dp"
            android:layout_span="2"
            android:text="Reset" />
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@android:color/darker_gray" />
        <Button
            android:layout_marginLeft="4dp"
            android:layout_weight="1"
            android:text="Submit" />
    </TableRow>
</TableLayout>

Position of buttons in LinearLayout

4 Answers4