Android Stretching Items in TableLayout XML

Question

In my application, the user can choose the notification icons himself. I made a drop down menu for this and added the icon images to the table layout. The problem is that the pictures don't fit on small screen phones and there is a lot of space on the edge on the big screens (tablets, phones, etc). How can I fix this? Thank in advance!

Preview

  <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">
        <TableRow android:gravity="center">

            <ImageView
                android:id="@+id/img5"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center"
                android:clickable="true"
                android:focusable="true"
                android:foreground="@drawable/ripple_circular_tabs"
                android:layout_margin="8dp"
                android:src="@mipmap/ic_notifications4"
                tools:ignore="ContentDescription" />

            <ImageView
                android:id="@+id/img6"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center"
                android:layout_margin="10dp"
                android:clickable="true"
                android:focusable="true"
                android:foreground="@drawable/ripple_circular_tabs"
                android:src="@mipmap/ic_notifications10"
                tools:ignore="ContentDescription" />

            <ImageView
                android:id="@+id/img7"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center"
                android:clickable="true"
                android:focusable="true"
                android:foreground="@drawable/ripple_circular_tabs"
                android:layout_margin="10dp"
                android:src="@mipmap/ic_notifications6"
                tools:ignore="ContentDescription" />


            <ImageView
                android:id="@+id/img8"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center"
                android:layout_margin="8dp"
                android:clickable="true"
                android:focusable="true"
                android:foreground="@drawable/ripple_circular_tabs"
                android:src="@mipmap/ic_notifications7"
                tools:ignore="ContentDescription" />
        </TableRow>

    </TableLayout>

TableRow is probably not a good choice for this scenario. ImageView widths are defined as constants. So the actual total width size will be constant as well. I suggest you have a look at the LinearLayout or ConstraintLayout to have this layout. https://developer.android.com/guide/topics/ui/layout/linear#Weight https://stackoverflow.com/questions/37518745/evenly-spacing-views-using-constraintlayout — Efe Budak, Jan 30 '20 at 17:17
This solution worked for me. Thank you https://stackoverflow.com/a/59809980/12724871 — theoyuncu8, Jan 30 '20 at 20:44

score 2 · Accepted Answer · answered Jan 19 '20 at 12:23

Use android:layout_weight="1" with android:layout_width="0dp" to distribute it evenly. Check below:

<TableRow android:gravity="center">

    <ImageView
        android:id="@+id/img5"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:clickable="true"
        android:focusable="true"
        android:foreground="@drawable/ripple_circular_tabs"
        android:layout_margin="8dp"
        android:src="@mipmap/ic_notifications4"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/img6"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:clickable="true"
        android:focusable="true"
        android:foreground="@drawable/ripple_circular_tabs"
        android:src="@mipmap/ic_notifications10"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/img7"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:clickable="true"
        android:focusable="true"
        android:foreground="@drawable/ripple_circular_tabs"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_notifications6"
        tools:ignore="ContentDescription" />


    <ImageView
        android:id="@+id/img8"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        android:clickable="true"
        android:focusable="true"
        android:foreground="@drawable/ripple_circular_tabs"
        android:src="@mipmap/ic_notifications7"
        tools:ignore="ContentDescription" />
</TableRow>

Output:

Portrait:

Landscape:

Pretty fine solution. But android:scaleType="centerInside" might be needed as they are icons and OP doesn't seem to want stretch them. — Emin Guliev, Jan 19 '20 at 12:52

Android Stretching Items in TableLayout XML

1 Answers1