How to constrain all TableLayout columns to fit in the page?

Question

I'm using a TableLayout containing a row of ImageButtons and a row of TextViews.

The desired outcome is all the images aligned to center, columns distributed evenly, and the texts aligned just below the images. See example below:

What happens right now is that one of the images always exceeds the page boundaries. See image below:

Here is the XML code:

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:weightSum="1"
            android:gravity="center"
            android:orientation="horizontal">
            <TableLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.8"
                android:stretchColumns="*">
                <TableRow android:weightSum="1">
                    <ImageView
                        android:id="@+id/imageViewUrgent"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:scaleType="fitCenter"
                        android:adjustViewBounds="true"
                        android:src="@drawable/greyexclamation_trans"
                        android:tooltipText=""
                        android:layout_marginHorizontal="5dp"
                        android:layout_weight="0.25"/>
                    <ImageButton
                        android:id="@+id/imageButtonRead"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:scaleType="fitCenter"
                        android:adjustViewBounds="true"
                        android:src="@drawable/profile"
                        android:tooltipText=""
                        android:layout_marginHorizontal="5dp"
                        android:hapticFeedbackEnabled="true"
                        android:background="?android:selectableItemBackground"
                        android:layout_weight="0.25"/>
                    <ImageButton
                        android:id="@+id/imageButtonReply"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:scaleType="fitCenter"
                        android:adjustViewBounds="true"
                        android:layout_marginHorizontal="5dp"
                        android:src="@drawable/ic_baseline_reply_24"
                        android:background="?android:selectableItemBackground"
                        android:tooltipText=""
                        android:layout_weight="0.25" />
                    <ImageButton
                        android:id="@+id/imageButtonForward"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:scaleType="fitCenter"
                        android:adjustViewBounds="true"
                        android:layout_marginHorizontal="5dp"
                        android:src="@drawable/ic_baseline_forward_to_inbox_24"
                        android:background="?android:selectableItemBackground"
                        android:tooltipText=""
                        android:layout_weight="0.25"/>
                </TableRow>
                <TableRow android:layout_weight="1">
                    <TextView
                        android:id="@+id/textViewUrgent"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="12dp"
                        android:text="text1"
                        android:layout_marginHorizontal="5dp"
                        android:layout_weight="0.2"/>
                    <TextView
                        android:id="@+id/textViewRead"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="12dp"
                        android:text="text2"
                        android:layout_marginHorizontal="5dp"
                        android:layout_weight="0.2"/>
                    <TextView
                        android:id="@+id/textViewReply"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="12dp"
                        android:text="text3"
                        android:layout_marginHorizontal="5dp"
                        android:layout_weight="0.2"/>
                    <TextView
                        android:id="@+id/textViewForward"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="12dp"
                        android:text="text4"
                        android:layout_marginHorizontal="5dp"
                        android:layout_weight="0.2"/>
                </TableRow>
            </TableLayout>
        </LinearLayout>

As you can see, I've used android:stretchColumns="*" for the table and android:adjustViewBounds="true" for each of the images.

I've also set an external LinearLayout with weightSum=1, gravity="center" and the TableLayout layout_weight=0.8 so that the table is centered and takes 80% of the page width. I have then tried both setting weightSum=1 for the TableRow and each image and text as layout_weight=0.25, and setting no weightSum at all for the TableRow and each image and text as layout_weight=0.2 (considering the 0.8 for the entire table).

All of which gave the same result, the leftmost image always disappearing to the left and the texts not being aligned with the images.

Any help will be appreciated!

Answer 1

Solved it with a little cheating,

Two LinearLayouts (one for each row) proved much more effective and easily understandable.

• I've defined each LinearLayout with weightSum="1" and with a layout_width="match_parent" - taking up the entire page width.
• Each image or text got layout_weight="0.2" (for a total of 80% of page width, leaving 20% for margins as desired).

Here is the working code:

<LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:weightSum="1"
            android:gravity="center">
            <ImageView
                android:id="@+id/imageViewUrgent"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:src="@drawable/greyexclamation_trans"
                android:layout_marginHorizontal="5dp"
                android:layout_weight="0.2"/>
            <ImageButton
                android:id="@+id/imageButtonRead"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:src="@drawable/profile"
                android:layout_marginHorizontal="5dp"
                android:hapticFeedbackEnabled="true"
                android:background="?android:selectableItemBackground"
                android:layout_weight="0.2"/>
            <ImageButton
                android:id="@+id/imageButtonReply"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_marginHorizontal="5dp"
                android:src="@drawable/ic_baseline_reply_24"
                android:background="?android:selectableItemBackground"
                android:layout_weight="0.2" />
            <ImageButton
                android:id="@+id/imageButtonForward"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_marginHorizontal="5dp"
                android:src="@drawable/ic_baseline_forward_to_inbox_24"
                android:background="?android:selectableItemBackground"
                android:layout_weight="0.2"/>
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:weightSum="1"
            android:gravity="center"
            android:layoutDirection="rtl"
            android:textAlignment="center">
            <TextView
                android:id="@+id/textViewUrgent"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textAlignment="center"
                android:textSize="12dp"
                android:text="text1"
                android:layout_weight="0.2"/>
            <TextView
                android:id="@+id/textViewRead"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textAlignment="center"
                android:textSize="12dp"
                android:text="text2"
                android:layout_weight="0.2"/>
            <TextView
                android:id="@+id/textViewReply"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textAlignment="center"
                android:textSize="12dp"
                android:text="text3"
                android:layout_weight="0.2"/>
            <TextView
                android:id="@+id/textViewForward"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textAlignment="center"
                android:textSize="12dp"
                android:text="text4"
                android:layout_weight="0.2"/>
        </LinearLayout>

Thanks End User for helping to spot some of the problems with the TableLayout.

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:weightSum="1"
        android:orientation="vertical"
        android:layout_height="match_parent">


    <TableLayout
        android:layout_width="match_parent"
        android:layout_weight=".8"
        android:layout_height="0dp">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/imageViewUrgent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/ic_seeding_rect"
                android:tooltipText="" />

            <ImageButton
                android:id="@+id/imageButtonRead"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_marginHorizontal="5dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="?android:selectableItemBackground"
                android:hapticFeedbackEnabled="true"
                android:scaleType="fitCenter"
                android:src="@drawable/ic_seeding_rect"
                android:tooltipText="" />

            <ImageButton
                android:id="@+id/imageButtonReply"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_marginHorizontal="5dp"
                android:layout_weight="1"
                android:background="?android:selectableItemBackground"
                android:scaleType="fitCenter"
                android:src="@drawable/ic_seeding_rect"
                android:tooltipText="" />

            <ImageButton
                android:id="@+id/imageButtonForward"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_marginHorizontal="5dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="?android:selectableItemBackground"
                android:scaleType="fitCenter"
                android:src="@drawable/ic_seeding_rect"
                android:tooltipText="" />
        </TableRow>

        <TableRow>

            <TextView
                android:id="@+id/textViewUrgent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginHorizontal="5dp"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:text="text1"
                android:textSize="12dp" />

            <TextView
                android:id="@+id/textViewUrgent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginHorizontal="5dp"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:text="text1"
                android:textSize="12dp" />

            <TextView
                android:id="@+id/textViewUrgent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginHorizontal="5dp"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:text="text1"
                android:textSize="12dp" />

            <TextView
                android:id="@+id/textViewUrgent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginHorizontal="5dp"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:text="text1"
                android:textSize="12dp" />
        </TableRow>
    </TableLayout>
        
        <TextView
            android:layout_width="match_parent"
            android:layout_weight=".2"
            android:gravity="center"
            android:text="Remaining 20 %"
            android:background="@android:color/holo_red_dark"
            android:layout_height="0dp"/>

    </LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>