Align 2 rows of controls that align at the center using relativelayout

Question

Android Studio 0.5.4

Hello,

I have a relativeLayout with 2 columns of EditText's.

I want the second row to start from the center of the screen, and the EditText's in the first column to start from the left and stop at the center.

I have been messing around with centerInParent and centerHorizonatal toLeftOf, but can't seen to get it correct. I don't want to use LinearLayout and hoping to do this just using the RelativeLayout if that is possible. So linearLayout is not an option for me.

Many thanks for any suggestions. Screenshot: enter image description here

Style I am using:

<resources>
    <style name="addressBookLand">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textSize">22sp</item>
        <item name="android:layout_marginBottom">4dp</item>
    </style>
</resources>

Layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fffc">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:gravity="center"
        android:inputType="text"
        android:text="Address Book App"
        android:textStyle="bold|italic" />

    <EditText
        android:id="@+id/etFirstName"
        style="@style/addressBookLand"
        android:hint="Enter your first name"
        android:inputType="text"
        android:layout_below="@id/tvTitle"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/etLastName"/>

    <EditText
        android:id="@+id/etLastName"
        style="@style/addressBookLand"
        android:hint="Enter your last name"
        android:inputType="text"
        android:layout_below="@id/tvTitle"
        android:layout_centerHorizontal="true"/>

    <EditText
        android:id="@+id/etAddressLine"
        style="@style/addressBookLand"
        android:hint="Enter your address"
        android:inputType="text"
        android:layout_below="@id/etFirstName"/>

    <EditText
        android:id="@+id/etDistrict"
        style="@style/addressBookLand"
        android:hint="Enter your district"
        android:inputType="text"
        android:layout_below="@id/etLastName"
        android:layout_toRightOf="@id/etAddressLine"/>

    <EditText
        android:id="@+id/etCity"
        style="@style/addressBookLand"
        android:hint="Enter your city"
        android:inputType="text"
        android:layout_below="@id/etAddressLine"/>

    <EditText
        android:id="@+id/etPostCode"
        style="@style/addressBookLand"
        android:hint="Enter your postcode"
        android:inputType="number"
        android:layout_below="@id/etDistrict"
        android:layout_toRightOf="@id/etCity"/>

    <EditText
        android:id="@+id/etPhoneNumber"
        style="@style/addressBookLand"
        android:hint="Enter your phone number"
        android:inputType="phone"
        android:layout_below="@id/etCity"/>

    <EditText
        android:id="@+id/etEmailAddress"
        style="@style/addressBookLand"
        android:hint="Enter your email Address"
        android:inputType="textEmailAddress"
        android:layout_below="@id/etPostCode"
        android:layout_toRightOf="@id/etPhoneNumber"/>

    <Button
        android:id="@+id/btnSubmit"
        style="@style/addressBookLand"
        android:text="Submit"
        android:layout_below="@id/etPhoneNumber"
        android:layout_toLeftOf="@id/btnCancel"
        android:layout_alignParentLeft="true"/>

    <Button
        android:id="@+id/btnCancel"
        style="@style/addressBookLand"
        android:onClick="onClickCancel"
        android:text="Cancel"
        android:layout_below="@id/etEmailAddress"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

Your description is unclear. Can you post an image of the desired layout? Also, why is LinearLayout not an option? — Mike M., Apr 09 '14 at 08:53

Rudi Kershaw · Accepted Answer · 2014-04-09T09:17:04.740

If you definitely don't want to use a LinearLayout then an elegant solution might be to create a TextView with 0 width and height as a marker of the centre point and use it to position your other Views around it. For example;

 <TextView
    android:id="@+id/centre_marker"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_centerHorizontal="true"/>

Because this has 0 width (if you want a space between your EditTexts, you can either give this marker a width, or use margins on your other Views), it will be more or less exactly in the centre. So you can align all components on the left of it to it's right side, and all on the right to it's left. For example;

 <EditText
    android:id="@+id/etFirstName"
    style="@style/addressBookLand"
    android:hint="Enter your first name"
    android:inputType="text"
    android:layout_below="@id/tvTitle"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@id/centre_marker"/>
<EditText
    android:id="@+id/etLastName"
    style="@style/addressBookLand"
    android:hint="Enter your last name"
    android:inputType="text"
    android:layout_below="@id/tvTitle"
    android:layout_toRightOf="@id/centre_marker"/>

Alternatively, as others have mentioned, two equal sized vertical LinearLayouts inside a horizontal LinearLayout would get you the results you need as long as you don't plan on making the layout any more complicated or less regimented.

I hope this helps. If you need clarification, you can just leave me a comment and I will explain as best as I can.

I was thinking of doing something like this. I will give it a go. The only drawback is that you need a center view for each row. Thanks. — ant2009, Apr 09 '14 at 09:23
You shouldn't need a marker for each row. They will line up. Shouldn't make any difference if they're at the same height within their parent. — Rudi Kershaw, Apr 09 '14 at 16:30

score 1 · Answer 2 · answered Apr 09 '14 at 08:54

1

Group the EditTexts into two vertical LinearLayouts. Wrap a horizontal LinearLayout around those, and give both the vertical LinearLayouts weight="1"

<LinearLayout
  android:orientation="horizontal"
  android:width="match_parent"
  android:height="wrap_content">

  <LinearLayout
    android:orientation="vertical"
    android:weight="1"
    android:width="0dp"
    android:height="wrap_content">

  <!-- put first column here -->

  </LinearLayout>

  <LinearLayout
    android:orientation="vertical"
    android:weight="1"
    android:width="0dp"
    android:height="wrap_content">

  <!-- put second column here -->

  </LinearLayout
</LinearLayout

answered Apr 09 '14 at 08:54

andMarkus

960
1
8
16

I didn't fancy the nested layout solution as it just uses more processing power to render them. – ant2009 Apr 09 '14 at 09:21
In this([link](http://developer.android.com/training/improving-layouts/optimizing-layout.html)) article, it is suggested to use GridLayout instead of nested LinearLayouts to improve performance. Maybe that is thw way to go? It appears that a grid is what you are looking for. – andMarkus Apr 09 '14 at 09:30

user3455363 · Answer 3 · 2014-04-09T09:01:03.660

1

Just create colums using 2 relaitve layouts that are placed in Linear Layout and use weights on your columns with Width_layout set to match_parent. Remember that you can nesting Layouts inside other layouts.

edited Apr 09 '14 at 09:01

answered Apr 09 '14 at 08:54

user3455363

408
1
5
13

1

I didn't fancy the nested layout solution as it just uses more processing power to render them. – ant2009 Apr 09 '14 at 09:21

score 1 · Answer 4 · answered Apr 09 '14 at 08:56

Try following code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fffc" >

<TextView
    android:id="@+id/tvTitle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:inputType="text"
    android:text="Address Book App"
    android:textSize="22sp"
    android:textStyle="bold|italic" />

<EditText
    android:id="@+id/etFirstName"
    style="@style/addressBookLand"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/tvTitle"
    android:layout_toLeftOf="@id/etLastName"
    android:hint="Enter your first name"
    android:inputType="text" />

<EditText
    android:id="@+id/etAddressLine"
    style="@style/addressBookLand"
    android:layout_below="@id/etFirstName"
    android:hint="Enter your address"
    android:inputType="text" />

<EditText
    android:id="@+id/etCity"
    style="@style/addressBookLand"
    android:layout_below="@id/etAddressLine"
    android:hint="Enter your city"
    android:inputType="text" />

<Button
    android:id="@+id/btnCancel"
    style="@style/addressBookLand"
    android:layout_below="@id/etEmailAddress"
    android:layout_centerHorizontal="true"
    android:onClick="onClickCancel"
    android:text="Cancel" />

<Button
    android:id="@+id/btnSubmit"
    style="@style/addressBookLand"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/etPhoneNumber"
    android:layout_toLeftOf="@id/btnCancel"
    android:text="Submit" />

<EditText
    android:id="@+id/etLastName"
    style="@style/addressBookLand"
    android:layout_alignBaseline="@+id/etFirstName"
    android:layout_alignBottom="@+id/etFirstName"
    android:layout_alignParentRight="true"
    android:ems="10"
    android:hint="Enter your last name"
    android:inputType="text" />

<EditText
    android:id="@+id/etDistrict"
    style="@style/addressBookLand"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/etLastName"
    android:ems="10"
    android:hint="Enter your district"
    android:inputType="text" >

    <requestFocus />
</EditText>

<EditText
    android:id="@+id/etPostCode"
    style="@style/addressBookLand"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:ems="10"
    android:hint="Enter your postcode"
    android:inputType="number" />

<EditText
    android:id="@+id/etEmailAddress"
    style="@style/addressBookLand"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/etPostCode"
    android:ems="10"
    android:hint="Enter your email Address"
    android:inputType="textEmailAddress" />

<EditText
    android:id="@+id/etPhoneNumber"
    style="@style/addressBookLand"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/etCity"
    android:ems="10"
    android:hint="Enter your phone number"
    android:inputType="phone" />

Hope this will solve your issue

score 1 · Answer 5 · answered Apr 09 '14 at 08:58

Try using the below code. hopefull this will work.

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

    <View
        android:id="@+id/center"
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:layout_centerHorizontal="true" />

    <EditText
        android:id="@+id/fist_row"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/center" />


    <EditText 
        android:id="@+id/second_row"
        android:layout_alignLeft="@+id/center"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/fist_row"/>

score 1 · Answer 6 · edited May 23 '17 at 12:01

Also you say linearlayout is no option for you, you should consider to use it as a child of the relative layout!

this way, you could set a horizontal linear layout around the two buttons, and center them horizontally.

So instead of the two buttons, something like:

<LinearLayout
    android:height="wrap_content"
    android:width="match_parent"
    android:orientation="horizontal"
    android:gravity="center_horizontal"
    android:layout_below="@id/etPhoneNumber" >
    <Button
        android:id="@+id/btnSubmit"
        style="@style/addressBookLand"
        android:text="Submit"/>
    <Button
        android:id="@+id/btnCancel"
        style="@style/addressBookLand"
        android:onClick="onClickCancel"
        android:text="Cancel"/>  
</Linearlayout>

Also this could be a solution: Center two buttons horizontally

I didn't fancy the nested layout solution as it just uses more processing power to render them. — ant2009, Apr 09 '14 at 09:19

Align 2 rows of controls that align at the center using relativelayout

6 Answers6