GridLayout bigger than screen

Question

I have a GridLayout , but the children set their layout_width to match_parent , and make it so that the GridLayout extends its size to outside the screen (see image).

How can I do to let the items match_parent , keeping the GridLayout inside the screen?

Here is my code:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_margin="8dp">

            <GridLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:columnCount="2">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Buscar"
                    android:id="@+id/tvRecorrido"
                    android:layout_gravity="center_vertical"/>

                <SearchView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/svBusqueda"
                    android:queryHint="@string/hint_buscar"/>    

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Fecha"
                    android:layout_gravity="center_vertical"/>

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="none"
                    android:focusable="false"
                    android:id="@+id/etFecha"
                    android:layout_gravity="center_vertical"/>
            </GridLayout>    

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/btn_ver_horarios"
                android:id="@+id/buttonIniciarSesion"
                android:textColor="@color/azul"
                android:background="?android:attr/selectableItemBackground"
                android:layout_gravity="center_horizontal"
                android:onClick="verHorarios"
                android:paddingLeft="8dp"
                android:paddingRight="8dp"
                android:layout_marginTop="15dp"/>

        </LinearLayout>

Answer 1

OK, here is what I ened up with to make your layout use only a single RelativeLayout (avoiding nasty nested layouts is better for performances).

The tricky part was to make the TextViews vertically aligned with their mating editable Views.
Solved by giving all Views the same fixed width (40 dp turned out to be quite a good value).

This is the result:

Note: Since I don't use your theme (nor Material Design - since I'm a FREE thinker and like to do things my way, ALWAYS), I used a background color for the parent layout.

This leaves a white border (didn't have the time and will to fix that). You won't have this issue. Just remove it from the RelativeLayout.

---

This is the code I used (in the comments you'll find out how to restore your SearchView and your Button):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#bdf"
    android:layout_margin="8dp"
    >

    <TextView
        android:id="@+id/tvRecorrido"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="Buscar"
        android:gravity="center_vertical"
        android:layout_marginRight="8dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
    />
<!--    <SearchView -->
<!--        android:id="@+id/svBusqueda" -->
<!--        android:layout_width="match_parent" -->
<!--        android:layout_height="40dp" -->
<!--        android:queryHint="@string/hint_buscar" -->
<!--        android:layout_alignParentTop="true" -->
<!--        android:layout_alignParentRight="true" -->
<!--        android:layout_toLeftOf="@id/tvRecorrido" -->
<!--    /> -->



<!--
    For my test project only, I replaced the SerachView (requires API Level 11)
    with an EditText (I support API Level 8+)
-->
<!-- You can simply remove my EditText (below) and uncomment your SearchView (above) -->

    <EditText
        android:id="@+id/svBusqueda"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:queryHint="This was: @string/hint_buscar"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@id/tvRecorrido"
    />

    <TextView
        android:id="@+id/tvFecha"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="Fecha"
        android:gravity="center_vertical"
        android:layout_marginRight="8dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/svBusqueda"
    />
    <EditText
        android:id="@+id/etFecha"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:inputType="none"
        android:focusable="false"
        android:layout_gravity="center_vertical"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@id/tvFecha"
        android:layout_below="@id/svBusqueda"
    />

<!--    <Button -->
<!--        android:layout_width="wrap_content" -->
<!--        android:layout_height="wrap_content" -->
<!--        android:text="@string/btn_ver_horarios" -->
<!--        android:id="@+id/buttonIniciarSesion" -->
<!--        android:textColor="@color/azul" -->
<!--        android:background="?android:attr/selectableItemBackground" -->
<!--        android:onClick="verHorarios" -->
<!--        android:paddingLeft="8dp" -->
<!--        android:paddingRight="8dp" -->
<!--        android:layout_marginTop="15dp" -->
<!--        android:layout_centerHorizontal="true" -->
<!--        android:layout_alignBottom="@id/etFecha" -->
<!--    /> -->



<!-- For my test project only, I removed: -->

<!--        android:textColor="@color/azul" -->
<!--        android:background="?android:attr/selectableItemBackground" -->
<!--        android:text="@string/btn_ver_horarios" -->

<!-- I used fixed values in place of the string and the color resources -->
<!-- You can simply remove my Button (below) and uncomment yours (above) -->

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="VER HORARIOS"
        android:background="#bdf"
        android:id="@+id/buttonIniciarSesion"
        android:textColor="#4af"
        android:onClick="verHorarios"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:layout_marginTop="15dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/etFecha"
    />
</RelativeLayout>