Even Vertical Button Spacing Android

Question

How can I get this column to fill the screen evenly in a vertical direction. Or put another way I have 5 buttons and I want them evenly vertically spaced in this vertical column. See my pic for clarity of what I am trying to achieve.

The XML for the left column I have so far is this, but the buttons are grouped together and I can move the group to the top middle or bottom but what I really want is them to simply be spaced evenly vertically so they display correctly on multiple devices:

<GridLayout
        android:id="@+id/m1_btn_container"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="fill_vertical"
        android:layout_marginLeft="15dp"
        android:orientation="vertical"
        android:paddingBottom="10dp"
        android:paddingTop="10dp" >

        <ImageButton
            android:id="@+id/m1_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/pause" />

        <ImageButton
            android:id="@+id/m2_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/pause" />

        <ImageButton
            android:id="@+id/m3_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/pause" />

        <ImageButton
            android:id="@+id/m4_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/pause" />

        <ImageButton
            android:id="@+id/m5_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/pause" />
    </GridLayout>

I have tried this with LinearLayout too but cannot achieve what I am after. My XML above gives me this:

Can anyone help?

Answer 1

There are several ways to acheive the design as you asked in the question. I've showed you one way which can be achieved through TableLayout. Use of android:weightSum and android:layout_weightinside LinearLayout helps out to achieve the same.

The same can be achieved through GridLayout. Just try to play with different View which can make it possible to deploy the same as you asked for.

Achieved through TableLayout :

<?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">
    <TableLayout 
        android:layout_height="fill_parent"
        android:layout_width="wrap_content"
        android:weightSum="5"

        >

        <TableRow 
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            >
            <Button 
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:text="Button1"
                />
        </TableRow>

        <TableRow 
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            >
            <Button 
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:text="Button1"
                />
        </TableRow>
        <TableRow 
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            >
            <Button 
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:text="Button1"
                />
        </TableRow>
        <TableRow 
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            >
            <Button 
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:text="Button1"
                />
        </TableRow>
        <TableRow 
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:layout_weight="1"
            >
            <Button 
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
            android:text="Button1"
                />
        </TableRow>
    </TableLayout>


<Button
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="MediaPlayer" />

</LinearLayout>