Android Layouts - Make EditText Lines Evenly Sized

Question

I am new to Android app development, and while I understand the coding aspects just fine so far, I cannot wrap my mind around layouts. I am trying to create an app in which the EditText elements are evenly sized despite the size of their TextView counterparts. What the app looks like right now is on the left, and what I want is on the right.

Here's the code for my layout.

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".RandApp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:orientation="vertical"
        android:id="@+id/gridLayout">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_weight="1">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="@string/one"
                android:id="@+id/lblOne"
                android:layout_gravity="center_vertical" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/txtOne"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:textAlignment="center" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_row="1"
            android:layout_column="0"
            android:layout_weight="1">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="@string/two"
                android:id="@+id/lblTwo"
                android:layout_gravity="center_vertical" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/txtTwo"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:textAlignment="center" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_row="1"
            android:layout_column="0"
            android:layout_weight="1">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="@string/three"
                android:id="@+id/lblThree"
                android:layout_gravity="center_vertical" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/txtThree"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:textAlignment="center" />
        </TableRow>

    </LinearLayout>

</RelativeLayout>

What could I do to achieve the desired effect? The layout code was created mostly using Android Studio's designer with only several small changes made by me.

Answer 1

Here is my code

Simplest way ..

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Blah"
android:textSize="15dp" />


<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="15dp" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Blah"
android:textSize="15dp" />

<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="15dp" />
</LinearLayout>

</LinearLayout>

Feel free to ask anything.. Happy coding :)

Answer 2

Try using weight..

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:orientation="vertical"
        android:id="@+id/gridLayout">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_weight="1">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="one"
                android:id="@+id/lblOne"
                android:layout_gravity="center_vertical"
                android:layout_weight="2" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/txtOne"
                android:layout_gravity="center_vertical"
                android:layout_weight="4"
                android:textAlignment="center" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_row="1"
            android:layout_column="0"
            android:layout_weight="1">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="two"
                android:id="@+id/lblTwo"
                android:layout_gravity="center_vertical"
                android:layout_weight="2" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/txtTwo"
                android:layout_gravity="center_vertical"
                android:layout_weight="4"
                android:textAlignment="center" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_row="1"
            android:layout_column="0"
            android:layout_weight="1">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="three"
                android:id="@+id/lblThree"
                android:layout_gravity="center_vertical"
                android:layout_weight="2" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/txtThree"
                android:layout_gravity="center_vertical"
                android:layout_weight="4"
                android:textAlignment="center" />
        </TableRow>

    </LinearLayout>

</RelativeLayout>