How to make a 4x4 grid of imagebuttons in android?

Question

I've spent a few weeks looking around for how to do this, and have come across things like this and this, but it seems a couple years old/ I'm having trouble understanding how to apply it to what I need.

All I want is to have my imagebuttons in a 4x4 grid on the screen and each button to start a similar activity but with different data. (its a flash-card type of thing, but each card will have different text). It seems like this should be really simple, but with this being my first android app, and my first exposure to xml and java directly, I feel like I'm getting lost.

What is a good way to implement this? I'm not particularly attached to doing a gridView, and am open to anything that works.

Kinda Like this:

Which part *exactly* are you stuck on? Making the grid (looks like that's done)? If it's creating the activities then just have one activity and pass data through an `Intent` to know which button was pressed and do your functionality in the next activity accordingly. — codeMagic, Sep 05 '16 at 20:19
Looks done b/c the "screenshot" was done in Adobe Illustrator :) — Mike, Sep 05 '16 at 20:23

score 2 · Answer 1 · edited Jul 16 '17 at 01:11

You can implement it using TableLayout. Example below. Obviously you can change the buttons to ImageButtons.

      <TableLayout
        android:id="@+id/tableLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="*">
        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1">
            <Button
                android:id="@+id/button1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
            <Button
                android:id="@+id/button2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
        </TableRow>
        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1">
            <Button
                android:id="@+id/button3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
            <Button
                android:id="@+id/button4"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
        </TableRow>
     </TableLayout>

score 2 · Accepted Answer · answered Sep 05 '16 at 21:33

2

You can use a GridView. The following Android docs link contains examples and detailed info of how to use it.

Android docs: https://developer.android.com/guide/topics/ui/layout/gridview.html

https://developer.android.com/reference/android/widget/GridView.html

answered Sep 05 '16 at 21:33

ansorod

367
1
5

Oh, cool! I didn't even know that it would work! I'll try this and if that works, then it'll save me a bit! – Mike Sep 06 '16 at 22:17

How to make a 4x4 grid of imagebuttons in android?

2 Answers2