Search code examples
androidandroid-edittexttextviewalignmentandroid-relativelayout

Align TextView with EditText inside Relative layout


I saw some posts regarding alignment of TextView with EditText on Android canvas. But, I didn´t found answer which could help me in the right way. My desire is to have TextView and EditText in a following manner:

     (TextView) (EditText)          (TextView) (EditText)
     (TextView) (EditText)          (TextView) (EditText)
     (TextView) (EditText)          (TextView) (EditText)
     (TextView) (EditText)

EditText width and height are predefined (values given in dp). Also, top and left margin of TextEdit is given. That means that I have to place EditText of certain size and to certain position on the screen. This is ok, and I achieved it using one RelativeLayout container. But I should also put label(TextView) beside EditText in such a way that i don´t specify any value in dps, because textviews have to placed automatically with respect to EditText. For example

           Street: [Main Street] 
    Street Number: [     4     ]   

I tried using Relative layout attributes:

  layout_alignTop="@id/EditText"
  layout_toLeftOf="@id/EditText"

But, TextView is not showed, because it is placed left of EditText but exactly on the left margin(top alignment works) and not "exactly" beside EditText (2dp or 3dp left from EditText) like I want. I also tried other attributes but no result.

  1. Is there some native android attribute for putting labels near EditText like i want?
  2. Is there some attribute in Relative layout that can do job for me?
  3. Is there way just to specify that TextView is 3 dp left from EditText?
  4. Any other solutions?

Thanks

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
    android:id="@+id/EditText1"
    android:hint="Write..."
    android:layout_width="80dp"
    android:layout_height="22dp"
    android:layout_marginTop="61dp"
    android:layout_marginLeft="160dp"
    android:background="@android:drawable/editbox_dropdown_light_frame"/>

    <TextView
    android:id="@+id/TextView1"
    android:layout_width="wrap_content"
    android:layout_height="22dp"
    android:text="Text"
    android:layout_toLeftOf="@+id/EditText1"
    android:layout_alignTop="@+id/EditText1"/>

    <EditText
    android:id="@+id/EditText2"
    android:hint="Write..."
    android:layout_width="200dp"
    android:layout_height="22dp"
    android:layout_marginTop="61dp"
    android:layout_marginLeft="490dp"
    android:background="@android:drawable/editbox_dropdown_light_frame"/>

    <TextView
    android:id="@+id/TextView2"
    android:layout_width="wrap_content"
    android:layout_height="22dp"
    android:text="Text"
    android:layout_alignTop="@+id/EditText2"
    android:layout_toLeftOf="@+id/EditText2" />

    </RelativeLayout>

Solution

  • You are using layout_margin left which is creating the problem , If your need is just this much why not use TableLayout

    <?xml version="1.0" encoding="utf-8"?>
    <TableLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TableRow
            android:layout_marginTop="61dp">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_weight="1">
            <TextView
                android:id="@+id/TextView1"
                android:layout_width="wrap_content"
                android:layout_height="22dp"
                android:text="Text" />
            <EditText
                android:id="@+id/EditText1"
                android:hint="Write..."
                android:layout_width="80dp"
                android:layout_height="22dp"
                android:background="@android:drawable/editbox_dropdown_light_frame"/>
    
    
        </LinearLayout>
    
    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_weight="1"
            >
            <TextView
                android:id="@+id/TextView2"
                android:layout_width="wrap_content"
                android:layout_height="22dp"
                android:text="Text" />
            <EditText
                android:id="@+id/EditText2"
                android:hint="Write..."
                android:layout_width="80dp"
                android:layout_height="22dp"
                android:background="@android:drawable/editbox_dropdown_light_frame"/>
    
    
        </LinearLayout>
    </TableRow>
    </TableLayout>
    

    Just copy the whole TableRow tag and paste it as many row you want

    **But If you still want relative layout here's the fix code for you ** just change margin value correctly as per your need

    <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="22dp"
        android:text="Text"
        android:layout_marginTop="57dp"
        android:layout_marginLeft="80dp"
        />
    
    <EditText
        android:id="@+id/EditText1"
        android:hint="Write..."
        android:layout_width="80dp"
        android:layout_height="22dp"
        android:background="@android:drawable/editbox_dropdown_light_frame"
        android:layout_alignTop="@+id/TextView1"
        android:layout_toRightOf="@+id/TextView1"
        android:layout_toEndOf="@+id/TextView1" />
    
    
    
    <EditText
        android:id="@+id/EditText2"
        android:hint="Write..."
        android:layout_width="80dp"
        android:layout_height="22dp"
        android:background="@android:drawable/editbox_dropdown_light_frame"
        android:layout_alignTop="@+id/EditText1"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="25dp"
        android:layout_marginEnd="25dp" />
    
    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="22dp"
        android:text="Text"
        android:layout_alignTop="@+id/EditText2"
        android:layout_toLeftOf="@+id/EditText2"
        android:layout_toStartOf="@+id/EditText2" />