Android layout of a menu to fill screen with buttons

Question

I have a 3 by 3 stack of buttons which i want to make into a menu, How can i lay them out so that they automatically fill the screen ? eg if there are 3 in a row each one will take up a third etc.

here is my xml code:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher"/>

    <ImageButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher"
        android:contentDescription="Food"/>

    <ImageButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher"
        />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <ImageButton
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <ImageButton
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <ImageButton
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <ImageButton
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

This is similar to what you want to do: http://stackoverflow.com/questions/16911758/how-to-equally-span-buttons-layouts-vertically-in-android/16911929#16911929 — PX Developer, Jul 24 '13 at 08:15

score 4 · Answer 1 · answered Jul 24 '13 at 08:18

Try this code. In this code I set equal weight[1] for three linear layout rows. And in each linearlayout I set equal weight[1] to each buttons or imageviews.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >

<ImageButton
    android:id="@+id/button1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@drawable/ic_launcher"/>

<ImageButton
    android:id="@+id/button2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@drawable/ic_launcher"
    android:contentDescription="Food"/>

<ImageButton
    android:id="@+id/button3"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@drawable/ic_launcher"
    />
</LinearLayout>

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >

<ImageButton
    android:id="@+id/button4"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Button" />

<ImageButton
    android:id="@+id/button5"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Button" />

<ImageButton
    android:id="@+id/button6"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Button" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="horizontal" >

<ImageButton
    android:id="@+id/button7"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Button" />

<ImageButton
    android:id="@+id/button8"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Button" />

<ImageButton
    android:id="@+id/button9"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Button" />
</LinearLayout>
</LinearLayout>

fill_parent is deprecated – Biagio Cannistraro Jul 24 '13 at 09:17 — Biagio Cannistraro, Jul 24 '13 at 09:17

Hein Andre Grønnestad · Accepted Answer · 2013-07-24T09:04:20.033

2

You can use weighting. See the docs for LinearLayout params.

Basically if you have a LinearLayout that takes up the whole width, with three buttons in it, you can set weight on all the buttons to 1 and they will fill the layout taking up equal space.

edited Jul 24 '13 at 09:04

answered Jul 24 '13 at 08:14

Hein Andre Grønnestad

6,885
2
31
43

Biagio Cannistraro · Answer 3 · 2013-07-24T08:32:51.843

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="3" >
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:weightSum="3" >
    <ImageButton
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/ic_launcher" />
    <ImageButton
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/ic_launcher"
        android:contentDescription="Food" />
    <ImageButton
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:weightSum="3" >
    <ImageButton
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="Button" />
    <ImageButton
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="Button" />
    <ImageButton
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="Button" />
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:weightSum="3" >
    <ImageButton
        android:id="@+id/button7"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="Button" />
    <ImageButton
        android:id="@+id/button8"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="Button" />
    <ImageButton
        android:id="@+id/button9"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="Button" />
</LinearLayout>

Android layout of a menu to fill screen with buttons

3 Answers3