CODEWITHSUNDEEP
androidandroid-layoutimagebutton
KILIBIBI
KILIBIBI

Reputation: 25

How to scale a dynamic Tablelayout for keeping single cell imageButton ratio 1:1 android

I'm beginner in android developpement, and I'm trying to make a connect4 with multiple grid size (5x4, 7x6, 10x7). My grid is a Tablelayout(created in the xml file) with ImageButton (created in Activty) included in. ImageButton background's have a 1:1 ratio (102px*102px). What ever grid size the user choose, I wan't to keep all single ImageButton ratio at 1:1, but resize/scale the TableLayout for make them fit in it without horizontal/veritcal scretching of ImageButton.

In xml:

        <TableLayout
            android:id="@+id/tableForButtons"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginTop="0dp"
            android:layout_marginBottom="75dp"

            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:stretchColumns="*"
            android:layout_centerHorizontal="true">
        </TableLayout>

In activity:

        for (int row = 0; row < NUM_ROWS; row++) {
            TableRow tableRow = new TableRow(this);
            tableRow.setLayoutParams(new TableLayout.LayoutParams(
                    TableLayout.LayoutParams.MATCH_PARENT,
                    TableLayout.LayoutParams.MATCH_PARENT,
                    0.05f
            ));
            table.addView(tableRow);
            for (int col = 0; col < NUM_COLS; col++) {
                final int FINAL_COL = col;

                final ImageButton button = new ImageButton(this);

                button.setLayoutParams(new TableRow.LayoutParams(
                        0,
                        TableRow.LayoutParams.MATCH_PARENT,
                        0.05f
                ));
                button.setBackgroundResource(R.mipmap.single_case);
                button.setPadding(0,0,0,0);
                button.setScaleType(ImageView.ScaleType.FIT_XY);
                buttons[row][col] = button;
                ...
          }
      }

Here is my actual views :

Streched cells problem

Upvotes: 0

Views: 94

Answers (2)

Sahil Kothari
Sahil Kothari

Reputation: 130

You just need to set dynamic height and width of ImageButton.

DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int width = displayMetrics.widthPixels;

LinearLayout.LayoutParams params = button.getLayoutParams();
params.width = width / (total number as in your case 10, 7 or 5);
params.height = width / (total number as in your case 10, 7 or 5);
button.setLayoutParams(params);

Let me know if you have any issues.

Upvotes: 1

Mehmed
Mehmed

Reputation: 3040

You can try to following:

private static final int NUM_ROW = 2;
private static final int NUM_COL = 3;

private TableLayout table;

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...
    table = findViewById(R.id.tableForButtons);
    table.post(new Runnable() {
        @Override
        public void run() {
            populateTable();
        }
    });
}

private void populateTable() {
    int tableLayoutWidth = table.getMeasuredWidth();
    int cellWidth = tableLayoutWidth / NUM_COL;

    for (int row = 0; row < NUM_ROW; row++) {
        TableRow tableRow = new TableRow(this);
        tableRow.setLayoutParams(new TableLayout.LayoutParams(
                TableLayout.LayoutParams.MATCH_PARENT,
                cellWidth
        ));
        for (int col = 0; col < NUM_COL; col++) {
            ImageButton button = new ImageButton(this);
            button.setLayoutParams(new TableRow.LayoutParams(
                    cellWidth,
                    cellWidth
            ));
            button.setBackgroundResource(R.mipmap.single_case);
            button.setPadding(0, 0, 0, 0);
            button.setScaleType(ImageView.ScaleType.FIT_XY);
            tableRow.addView(button);
        }
        table.addView(tableRow);
    }
}

Upvotes: 0

Related Questions