CODEWITHSUNDEEP
androidandroid-layoutandroid-edittextandroid-linearlayout
mal
mal

Reputation: 3204

How can I properly align a TextView and EditText in a horizontal LinearLayout?

I'm trying to even out my EditText views. But I can't seem to get them to line up correctly, and I can't increase the size of the EditText. At first I tried it with a RelativeLayout, which allowed me to position things accurately, but the size was still off. I thought if I switched to a horizontal LinearLayout then I could adjust both fields with layout_weight and the EditText would automatically fill up the space, but that doesn't seem to be the case. Got any suggestions? This custom view is added to a vertical LinearLayout when displaying on the screen.

My Layout file: 

<?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="wrap_content"
    android:padding="1dp"
    android:weightSum="1"
    android:orientation="horizontal">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.6"
        android:gravity="center_vertical"
        android:textColor="@color/ws_blue"
        android:background="#00ffff"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Settings Item: "
        android:id="@+id/itemLabel" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.4"
        android:textColor="@color/ws_blue"
        android:textColorHint="@color/ws_hint"
        android:background="#ffff00"
        android:id="@+id/et_item_value" />

</LinearLayout>

Android Studio preview:

Android Studio Preview

Actual Screenshot from my phone:

Phone Screenshot

Upvotes: 3

Views: 4213

Answers (4)

Jaydeep Devda
Jaydeep Devda

Reputation: 735

enter image description herehere is your code: below code is for same as layout file which you had display screen shot.

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp">
    <TableRow>
        <TextView
            android:layout_weight="1"
            android:gravity="center"
            android:text="Device ID:"
            android:textColor="@android:color/holo_green_dark"
            android:textStyle="bold" />
        <TextView
            android:layout_weight="1"
            android:text="00:00:00:00:00:00"
            android:textColor="@android:color/holo_green_dark"
            android:textStyle="bold" />
    </TableRow>
    <TableRow android:layout_marginTop="8dp">
        <TextView
            android:layout_weight="1"
            android:text="Wifi Presets:"
            android:textColor="@android:color/holo_blue_dark"
            android:textSize="18sp"
            android:textStyle="bold" />
        <Spinner
            android:layout_marginRight="20dp"
            android:layout_weight="1"
            android:textColor="@android:color/holo_green_dark"
            android:textStyle="bold" />
    </TableRow>
    <TableRow android:layout_marginTop="8dp">
        <TextView
            android:layout_weight="1"
            android:background="@android:color/holo_blue_bright"
            android:text="SSID:"
            android:textColor="@android:color/holo_blue_dark"
            android:textSize="18sp"
            android:textStyle="bold" />
        <EditText
            android:layout_marginLeft="16dp"
            android:layout_weight="1"
            android:background="#FFFF00"
            android:hint="SSID"
            android:textColor="@android:color/holo_blue_dark"
            android:textColorHint="@android:color/darker_gray"
            android:textSize="18sp"
            android:textStyle="bold" />
    </TableRow>
    <TableRow android:layout_marginTop="8dp">
        <TextView
            android:layout_weight="1"
            android:background="@android:color/holo_blue_bright"
            android:text="Password:"
            android:textColor="@android:color/holo_blue_dark"
            android:textSize="18sp"
            android:textStyle="bold" />
        <EditText
            android:layout_marginLeft="16dp"
            android:layout_weight="1"
            android:background="#FFFF00"
            android:hint="Password"
            android:inputType="textPassword"
            android:textColor="@android:color/holo_blue_dark"
            android:textColorHint="@android:color/darker_gray"
            android:textSize="18sp"
            android:textStyle="bold" />
    </TableRow>
    <TableRow android:layout_marginTop="8dp">
        <TextView
            android:layout_weight="1"
            android:text="Security Type:"
            android:textColor="@android:color/holo_blue_dark"
            android:textSize="18sp"
            android:textStyle="bold" />

        <Spinner
            android:layout_marginRight="20dp"
            android:layout_weight="1"
            android:textColor="@android:color/holo_green_dark"
            android:textStyle="bold" />
    </TableRow>
</TableLayout>

Upvotes: 6

Omar El Halabi
Omar El Halabi

Reputation: 2128

In addition to the suggested answers, you can use the percent Support Library. This library, created by Google, enables you to create a RelativeLayout and a FrameLayout with an extra advantage: defining percentages for width, height, and margin. To use it, just add the following line to your Gradle app file:

compile 'com.android.support:percent:23.3.0' // note that the version number 
                                             // might change due to updates

After you add this dependency you can use it like the following:

<android.support.percent.PercentRelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

     <TextView
         android:id="@+id/itemLabel"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:alignParentLeft="true"
         android:background="#00ffff"
         android:layout_marginLeftPercent="10%"
         android:gravity="center_vertical"
         android:text="Settings Item: "
         android:textAppearance="?android:attr/textAppearanceMedium"
         android:textColor="@android:color/holo_blue_dark"/>

    <EditText
        android:id="@+id/et_item_value"
        app:layout_marginRightPercent="10%"
        android:alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_widthPercent="40%"
        android:background="#ffff00"
        android:textColor="@android:color/holo_blue_dark"
        android:textColorHint="@android:color/darker_gray"/>

 </android.support.percent.PercentRelativeLayout>

Note that this is just a sample and you can modify it according to your needs

For more information about the Percent Support Library, please follow this link

Hope this helps :)

Upvotes: 1

Adliano Alves
Adliano Alves

Reputation: 311

I think you best choice will be working with a GridLayout. you can use 

<GridLayout
....
android:columnCount="2">

and if you need bigger EditText you can set more columnsCount and span using

<EditText
.....
android:layout_columnSpan="2"/>

Upvotes: 2

Prasad
Prasad

Reputation: 3562

Try by giving margins and padding to enlarge view

<?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="wrap_content"
    android:orientation="horizontal"
    android:padding="1dp"
    android:weightSum="1">

    <TextView
        android:id="@+id/itemLabel"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.6"
        android:background="#00ffff"
        android:layout_margin="20dp"
        android:padding="10dp"
        android:gravity="center_vertical"
        android:text="Settings Item: "
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@android:color/holo_blue_dark"/>

    <EditText
        android:id="@+id/et_item_value"
        android:layout_margin="20dp"
        android:layout_width="0dp"
        android:padding="10dp"
        android:layout_height="match_parent"
        android:layout_weight="0.4"
        android:background="#ffff00"
        android:textColor="@android:color/holo_blue_dark"
        android:textColorHint="@android:color/darker_gray"/>

</LinearLayout>

Upvotes: 2

Related Questions