create layout in relative layout

Question

I need to create the layout like this but not getting perfect.

getting this

need this way

I am creating this using RelativeLayout and need to create in this only. I am able to create with sub layout using Linearlayout but can this possible without using any sub layout

this is my code

<RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="15dp">
      <TextView android:text="Title" android:textColor="#ffffff" android:layout_width="wrap_content"
          android:layout_height="wrap_content" android:textSize="18dp" android:padding="5dp"
          android:background="@drawable/tab_cyan" android:id="@+id/title_add_txt"/>
      <EditText android:hint="Address Title" android:layout_width="match_parent" android:layout_height="wrap_content"
           android:id="@+id/address_title" android:layout_toRightOf="@id/title_add_txt"/>
       <TextView android:text="Address" android:textColor="#ffffffff" android:layout_width="wrap_content"
           android:layout_height="wrap_content" android:textSize="18dp" android:padding="5dp"
           android:background="@drawable/tab_cyan" android:layout_below="@id/title_add_txt"
           android:id="@+id/address_txt"/>
       <EditText android:hint="Address" android:layout_width="match_parent" android:layout_height="wrap_content"
           android:id="@+id/address" android:layout_below="@id/address_title" android:layout_toRightOf="@id/address_txt"/>
</RelativeLayout>

Answer 1

It seems your TextView and EditText aren't the same size. If you could make them the same size, they would probably align fine.

Providing the size of your views, yourbest bet is probably to stick with your sub LinearLayouts .

Answer 2

I'm not able to test it, but see if this might help:

<RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="15dp">
    <TextView android:text="Title" android:textColor="#ffffff" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:textSize="18dp" android:padding="5dp"
        android:background="@drawable/tab_cyan" android:id="@+id/title_add_txt"/>
    <EditText android:hint="Address Title" android:layout_width="match_parent" android:layout_height="wrap_content"
        android:id="@+id/address_title" android:layout_toRightOf="@id/title_add_txt"/>
    <TextView android:text="Address" android:textColor="#ffffffff" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:textSize="18dp" android:padding="5dp"
        android:background="@drawable/tab_cyan" android:layout_below="@id/address_title"
        android:id="@+id/address_txt"/>
    <EditText android:hint="Address" android:layout_width="match_parent" android:layout_height="wrap_content"
        android:id="@+id/address" android:layout_alignTop="@id/address_txt" android:layout_alignLeft="@id/address_title"/>
</RelativeLayout>

What I've done is as follows: align address_txt below address_title (instead of below title_add_txt ). I've also changed the alignment of address to align to the top of address_txt and to the left of address_title (this might probably be solved in other ways too).

Ad I said: I'm not able to verify it, but you can give it a try at least.

Answer 3

layout_alignBaseline should solve your problem - it aligns text baselines of the views on the same line:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="15dp" >

    <TextView
        android:id="@+id/title_add_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#5500ff00"
        android:padding="5dp"
        android:text="Title"
        android:textColor="#ffffff"
        android:textSize="18dp" />

    <EditText
        android:id="@+id/address_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/title_add_txt"
        android:layout_alignBaseline="@id/title_add_txt"
        android:hint="Address Title" />

    <TextView
        android:id="@+id/address_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/title_add_txt"
        android:layout_marginTop="10dp"
        android:background="#5500ff00"
        android:padding="5dp"
        android:text="Address"
        android:textColor="#ffffffff"
        android:textSize="18dp" />

    <EditText
        android:id="@+id/address"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/address_title"
        android:layout_toRightOf="@id/address_txt"
        android:layout_alignBaseline="@id/address_txt"
        android:hint="Address" />
</RelativeLayout>

I've also added margin between TextViews. It looks like - I don't have your background image so EditTexts aren't aligned properly - if TextViews have the same width this won't be an issue:

You can play with margins of EditText and TextViews to add necessary space between them.

Answer 4

I would wrap the two related controls (label and corresponding input) in a LinearLayout and use android:layout_centerVertical="true" setting on the TextViews .

somthing like this...

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

      <TextView android:text="Title" android:textColor="#ffffff" android:layout_width="wrap_content"
          android:layout_height="wrap_content" android:textSize="18dp" android:padding="5dp"
          android:background="@drawable/tab_cyan" android:id="@+id/title_add_txt"
          android:layout_centerVertical="true" />
      <EditText android:hint="Address Title" android:layout_width="match_parent" android:layout_height="wrap_content"
           android:id="@+id/address_title" android:layout_toRightOf="@id/title_add_txt"/>
   </LinearLayout>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
       <TextView android:text="Address" android:textColor="#ffffffff" android:layout_width="wrap_content"
           android:layout_height="wrap_content" android:textSize="18dp" android:padding="5dp"
           android:background="@drawable/tab_cyan" android:layout_below="@id/title_add_txt"
           android:id="@+id/address_txt"
           android:layout_centerVertical="true"/>
       <EditText android:hint="Address" android:layout_width="match_parent" android:layout_height="wrap_content"
           android:id="@+id/address" android:layout_below="@id/address_title" android:layout_toRightOf="@id/address_txt"/>
   </LinearLayout>
</RelativeLayout>