Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Evenly spaced button in Layout

I'm trying to make 4 buttons, evenly spaced in a portrait view on Android.

The space should scale up and down depending on the screen size, with an even amount of space between each button and the borders.

I tried using linear layout, weight and layout gravity but it seems that I cannot center the button vertically.

Is this a bug of Android layout? More probably is just me.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="center"
>
<Button
android:id="@+id/btn_f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn_f"
>
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="center"
>
<Button
android:id="@+id/btn_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn_b"
>
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="center"
>
<Button
android:id="@+id/btn_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn_a"
>
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="center"
>
<Button
android:id="@+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
>
</Button>
</LinearLayout>
</LinearLayout>
like image 548
Mascarpone Avatar asked Jan 24 '11 13:01

Mascarpone


3 Answers

Try something like this:

<?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:layout_width="wrap_content"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        >
        <Button
            android:id="@+id/btn_f"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="btn_f"
            />
    </LinearLayout>
    <!-- etc -->
</LinearLayout>

The changes from your original layout are that each inner LinearLayout has a height of zero and a gravity (not layout_gravity) of center. This should cause all the inner linear layouts to have the same height, evenly splitting the parent height, without stretching the buttons themselves.

like image 139
Ted Hopp Avatar answered Oct 28 '22 23:10

Ted Hopp


Try this:

 <LinearLayout         
  android:layout_width="wrap_content"         
  android:layout_height="0dp"         
  android:orientation="horizontal"         
  android:weightSum="1"         
  android:gravity="center">
     <Button             
        android:id="@+id/btn_f"    
        android:layout_width="0dp" 
        android:layout_weight="0.5" 
        android:layout_height="wrap_content"      
        android:text="btn_f" />     
 </LinearLayout> 

This will set the button to occupy only half of the screens length.

like image 42
Anand Sainath Avatar answered Oct 29 '22 00:10

Anand Sainath


You seem to be wrapping all buttons in another LinearLayout instead of just keeping them in the parent LinearLayout.

Remove all those immediate LinearLayout so that android:layout_weight takes effect.


To achieve stretching and spacing

  • use android:layout_width="fill_parent" in the buttons themselves
  • specify margin for spacing
like image 32
Aliostad Avatar answered Oct 28 '22 23:10

Aliostad