Edit text out of the screen with GridLayout

Question

I have the following layout, where the edit texts goes out of the screen with apparently no reason. I've trying to find a similar issue but I couldn't. It should be an easy one but I've tried many things without luck.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <GridLayout
        android:id="@+id/gridLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:columnCount="2"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/titleTextView"
            android:layout_columnSpan="2"
            android:layout_gravity="left"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:text="dsgsdgsd"
            android:textColor="@color/red"
            android:textStyle="bold" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="2dip"
            android:layout_columnSpan="2"
            android:layout_gravity="left"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:background="@color/red" />

        <TextView
            android:id="@+id/textTitle"
            android:layout_gravity="left"
            android:background="#ffffff"
            android:paddingLeft="15dp"
            android:text="Title"
            android:textColor="@color/grey" />

        <EditText
            android:id="@+id/editTitle"
            android:layout_gravity="right"
            android:inputType="text">
        </EditText>

        <View
            android:layout_height="1dip"
            android:layout_columnSpan="2"
            android:layout_gravity="left"
            android:background="#E6E6E6" />

        <TextView
            android:id="@+id/textCategory"
            android:layout_gravity="left"
            android:background="#ffffff"
            android:gravity="left"
            android:paddingLeft="15dp"
            android:text="Category"
            android:textColor="@color/grey" />

        <EditText
            android:id="@+id/editCategory"
            android:layout_width="225dp"
            android:layout_gravity="right"
            android:inputType="text" />            

        <Button
            android:id="@+id/btnCreateAccount"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="#ffffff"
            android:onClick="createExpense"
            android:text="Done"
            android:textColor="@color/red" />
    </GridLayout>

Answer 1

Check your updated code:

You were missing some width, height attributes, and you had used match_parent in earlier element like View, which prevented any later element to get space on screen.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <GridLayout
        android:id="@+id/gridLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:columnCount="2"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/titleTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_columnSpan="2"
            android:layout_gravity="left"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:text="dsgsdgsd"
            android:textColor="@color/red"
            android:textStyle="bold" />

        <View
            android:layout_width="wrap_content"
            android:layout_height="2dip"
            android:layout_columnSpan="2"
            android:layout_gravity="left"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:background="@color/red" />

        <TextView
            android:id="@+id/textTitle"
            android:layout_gravity="left"
            android:background="#ffffff"
            android:paddingLeft="15dp"
            android:text="Title"
            android:textColor="@color/grey" />

        <EditText
            android:id="@+id/editTitle"
            android:layout_gravity="right"
            android:inputType="text" >
        </EditText>

        <View
            android:layout_width="wrap_content"
            android:layout_height="1dip"
            android:layout_columnSpan="2"
            android:layout_gravity="left"
            android:background="#E6E6E6" />

        <TextView
            android:id="@+id/textCategory"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:background="#ffffff"
            android:gravity="left"
            android:paddingLeft="15dp"
            android:text="Category"
            android:textColor="@color/grey" />

        <EditText
            android:id="@+id/editCategory"
            android:layout_width="225dp"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:inputType="text" />

        <Button
            android:id="@+id/btnCreateAccount"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="#ffffff"
            android:onClick="createExpense"
            android:text="Done"
            android:textColor="@color/red" />
    </GridLayout>

</LinearLayout>

The output without color and background as it gives me error due to missing resource is:

Here you can see both your edittexts in screen.