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:

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>

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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"/>

Answer 5

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

Answer 6

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.