Android RelativeLayout align_below not enforced when aligning on TextView?

Question

I'm finding issues with keeping elements in a RelativeLayout in their proper order.

I'm trying to achieve the following element placement:

Date
<DatePicker>
Value <EditText>
Description <EditText>

See the screenshot below for a better idea of what it looks like:

enter image description here

The issue is that the Description label (TextView with id label_description) and related EditText element show on top of the DatePicker, when it has android:layout_below="@id/edittext_value".

Changing this to android:layout_below="@id/label_value" (align below the text label, instead of the EditText element) seems to work, but I'd still like to understand what's happening here.

It happens the same in the Eclipse editor and the running app.

Any idea what is wrong here?

The XML is below.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/add_expense"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <!-- Date: field -->
    <TextView
        android:id="@+id/label_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="@string/label_field_date"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <DatePicker
        android:id="@+id/datepicker_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/label_date"
        android:layout_centerHorizontal="true"
        android:calendarViewShown="false" />


    <!-- Value: field -->
    <TextView
        android:id="@+id/label_value"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/label_date"
        android:layout_below="@id/datepicker_date"
        android:text="@string/label_field_value"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <EditText
        android:id="@+id/edittext_value"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignBaseline="@id/label_value"
        android:layout_toRightOf="@id/label_value"
        android:inputType="numberSigned"/>

    <!-- Description: field -->
    <TextView
        android:id="@+id/label_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/label_value"
        android:layout_below="@id/edittext_value"
        android:text="@string/label_field_description"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <EditText
        android:id="@+id/edittext_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignBaseline="@id/label_description"
        android:layout_toRightOf="@id/label_description"
        android:inputType="textAutoComplete"/>


   <!-- buttons -->

   <Button
        android:id="@+id/button_OK"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="18dp"
        android:text="@string/label_button_addexpense_OK" />

   <Button
        android:id="@+id/button_clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/button_OK"
        android:layout_centerHorizontal="true"
        android:text="@string/label_button_addexpense_clear" />

   <Button
        android:id="@+id/button_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/button_OK"
        android:layout_alignParentRight="true"
        android:text="@string/label_button_addexpense_cancel" />

</RelativeLayout>

score 0 · Answer 1 · answered Jun 04 '14 at 11:52

Use this

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/add_expense"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin" >

<!-- Date: field -->

<TextView
    android:id="@+id/label_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:text="Date"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<DatePicker
    android:id="@+id/datepicker_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/label_date"
    android:layout_centerHorizontal="true"
    android:calendarViewShown="false" />

<!-- Value: field -->

<TextView
    android:id="@+id/label_value"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/datepicker_date"
    android:text="Value"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<EditText
    android:id="@+id/edittext_value"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/label_value"
    android:layout_below="@+id/datepicker_date"
    android:layout_toRightOf="@id/label_value"
    android:inputType="numberSigned" />

<!-- Description: field -->

<TextView
    android:id="@+id/label_description"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/label_value"
    android:text="description"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<EditText
    android:id="@+id/edittext_description"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/label_description"
    android:layout_below="@+id/label_value"
    android:layout_toRightOf="@+id/label_description"
    android:inputType="textAutoComplete" />

<!-- buttons -->

<Button
    android:id="@+id/button_OK"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_marginBottom="18dp"
    android:text="Ok" />

<Button
    android:id="@+id/button_clear"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/button_OK"
    android:layout_centerHorizontal="true"
    android:text="Clear" />

<Button
    android:id="@+id/button_cancel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/button_OK"
    android:layout_alignParentRight="true"
    android:text="Cancel" />

</RelativeLayout>

score 0 · Answer 2 · answered Jun 04 '14 at 12:00

0

Inside relative layout use linear layout and split the page with different part by using android:layout_weight=" ". set orientation without fail. If not works let me know i will give another solution.

answered Jun 04 '14 at 12:00

iffu

331
1
4
16

score 0 · Answer 3 · answered Jun 04 '14 at 12:23

try this.

<?xml version="1.0" encoding="utf-8"?>

<!-- Date: field -->

<TextView
    android:id="@+id/label_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:text="Date"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<DatePicker
    android:id="@+id/datepicker_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/label_date"
    android:layout_centerHorizontal="true"
    android:calendarViewShown="false" />

<!-- Value: field -->

<TextView
    android:id="@+id/label_value"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/datepicker_date"
    android:layout_marginTop="5dip"
    android:text="Value"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<EditText
    android:id="@+id/edittext_value"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/label_value"
    android:layout_marginTop="5dip"
    android:layout_toRightOf="@+id/label_value"
    android:inputType="numberSigned" />

<!-- Description: field -->

<TextView
    android:id="@+id/label_description"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/label_value"
    android:layout_marginTop="5dip"
    android:text="Description"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<EditText
    android:id="@+id/edittext_description"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/label_description"
    android:layout_marginTop="5dip"
    android:layout_toRightOf="@+id/label_description"
    android:inputType="textAutoComplete" />

<!-- buttons -->

<Button
    android:id="@+id/button_OK"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_marginBottom="18dp"
    android:text="OK" />

<Button
    android:id="@+id/button_clear"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/button_OK"
    android:layout_centerHorizontal="true"
    android:text="ADD" />

<Button
    android:id="@+id/button_cancel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/button_OK"
    android:layout_alignParentRight="true"
    android:text="Cancel" />

score -1 · Answer 4 · answered Jun 04 '14 at 11:48

-1

try using @+id/ instead of @id/, cause sometimes that's the ssue

answered Jun 04 '14 at 11:48

micnubinub

116
1
8

score -1 · Answer 5 · answered Jun 04 '14 at 12:00

-1

In the TextView with id label_description change

android:layout_below="@id/edittext_value"

to

android:layout_below="@id/label_value"

answered Jun 04 '14 at 12:00

Apoorv

13,470
4
27
33

Can anyone please explain how i can improve this? – Apoorv Jun 24 '14 at 09:02

Android RelativeLayout align_below not enforced when aligning on TextView?

5 Answers5