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>
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.
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.
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
android:layout_width="fill_parent"
in the buttons themselvesIf you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With