Evenly spacing buttons android

Question

I'm currently working on an android application. I can't get buttons evenly spaced on a screen.

Below is my code.

    <?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:id="@+id/activity_main_menu"
    android:background="#354739"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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="com.example.cssdapp.MainMenuActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"
        />

    <Button
        android:text="Log Off"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#6b5847"
        android:id="@+id/logOff"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:text="Manage Farmers"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#6b5847"
        android:id="@+id/button4"
        android:layout_above="@+id/button5"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:text="My Account"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#6b5847"
        android:id="@+id/button5"
        android:layout_marginBottom="47dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:text="Manage Farmers"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#6b5847"
        android:id="@+id/button3"
        android:layout_above="@+id/button4"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="21dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:text="Order History"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#6b5847"
        android:id="@+id/button2"
        android:layout_above="@+id/button3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:text="Make an Order"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#6b5847"
        android:id="@+id/makeOrder"
        android:layout_above="@+id/button2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="36dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

I want the buttons evenly spaced down the screen below the image. At the minute the image is where I want to be however I can't get the buttons to where I want them to be. I'm trying to use the gui designer however they won't snap into place. I'm trying to figure out the code way to do it.

Any help appreciated.

Hi, this lines them up below however doesn't evenly space the buttons? — benjano, Mar 13 '17 at 11:39
and possible duplicated [here](http://stackoverflow.com/questions/24002753/android-put-element-below-another-element-and-align-at-bottom-of-screen) — , Mar 13 '17 at 11:41
I think you should wrap all your buttons in a LinearLayout and user weight in each one. https://developer.android.com/guide/topics/ui/layout/linear.html — FeleMed, Mar 13 '17 at 11:41

score 1 · Accepted Answer · answered Mar 13 '17 at 12:27

In Order to divide the buttons on the whole screen evenly and to maintain synchronization on all devices you need to use a LinearLayout as your parent View And and another LinearLayout as the parent for each button and apply to it the weight attribute to divide them evenly on the screen Cause you can't just apply the weight attribute on the button itself because the (height or width of it depends on if the layout orintation is horizontal or vertical will gets scaled to fill the whole space) here is a code snippet to demonstrate what am saying `

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main_menu"
    android:layout_marginBottom="@dimen/activity_vertical_margin"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_marginRight="@dimen/activity_horizontal_margin"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:baselineAligned="false"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center">

        <Button
            android:id="@+id/logOff"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Log Off"
            android:textAllCaps="false"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/button4"
            android:text="Manage Farmers"
            android:textStyle="bold"
            android:textAllCaps="false"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center">
        <Button
            android:text="My Account"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/button5"
            android:textAllCaps="false"
            android:textStyle="bold"/>
    </LinearLayout>



    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center">
        <Button
            android:text="Order History"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/button2"
            android:textAllCaps="false"
            android:textStyle="bold"/>
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center">
        <Button
            android:text="Make an Order"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/makeOrder"
            android:textAllCaps="false"
            android:textStyle="bold"/>
    </LinearLayout>
</LinearLayout>`

score 0 · Answer 2 · answered Mar 13 '17 at 12:01

I have done some changes, Please check if it works for you

<?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:id="@+id/activity_main_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#354739"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="23dp"
        android:src="@drawable/ic_android_black_24dp"/>

    <Button
        android:id="@+id/logOff"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iv"
        android:layout_marginTop="23dp"
        android:background="#6b5847"
        android:text="Log Off"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button5"
        android:layout_marginTop="23dp"
        android:background="#6b5847"
        android:text="Manage Farmers"/>

    <Button
        android:id="@+id/button4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/logOff"
        android:layout_marginTop="23dp"
        android:background="#6b5847"
        android:text="Manage Farmers"/>

    <Button
        android:id="@+id/button5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button4"
        android:layout_marginTop="23dp"
        android:background="#6b5847"
        android:text="My Account"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button5"
        android:layout_marginTop="23dp"
        android:background="#6b5847"
        android:text="Order History"/>

    <Button
        android:id="@+id/makeOrder"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button2"
        android:layout_marginTop="23dp"
        android:background="#6b5847"
        android:text="Make an Order"/>
</RelativeLayout>

Hi,that works however I want make an order at the top and log off at the bottom. When trying to change the variable names etc it doesn't like it and crashes. — benjano, Mar 13 '17 at 12:22

Evenly spacing buttons android

2 Answers2