How can I draw 5x5 matrix of ImageButtons programmatically?

Question

I need ImageButtons to have equal height and width, with no spaces between one another like in the picture below, and there must not be such blank spaces at the beginning and at the end of matrix

Thank you very much! P.S. the code I used here was`

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="*" 
        android:layout_marginTop="-4.5dp"
        android:paddingBottom="-5dp"
        android:paddingLeft="-5dp"
        android:paddingRight="-5dp"
        android:paddingTop="-5dp" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
             >

            <ImageButton
                android:layout_height="fill_parent"
                android:id="@+id/ImageButton_11"
                android:layout_width="0dp"
                android:layout_weight="1"
                />

            <ImageButton
                android:id="@+id/ImageButton_12"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_marginLeft="-8.5dp"
                android:layout_weight="1" />

            <ImageButton
                android:id="@+id/ImageButton_13"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:layout_marginLeft="-8.5dp"
                />

            <ImageButton
                android:id="@+id/ImageButton_14"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_15"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:layout_marginLeft="-8.5dp"
                 />

        </TableRow>

                <TableRow
                    android:id="@+id/tableRow2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="-10dp" >

            <ImageButton
                android:id="@+id/ImageButton_21"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"

                android:layout_weight="1" />

            <ImageButton
                android:id="@+id/ImageButton_22"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                />

            <ImageButton
                android:id="@+id/ImageButton_23"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_24"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                />

            <ImageButton
                android:id="@+id/ImageButton_25"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="-10dp" >

            <ImageButton
                android:id="@+id/ImageButton_31"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"

                android:layout_weight="1" />

            <ImageButton
                android:id="@+id/ImageButton_32"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                />

            <ImageButton
                android:id="@+id/ImageButton_33"
                android:layout_width="0dp"
               android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                  android:layout_marginLeft="-8.5dp"
                  />

            <ImageButton
                android:id="@+id/ImageButton_34"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_35"
                android:layout_width="0dp"
               android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

        </TableRow>

                <TableRow
                    android:id="@+id/tableRow4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="-10dp"
                     >

            <ImageButton
                android:id="@+id/ImageButton_41"
                android:layout_width="0dp"
               android:scaleType="centerCrop"
                android:layout_height="fill_parent"

                android:layout_weight="1" />

            <ImageButton
                android:id="@+id/ImageButton_42"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                />

            <ImageButton
                android:id="@+id/ImageButton_43"
                android:layout_width="0dp"
               android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                />

            <ImageButton
                android:id="@+id/ImageButton_44"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_45"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

        </TableRow>

                <TableRow
                    android:id="@+id/tableRow5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="-10dp" >

            <ImageButton
                    android:id="@+id/ImageButton_51"
                    android:layout_width="0dp"
                    android:scaleType="centerCrop"
                    android:layout_height="fill_parent"

                    android:layout_weight="1" />

            <ImageButton
                android:id="@+id/ImageButton_52"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_53"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_54"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

            <ImageButton
                android:id="@+id/ImageButton_55"
                android:layout_width="0dp"
                android:scaleType="centerCrop"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                 android:layout_marginLeft="-8.5dp"
                 />

        </TableRow>
    </TableLayout>

    <ImageButton 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:id="@+id/refresh_ImageButton"

        />

</LinearLayout>

Now I want it to be done programmatically.

please add your code to question. you must remove any margin or padding. — Mohammad Hossein Gerami, Oct 25 '15 at 08:18
@HosseinGerami added one, but it was just an XML representation — BekaBot, Oct 25 '15 at 08:34
Don't you fill_parent it's deprecated, use match_parent instead. It's all the same — Ichor de Dionysos, Oct 25 '15 at 09:33

score 1 · Answer 1 · edited May 23 '17 at 11:58

Your xml file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="container"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >

</LinearLayout>

Your Java file:

LinearLayout container = (LinearLayout) activity.findViewById(R.id.container); 
TableLayout table = new TableLayout(activity);
LayoutParams matchWrap = new LinearLayout.LayoutParams(
                LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
LayoutParams zeroMatchOne = new TableRow.LayoutParams(
                0, LayoutParams.MATCH_PARENT, 1f);
for (int i=0; i<5; i++) {
  TableRow row = new TableRow(activity);
  row.setLayoutParams(matchWrap);
  for(int j=0; j<5; j++) {
    ImageButton image = new ImageButton(activity);
    image.setLayoutParams(zeroMatchOne);
    row.addView(image);
  }
  table.addView(row);
}

If you want to add an Id look here, the second answer should do it!

If you want to add margin or padding:

layoutParams.setMargins(int left, int top, int right, int bottom);
view.setPadding(int left, int top, int right, int bottom);

I know that it isn't exactly look like yours, but it should give you an idea of how to do it!

kirotab · Accepted Answer · 2015-10-25T12:43:54.463

With a little bit of delay my answer (very similar to the one above so I'm sorry but was looking for another way to remove the margin of the buttons :)

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    LinearLayout mainContainer = (LinearLayout)findViewById(R.id.main_container);

    int cols = 5;
    int rows = 5;


    //Params used for cells
    TableRow.LayoutParams params = new TableRow.LayoutParams(
            0, ViewGroup.LayoutParams.WRAP_CONTENT, 1.0f
    );
    int pixelsToDp = convertToPixelsDp(-4.5f);
    params.setMargins(pixelsToDp, pixelsToDp, pixelsToDp, pixelsToDp);

    //Params used for rows
    TableRow.LayoutParams rowParams = new TableRow.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT
    );
    rowParams.setMargins(0, 0, 0, 0);

    //Params used for table
    TableLayout.LayoutParams tableParams = new TableLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT
    );
    tableParams.setMargins(0, 0, 0, 0);

    //Table generation
    TableLayout table = new TableLayout(this);
    table.setLayoutParams(tableParams);
    table.setShowDividers(TableLayout.SHOW_DIVIDER_NONE);
    table.setStretchAllColumns(true);

    for(int i = 0; i < rows; i++){

        TableRow row = new TableRow(this);

        row.setShowDividers(TableRow.SHOW_DIVIDER_NONE);
        row.setLayoutParams(rowParams);

        for(int j = 0; j < cols; j++){

            ImageButton btn = new ImageButton(this);

            btn.setPadding(0, 0, 0, 0);
            btn.setLayoutParams(params);
            btn.setScaleType(ImageView.ScaleType.CENTER_CROP);

            //The button's background has the unneeded margin
            //so if you set correct background drawable I think
            //you might achieve what you want API lvl 16 above
            //btn.setBackground(null);

            //API Level 17 and above
            //If you want id's for some reason you could store them in
            //some kind of Dictionary or you could store the UI elements
            //to have access to them

            //int id = btn.generateViewId();
            //btn.setId(id);

            row.addView(btn);
        }

        table.addView(row);
    }

    mainContainer.addView(table);

}

public int convertToPixelsDp(float pixels){
    int px = (int)TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            pixels,
            this.getResources().getDisplayMetrics());
    return px;
}

Disclaimer - This is only to give you an idea, not solving the mentioned problem with the margins

I would advice you to create your buttons from base layout type like FrameLayout or LinearLayout etc... to have more control over them Here's what I did on a project of mine:

This code is using different drawables to define the states of my buttons which are just normal layout views, you could add more states in the selector if needed however I was using only pressed and normal.

So for each state defined in the selector another drawable file is used.

The given example is creating rounded borders for my buttons and giving them specified color

down_button_lesser_opacity_selector.xml in drawables

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Pressed -->
    <item 
        android:state_pressed="true"
        android:drawable="@drawable/down_button_lesser_opacity_red_pressed"
        />
<!-- Normal -->
    <item
        android:drawable="@drawable/down_button_lesser_opacity_red_normal"/>
</selector>

down_button_lesser_opacity_red_pressed.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="0dp" android:color="@color/transparent" />
    <solid android:color="#55FF0000"/>
    <corners 
        android:topLeftRadius="0dp" android:topRightRadius="0dp" 
        android:bottomLeftRadius="6dp" android:bottomRightRadius="6dp" 
        />
    <padding 
        android:left="6dp" android:top="0dp"
        android:right="6dp" android:bottom="6dp" 
        />
    </shape>

down_button_lesser_opacity_red_normal.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="0dp" android:color="@color/transparent" />
    <solid android:color="@color/feature_normal_item"/>
    <corners 
        android:topLeftRadius="0dp" android:topRightRadius="0dp" 
        android:bottomLeftRadius="6dp" android:bottomRightRadius="6dp" 
        />
    <padding 
        android:left="6dp" android:top="0dp"
        android:right="6dp" android:bottom="6dp" 
        />
</shape>

How do you use it:

Create FrameLayout and set the background to android:background="@drawable/down_button_lesser_opacity_selector"
Put ImageView inside and/or more controls(if you want to emulate image button or something else)

EDIT

Short addition that i missed the first time and some sample code to include the drawables

You need to set the frame layout to clickable
You need to change the colors from my example (I'm using colors defined in my styles). So put red in one drawable and blue in the other to see how it behaves

Put this in the place of button while generating

FrameLayout btn = new FrameLayout(this);
btn.setPadding(0, 0, 0, 0);
btn.setLayoutParams(new TableRow.LayoutParams(
    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT
));

TextView text = new TextView(this);
text.setText("Button: " + i + j);

btn.addView(text);
btn.setBackgroundResource(R.drawable.down_button_lesser_opacity_selector);
btn.setClickable(true);

EDIT 2

class MyFrameLayout extends FrameLayout
{
    MyFrameLayout(Context context){
        super(context);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh){
        Log.v("measure", "width:" + w + " height:" + h);
        if(w != h) {
            this.setLayoutParams(new TableRow.LayoutParams(
                    w, w
            ));

        }
    }
}

You could do the override in a better way to be more generic but for your case that will work

thank you for your answer :) I was loosing hope to solve it :D — BekaBot, Oct 25 '15 at 11:28
last thing, how can I set the height the cell to be equal to its width? Thank you — BekaBot, Oct 25 '15 at 11:56
I'm not an android expert but I can thing of two possible solutions 1 - Use square image and with correct type of scale type you should be able to achievethis. 2 - Extend the Layout class and override onResize method (I'll add this to my answer) — kirotab, Oct 25 '15 at 12:41

How can I draw 5x5 matrix of ImageButtons programmatically?

2 Answers2

Disclaimer - This is only to give you an idea, not solving the mentioned problem with the margins

EDIT

EDIT 2