Distribute a group of buttons evenly inside an Android Layout

432 Views Asked by At

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

2

There are 2 best solutions below

0
On

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.

0
On

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