Distribute a group of buttons evenly inside an Android Layout

Question

I have 12 buttons and they must be distributed evenly across the horizontal and vertical axis of a Layout. I cannot use GridLayout. This is how it should look:

Also, I don't want to get message about performance issues due to wrong use of the weight property. Right now I am trying to do it with a RelativeLayout, setting each buttons position in relation to the others but maybe there is a simpler/easier/more recommended way.

Buttons example

UPDATE

So, I decided to use a GridView and this is my code right now:

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/menuGrid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="32dp"
    android:numColumns="3"
    android:verticalSpacing="5dp"
    android:horizontalSpacing="5dp"
    android:stretchMode="spacingWidthUniform"
    android:gravity="fill" />

My adapter class is this:

public class GridAdapter extends BaseAdapter {
    // Different methods ...

    // Images for the buttons
    private Integer[] mThumbIds = {
        R.drawable.btn_1, R.drawable.btn_2, R.drawable.btn_3, 
        R.drawable.btn_4, R.drawable.btn_5, R.drawable.btn_6, 
        R.drawable.btn_7, R.drawable.btn_8, R.drawable.btn_9, 
        R.drawable.btn_10, R.drawable.btn_11, R.drawable.btn_12
    };

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageButton imageButton;
        if (convertView == null) {
            imageButton = new ImageButton(mContext);
            imageButton.setLayoutParams(new GridView.LayoutParams(48, 48));
            imageButton.setScaleType(ImageButton.ScaleType.CENTER_CROP);
        } else {
            imageButton = (ImageButton) convertView;
        }

        imageButton.setImageResource(mThumbIds[position]);
        return imageButton;
    }
}

In my main activity I am setting the adapter like this (they are centred and don't occupy the entire space):

GridView gridview = (GridView) v.findViewById(R.id.menuGrid);
gridview.setAdapter(new GridAdapter(this));

but the buttons are displayed like this (centered and small, instead of occupying the entire area):

Example 2

I'd also like to know. This is exactly the kind of thing it was designed to do. — indivisible, Jun 20 '14 at 14:42
Is `TableLayout` acceptable? Otherwise you could also use horizontal `LinearLayouts` inside vertical `LinearLayouts` or vice versa... but `GridLayout` would seem the best fit. — matiash, Jun 20 '14 at 14:43
But you could use a GridView... or can't you use even this one?! — Phantômaxx, Jun 20 '14 at 14:43
@matiash this would introduce **nested weights**, which are considered bad for performance. — Phantômaxx, Jun 20 '14 at 14:44
@DerGolem I was trying to provide alternatives :) But to learn, would that apply when the directions are not the same?? I though not. — matiash, Jun 20 '14 at 14:46
@matiash Yes, it would apply. And it is the only case (different "directions") where you'd use nesting weights... ;) — Phantômaxx, Jun 20 '14 at 14:47
There is a [support version](https://developer.android.com/reference/android/support/v7/widget/GridLayout.html) — indivisible, Jun 20 '14 at 14:51
Its backported to v7, look here: http://stackoverflow.com/questions/10278358/grid-layout-support-in-android-api-10 — RED_, Jun 20 '14 at 14:51
You can use 3 `LinearLayout`s with an vertical `orientation` for the columns and put them into a `RelativeLayout` (one aligned on the left, one aligned on the middle and the last one on the right). But I think the best option in your case is what you did (a single `RelativeLayout`). — G.T., Jun 20 '14 at 14:56

score 1 · Answer 1 · answered Jun 20 '14 at 15:19

1

I cannot use GridLayout

so use GridView >>> LINK <<<, available since API 1. Works just like a ListView (minus footer n header) and with a numColumns parameter

answered Jun 20 '14 at 15:19

Budius

39,391
16
102
144

score 0 · Answer 2 · answered Jun 20 '14 at 15:16

You can try:

GridLayout, which is available back to API Level 7 via a backport from the Android Support package's gridlayout-v7 library project
TableLayout, using android:stretchColumns to allocate space to all columns... but this will only work if the cells are themselves the same width
Nested LinearLayouts and android:layout_weight, as the concerns about performance may or may not be an issue for you (e.g., this is a single activity or fragment layout, not a row in a ListView)

And, you can always implement your own ViewGroup with your own business rules for sizing and positioning your child widgets.

What you are presently trying -- RelativeLayout -- seems unlikely to work in a fashion that will adapt to different screen sizes well.

Distribute a group of buttons evenly inside an Android Layout

2 Answers2