How to get pictures to actually respect their bounds in Android?

Question

I'm trying to make a layout where there a lot of different pictures each taking the same amount of space. Given that i wanted them to appear in a grid i used a TableLayout.

Make cells same width and height to fill the table

According to this question it's possible to have each cell take the same width and height by adjusting the weight values.

So this is what i have in my xml.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:weightSum="6"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0sp"
            android:layout_weight="2">

            <ImageButton
                android:id="@+id/imageButton10"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/janice" />

            <ImageButton
                android:id="@+id/imageButton13"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/phoebe" />

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0sp"
            android:layout_weight="2">

            <ImageButton
                android:id="@+id/imageButton12"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/monica" />

            <ImageButton
                android:id="@+id/imageButton11"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/joey" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0sp"
            android:layout_weight="2">

            <ImageButton
                android:id="@+id/imageButton9"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/chandler" />

            <ImageButton
                android:id="@+id/imageButton14"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/ross" />
        </TableRow>

    </TableLayout>

</android.support.constraint.ConstraintLayout>

What i expected is that since each TableRow has the same amount of weight, the height of the screen should be evenly divided in 3. And then since each image has the same amount of weight within each TableRow, each image should take half the width of each TableRow, giving a nice grid appearence. Something like this:

What actually happens is this:

I'm perfectly aware that these are images of different dimensions but it should be possible to constrain them to their bounds.

And yeah there are a lot of questions where people ask how to make the images not take more space than intended like here: ImageView taking too much vertical space

But the answer is always fixing the scale or setting adjustViewBounds to true which i've already done. So my question is,

How can i fix this?

score 1 · Accepted Answer · answered Mar 28 '19 at 12:42

I figured out the solution. I think that trying to restrict the height of each TableRow using layout_weight is the wrong way of thinking in the first place. According to documentation (Emphasis mine):

The children of a TableLayout cannot specify the layout_width attribute. Width is always MATCH_PARENT. However, the layout_height attribute can be defined by a child; default value is ViewGroup.LayoutParams.WRAP_CONTENT. If the child is a TableRow, then the height is always ViewGroup.LayoutParams.WRAP_CONTENT.

Since the height can't be restricted the images can take as much space as they want, depending on their dimensions.

We can actually restrict height using LinearLayout. Using a vertical LinearLayout with three Horizontal LinearLayouts inside it we can give the same space to each image. Each horizontal LinearLayout gets 1/3 of the height and each picture inside the horizontal LinearLayout gets 1/2 of the width.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ImageButton
                android:id="@+id/imageView3"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/rachel" />

            <ImageButton
                android:id="@+id/imageView2"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/phoebe" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal"
            >

            <ImageButton
                android:id="@+id/imageButton15"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/chandler" />

            <ImageButton
                android:id="@+id/imageButton17"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/monica" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:layout_weight="1">

            <ImageButton
                android:id="@+id/imageView"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/joey" />

            <ImageButton
                android:id="@+id/imageButton16"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/janice" />

        </LinearLayout>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

How to get pictures to actually respect their bounds in Android?

1 Answers1