Create a 8x32 array of ImageButtons programatically

Question

I am creating an app that will control a microcontroler via bluetooth. (It will be a 8x32 Led matrix). The idea is to create an 8 row 32 columns array of Imagebuttons each element represents on real LED on the board.

After some documentation I decided to use TableLayout and fill it with ImageButtons. But can't get it to work.

This is what I have done so far:

public class DrawerMode extends Activity implements View.OnTouchListener{
private static int numberOfColumns = 32;
private static int numberOfRows = 8;
private TableLayout tableLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    //Assign content
    setContentView(R.layout.activity_draw_mod);
    tableLayout = (TableLayout) findViewById(R.id.drawer_table);
    fillTable(numberOfColumns,numberOfRows, tableLayout);


}

private void fillTable(final int numberOfColumns,final int numberOfRows, TableLayout tableLayout) {
    //removing child views
    tableLayout.removeAllViews();
    TableLayout.LayoutParams params = new TableLayout.LayoutParams( TableLayout.LayoutParams.FILL_PARENT, TableLayout.LayoutParams.WRAP_CONTENT);

    //initiate rows
    TableRow[] tableRow = new TableRow[numberOfRows];
    for(int iter_R = 0; iter_R < numberOfRows; iter_R++){
        //fill rows with buttons
        tableRow[iter_R] = new TableRow(this);
        ImageButton[] imageButton = new ImageButton[numberOfColumns];
        for(int iter_C = 0; iter_C < numberOfColumns; iter_C++){
            imageButton[iter_C]  = new ImageButton(this);
            imageButton[iter_C].setBackgroundColor(Color.WHITE);
            imageButton[iter_C].setLayoutParams(params);

            //[iter_C]
            imageButton[iter_C].setOnTouchListener(this);
            imageButton[iter_C].setId(iter_C);
            imageButton[iter_C].setTag(iter_C);
            //add an instance of a button
            tableRow[iter_R].addView(imageButton[iter_C]);
        }
        //add instance of row
        tableLayout.addView(tableRow[iter_R]);
    }
}



@Override
public boolean onTouch(View v, MotionEvent event) {
    int selected_element = (Integer) v.getId();
    Toast.makeText(getApplicationContext(), "It's"+ selected_element, Toast.LENGTH_LONG).show();
    return false;
}
}

Here is the content of the xml file to:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_menu"
android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:background="@android:color/holo_green_dark">
<TextView
    android:id="@+id/draw_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/draw_mode_name"
    android:layout_centerHorizontal="true"
    android:textSize="24sp"
    android:textColor="@android:color/white"
    />
<TableLayout
    android:id="@+id/drawer_table"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_below="@id/draw_title"
    >

    </TableLayout>

What's the best way for me to do this?

What do you mean `But can't get it to work`? What's wrong with it? — eleven, Dec 14 '14 at 15:10
Nothing gets displayed. :( Added the xml file to, maybe I am missing something. — gabor zsolt, Dec 14 '14 at 15:13

score 0 · Answer 1 · answered Dec 14 '14 at 15:09

0

You can create 8 LinearLayout with id, then add 32 buttons to each of them.

answered Dec 14 '14 at 15:09

Patrick Chan

1,019
10
14

I don't want to repeat the code that many times, that's why I am trying to solve this programmatically. – gabor zsolt Dec 14 '14 at 15:16
What about having a vertical LinearLayout in the XML, then loop vertically to create horizontal LinearLayout, then loop horizontally to create buttons inside each horizontal Layout? – Patrick Chan Dec 14 '14 at 15:19
That could work, but I would like a direct and clear solution, without workarounds :). But I will keep in mind your idea to. – gabor zsolt Dec 14 '14 at 15:25

score 0 · Accepted Answer · edited May 23 '17 at 12:30

I can't accept any of the answers since they do not solve it with TableLayout. In the end after a more detailed search I have found a great tutorial for solving this:

Brian's Video Tutorials

Check the Dynamic Buttons and Images tutorial. All credit goes to Brian for this solution.

I have met a problem with this but kinda solved it to for my purpose which can be checked out here:

Scaling problem

Thank you both Patrick and Fox for their respective answers. If anyone can post another detailed solution with TableLayout, other then this one, I will accept that answer.

Create a 8x32 array of ImageButtons programatically

2 Answers2