Question

I’ve been trying to create a simple layout. It’s a 3×3 grid with a TextView below.
I use a TableLayout to set the ImageButtons and the TextView(TextView has layout_span=3).
The problem is that in Landscape mode i can’t see the TextView.

I’ve tried to put some weights to the TableRows but this fixes the problem of the Landscape mode creating an other problem: in portrait mode there are huge spaces between the buttons.

What I’m trying to create is a tick tack toe game, so I’d like the buttons to be compact.

How can I obtain such an effect? I want the Textview to take all the vertical space remaining, and I want it to be visible even in Landscape mode.

Any solution for this?

This is the xml code:

<?xml version="1.0" encoding="utf-8"?>

<!--suppress AndroidDomInspection -->
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:background="#000000"
              android:stretchColumns="*">
    <TableRow android:layout_margin="2dip"
              android:background="#000000">
        <ImageButton android:id="@+id/z_z" android:layout_margin="3dip"
                     android:layout_height="wrap_content"
                     android:layout_width="wrap_content"
                     android:src="@drawable/empty"
                     android:background="#ffffff"/>
        <ImageButton android:id="@+id/z_o" android:layout_margin="3dip"
                     android:layout_height="wrap_content"
                     android:layout_width="wrap_content"
                     android:src="@drawable/empty"
                     android:background="#ffffff"/>
        <ImageButton android:id="@+id/z_t" android:layout_margin="3dip"
                     android:layout_height="wrap_content"
                     android:layout_width="wrap_content"
                     android:src="@drawable/empty"
                     android:background="#ffffff"/>
    </TableRow>
    <TableRow android:layout_margin="2dip"
              android:background="#000000">
        <ImageButton android:id="@+id/o_z" android:layout_margin="3dip"
                     android:layout_height="wrap_content"
                     android:layout_width="wrap_content"
                     android:src="@drawable/empty"
                     android:background="#ffffff"/>
        <ImageButton android:id="@+id/o_o" android:layout_margin="3dip"
                     android:layout_height="wrap_content"
                     android:layout_width="wrap_content"
                     android:src="@drawable/empty"
                     android:background="#ffffff"/>
        <ImageButton android:id="@+id/o_t" android:layout_margin="3dip"
                     android:layout_height="wrap_content"
                     android:layout_width="wrap_content"
                     android:src="@drawable/empty"
                     android:background="#ffffff"/>
    </TableRow>
    <TableRow android:layout_margin="2dip"
              android:background="#000000">
        <ImageButton android:id="@+id/t_z" android:layout_margin="3dip"
                     android:layout_height="wrap_content"
                     android:layout_width="wrap_content"
                     android:src="@drawable/empty"
                     android:background="#ffffff"/>
        <ImageButton android:id="@+id/t_o" android:layout_margin="3dip"
                     android:layout_height="wrap_content"
                     android:layout_width="wrap_content"
                     android:src="@drawable/empty"
                     android:background="#ffffff"/>
        <ImageButton android:id="@+id/t_t" android:layout_margin="3dip"
                     android:layout_height="wrap_content"
                     android:layout_width="wrap_content"
                     android:src="@drawable/empty"
                     android:background="#ffffff"/>
    </TableRow>
    <TableRow>
        <TextView android:id="@+id/message_txt_view"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:text="@string/how_to_play"
                  android:textSize="@dimen/message_size"
                  android:layout_span="3"/>

    </TableRow>

</TableLayout>

EDIT:
I’ve understood how to use weights, but I think this does not actually resolve my problem, because on different screen sizes the grid is still malformed.
What I really want to do is a way to use the screen size in the layout code.
In this way I could use weights that work for it.

Probably I can specify a different layout for every screen dimension(I read something like this one or two days ago), but this would be a bit boring. And also I’d have tons of file to update if I change the layout.

Maybe there is a way to set the TableLayout height to wrap_content, while having the TextView heights set to fill_parent, taking all the space possible to show the grid?
This would really solve my problem for every screen size.

Answer 1

Create a different layout for landscape mode using the weights you mention and leave the portrait mode one as is.

To use it simply name the two layouts the same. Put the portrait one in the usual “layout” directory and put the landscape one in a new directory “layout-land”.