Android - Scale TableLayout to Screen Size

Question

I have an Android app that contains a RelativeLayout with a TableLayout inside of it.

Within the TableLayout there are 3 ImageView s for each of the 3 TableLayout rows. (Making 9 in total)

The problem I'm having is that the last ImageView in each row is partially cut off.

This is my current xml code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    tools:context=".Main">
    <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:shrinkColumns="true"
            android:id="@+id/TableLayout">
            <TableRow
                android:id="@+id/TableRow1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">
                <ImageView 
                    android:id="@+id/s1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="5dp"/>
                <ImageView 
                    android:id="@+id/s2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="5dp"/>
                <ImageView 
                    android:id="@+id/s3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="5dp"/>
            </TableRow>
    </TableLayout>
</RelativeLayout>

(The rest of the rows are the same)

I have tried playing around with values like fill_parent and wrap_content but I haven't had any success yet.

I would like to scale the TableLayout to the size of the screen, so that it looks good on all devices, without any of the images getting cut off.

Here's a screenshot:

Thanks in advance!

Answer 1

You'd probably want to use a LinearLayout as the parent and have the TableLayout use weights inside, this way your rows and columns will spread evenly by dividing the total space available evenly.

Also in case you want the images to fit the allocated space use match_parent both for height and weight with android:scaleType="fitXY" for the ImageViews inside the TableLayout . Other image scaling algorithms are also available so for the best results (to fit into your needs) try and play with it a little bit and see what fits you the most.