TextView shrinks TableLayout

Question

I want to create a simple flag game. You are given the country name and you must then guess the correct flag. On my play screen, i have a TextView and a TableLayout with 4 images in 2 rows. These images are the same dimension.

The problem is: The TextView "shrinks" the second TableRow, so that the images no longer are equally big. If I remove the TextView, everything is fine.

I tried to debug in Hierachy Viewer, which told me that the property mMeasuredHeight of the second TableRow had a value of a very high value (16777526)

My play activity xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="4dp"
    tools:context=".PlayTimeModeActivity" >

    <TextView
        android:id="@+id/tvFlagName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Hello"
        android:textSize="50dp" />

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal" >

        <TableRow>

            <ImageView
                android:id="@+id/ivFlag1"
                android:layout_margin="4dp"
                android:contentDescription="@string/cdFlag1" />

            <ImageView
                android:id="@+id/ivFlag2"
                android:layout_margin="4dp"
                android:contentDescription="@string/cdFlag2" />
        </TableRow>

        <TableRow>

            <ImageView
                android:id="@+id/ivFlag3"
                android:layout_margin="4dp"
                android:contentDescription="@string/cdFlag3" />

            <ImageView
                android:id="@+id/ivFlag4"
                android:layout_margin="4dp"
                android:contentDescription="@string/cdFlag4" />
        </TableRow>
    </TableLayout>
</LinearLayout>

Do you need additional info?

I wonder if this layout of images can be done better?

Edit: The images are pretty high resolution

Answer 1

Try this:

Make the root of your layout (LinearLayout) have the following attributes android:layout_width="match_parent" and android:layout_height="match_parent"

Set your TableLayout to have android:layout_height="wrap_content". This will make it take up any remaining space on the screen after the text has been placed, rather than squashing the Hello text.

For each TableRow add android:layout_weight="1". This will make each row take up an even amount of space in the TableLayout.

For each ImageView in the table, set android:layout_weight="1". Again, this will set an even amount of space for each of your flags.

The flag should scale accordingly. If the scaling isn't correct, try different values in the ImageView for android:scaleType.