space buttons out evenly horizontally android

Question

hi so i have found a lot of link to how to space buttons evently horizontally and i am looking to do it vertically so theyre evenly spaced and not all bunched up want :

---------------
|             |
|  button 1   |
|             |
|  button 2   |
|             |
|  button 3   |
|             |
---------------

am getting :

---------------
|             |
|  button 1   |
|  button 2   |
|  button 3   |
|             |
|             |
|             |
---------------

here is my code:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#fff">

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="8dp"
        android:layout_alignParentTop="true"
        android:layout_marginTop="25dp"
        android:layout_above="@+id/footer">
        <!-- Send Ticket Button -->
        <Button android:id="@+id/sendTicketButton"
                android:background="@drawable/bluebutton"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dip"
                android:isScrollContainer="false"
                android:padding="20dp"
                android:onClick="onClickSendTickets"
                style="@style/ButtonText"
                android:text="Send Ticket/s"
                android:layout_gravity="center"/>
        <!-- Manage Events Button -->
        <Button android:id="@+id/manageEventsButton"
                android:background="@drawable/bluebutton"
                android:layout_width="fill_parent"
                android:padding="20dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dip"
                android:isScrollContainer="false"
                android:onClick="onClickManageEvents"
                android:text="Manage Events"
                style="@style/ButtonText"
                android:layout_gravity="center"/>
        <!-- Finance Button -->
        <Button android:id="@+id/financeButton"
                android:background="@drawable/bluebutton"
                android:layout_width="fill_parent"
                android:padding="20dp"
                android:layout_height="wrap_content"
                android:isScrollContainer="false"
                android:gravity="center"
                android:onClick="onClickFinance"
                android:text="View Finances"
                style="@style/ButtonText"
                android:layout_gravity="center"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_marginTop="131dp"/>

    </LinearLayout>
    <!-- Registration Form Ends -->
</RelativeLayout>
</ScrollView>

Your `Finance Button` has the attributes `layout_alightParentRight` and `layout_alightParentTop` that don't apply to this view since its parent is a `LinearLayout`. Check eclipse for the warning symbols and what they say. — Vikram, Jul 20 '13 at 17:06
@vikram not using ecplise but cheers did pick up on that error! — cxzp, Jul 20 '13 at 17:51

score 2 · Accepted Answer · answered Jul 20 '13 at 16:47

There are a couple of ways around it depending on how you want to go about doing it. Perhaps the simples would be to input empty spacer views in between each of your other views and give them all the same weight, meaning that everything would end up equally sized. Your layout for this would look something like:

<LinearLayout
     android:layout_width="wrap_content"
     android:layout_height="wrap_content" >
     <Button
         android:layout_width="match_parent"
         android:layout_height="0px"
         android:layout_weight="1" />
     <View
         android:layout_width="match_parent"
         android:layout_height="0px"
         android:layout_weight="1" />
     <Button
         android:layout_width="match_parent"
         android:layout_height="0px"
         android:layout_weight="1" />
     <View
         android:layout_width="match_parent"
         android:layout_height="0px"
         android:layout_weight="1" />
     <Button
         android:layout_width="match_parent"
         android:layout_height="0px"
         android:layout_weight="1" />
</LinearLayout>

If you don't need them to take up the full amount of vertical space provided, you can use the layout_marginTop parameter on the first two and then just space them out that way.

score 0 · Answer 2 · answered Jul 20 '13 at 16:57

Add an android:layout_weight="1" to each button and add Views in between them

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dip"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="8dp"
    android:layout_alignParentTop="true"
    android:layout_marginTop="25dp"
    android:layout_above="@+id/footer">
    <!-- Send Ticket Button -->
    <Button android:id="@+id/sendTicketButton"
            android:background="@drawable/bluebutton"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dip"
            android:isScrollContainer="false"
            android:padding="20dp"
            android:onClick="onClickSendTickets"
            style="@style/ButtonText"
            android:text="Send Ticket/s"
            android:layout_gravity="center"/>
    <!-- Manage Events Button -->
    <View
     android:layout_width="match_parent"
     android:layout_height="0px"
     android:layout_weight="1" />
    <Button android:id="@+id/manageEventsButton"
            android:background="@drawable/bluebutton"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            android:padding="20dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dip"
            android:isScrollContainer="false"
            android:onClick="onClickManageEvents"
            android:text="Manage Events"
            style="@style/ButtonText"
            android:layout_gravity="center"/>
    <View
     android:layout_width="match_parent"
     android:layout_height="0px"
     android:layout_weight="1" />
    <!-- Finance Button -->
    <Button android:id="@+id/financeButton"
            android:background="@drawable/bluebutton"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            android:padding="20dp"
            android:layout_height="wrap_content"
            android:isScrollContainer="false"
            android:gravity="center"
            android:onClick="onClickFinance"
            android:text="View Finances"
            style="@style/ButtonText"
            android:layout_gravity="center"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginTop="131dp"/>

</LinearLayout>

This would give you want you want.

space buttons out evenly horizontally android

2 Answers2