Akshay Pethani Akshay Pethani - 5 months ago 12
Android Question

Put buttons with Equal margins on both left and right side in Android

I am new to Android. I want to put 4 buttons horizontally with equal margins with both left and right side as shown in the wire-frame diagram below:

enter image description here

I searched a lot on Google and Stackoverflow also. like to set android:layout_weight="1" . But it only sets equal margin from left-side. I want to set it on both sides and on multiple screen layouts. I want to know which layout and properties should be applied for this. I am using in Android studio and mostly used Drag-Drop method for design.

Currently I've XML layout as follows:

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/frameLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="10dp"
android:id="@+id/relativeLayout">

<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:id="@+id/b3"
android:layout_gravity="left|center_vertical"
android:onClick="buttonThree"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="true"
android:layout_alignParentRight="false"
android:layout_weight="1"
android:width="0dp" />

<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:id="@+id/b5"
android:layout_gravity="left|center_vertical"
android:onClick="buttonFive"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/b3"
android:layout_toEndOf="@+id/b3"
android:layout_alignParentRight="false"
android:layout_alignParentLeft="false"
android:layout_weight="1"
android:width="0dp"
android:layout_alignParentBottom="false" />

<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:id="@+id/b7"
android:layout_gravity="left|center_vertical"
android:onClick="buttonSeven"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/b5"
android:layout_toEndOf="@+id/b5"
android:layout_alignParentRight="false"
android:layout_weight="1"
android:width="0dp" />

<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:id="@+id/b9"
android:layout_gravity="left|center_vertical"
android:onClick="buttonNine"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/b7"
android:layout_toEndOf="@+id/b7"
android:layout_alignParentRight="false"
android:layout_weight="1"
android:width="0dp" />

</RelativeLayout>

Answer

Layout weight works with LinearLayout, each view in linearlayout will take designeatedweight/weightsum times total width or height.

Move your buttons into linear layout with weight sum to 4. Assigning weight of buttons to 1 will make them take 1/4 th of screen space automatically. For equal spacing allocating margin to linear layout will make them look equally spaced.

    <Button
        android:id="@+id/b3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:onClick="buttonThree"
        android:text="3" />

    <Button
        android:id="@+id/b5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"

        android:layout_weight="1"
        android:onClick="buttonFive"
        android:text="5" />

    <Button
        android:id="@+id/b7"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:onClick="buttonSeven"
        android:text="7" />

    <Button
        android:id="@+id/b9"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:onClick="buttonNine"
        android:text="9" />

</LinearLayout>

Result

enter image description here