RelativeLayout: why do not my buttons show below the line?

Question

In my RelativeLayout I am trying to put two buttons in the second half of the screen,

below a line, which I create using a View.

But the buttons will not show below the line (view1)

This is my my XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bgland"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MenuActivity" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:scaleType="fitXY"
    android:src="@drawable/white_bg" />

<EditText
    android:id="@+id/bikenumber"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/getbikebutton"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="20dip"
    android:layout_marginRight="20dip"
    android:layout_marginTop="20dip"
    android:ems="10"
    android:hint="@string/hint_getbike"
    android:inputType="number"
    android:singleLine="true" >

    <requestFocus />
</EditText>

<Button
    android:id="@+id/getbikebutton"
    style="@style/OrangeButtonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/view1"
    android:layout_alignLeft="@+id/view1"
    android:layout_alignRight="@+id/view1"
    android:layout_marginBottom="10dip"
    android:layout_marginLeft="15dip"
    android:layout_marginRight="15dip"
    android:text="@string/menu_getbikebuttontext" />

<View
    android:id="@+id/view1"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_centerInParent="true"
    android:layout_margin="20dip"
    android:background="@android:color/darker_gray" />

<Button
    android:id="@+id/buttonGoToMyLoc"
    style="@style/OrangeButtonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/view1"
    android:layout_alignRight="@+id/view1"
    android:layout_below="@+id/view1"
    android:layout_marginBottom="10dip"
    android:layout_marginLeft="15dip"
    android:layout_marginRight="15dip"
    android:text="@string/menu_text_near_me" />

<Button
    android:id="@+id/buttonGoToThisLoc"
    style="@style/OrangeButtonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/view1"
    android:layout_alignRight="@+id/view1"
    android:layout_below="@+id/buttonGoToMyLoc"
    android:layout_marginLeft="15dip"
    android:layout_marginRight="15dip"
    android:layout_marginTop="10dip"
    android:text="@string/menu_text_address" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/imageView1"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="25dip"
    android:text="@string/menu_title"
    android:textColor="@android:color/black"
    android:textSize="20dip"
    android:textStyle="bold" />

<EditText
    android:id="@+id/locAddress"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView1"
    android:layout_alignRight="@+id/imageView1"
    android:layout_below="@+id/textView1"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="20dip"
    android:layout_marginRight="20dip"
    android:layout_marginTop="10dip"
    android:ems="10"
    android:hint="@string/menu_hint"
    android:inputType="text"
    android:singleLine="true"
    android:visibility="gone" >

    <requestFocus />
</EditText>

<EditText
    android:id="@+id/locAddressCity"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView1"
    android:layout_alignRight="@+id/imageView1"
    android:layout_below="@+id/locAddress"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="20dip"
    android:layout_marginRight="20dip"
    android:ems="10"
    android:hint="@string/menu_hint_city"
    android:inputType="text"
    android:singleLine="true"
    android:visibility="gone" />

</RelativeLayout>

This is the graphical result: as you can see the 2 buttons are above (and not below, as they should) the middle line (view1).

enter image description here

@Lisa your xml is wrong, use Linear Layout or work with Relative Layout proper. — Pratik Dasa, May 21 '14 at 12:58
@pratik I see no problem in using the + sign. the problem she has is that the relativeLayout has a wrap_content height and she positions the elements using layout_above — andrei, May 21 '14 at 13:12
@schopy yeah so its not proper convention of Relative Layout, she must use above and below in proper manner, + sign is not a problem, I can do that with and without + sign — Pratik Dasa, May 21 '14 at 13:17

andrei · Accepted Answer · 2014-05-21T13:06:42.890

3

Either you have to set android:layout_height="match_parent" on the RelativeLayout. Then it will know to take all the place available and center the view1 in the middle.

Or you can place android:layout_below="@+id/getbikebutton" on view1.

edited May 21 '14 at 13:06

answered May 21 '14 at 12:58

andrei

2,934
2
23
36

you can try like this layout_below="@id/view1" – vish May 21 '14 at 13:04
@schopy thank you schopy, setting `android:layout_height="match_parent"` did the trick!!! thanks a lot! – Lisa Anne May 21 '14 at 13:12

score 2 · Answer 2 · answered May 21 '14 at 13:02

You wrote:

   android:layout_above="@+id/view1"

but to reference another view, You have to do it without the "+" like this:

   android:layout_above="@id/view1"

Also, You have to first create the view, because the first button could not refer to a view that isn´t created. Your part of Layout should look like this:

    <View
android:id="@+id/view1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_centerInParent="true"
android:layout_margin="20dip"
android:background="@android:color/darker_gray" />

    <Button
android:id="@+id/getbikebutton"
style="@style/OrangeButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/view1"
android:layout_alignLeft="@+id/view1"
android:layout_alignRight="@+id/view1"
android:layout_marginBottom="10dip"
android:layout_marginLeft="15dip"
android:layout_marginRight="15dip"
android:text="@string/menu_getbikebuttontext" />


   <Button
android:id="@+id/buttonGoToMyLoc"
style="@style/OrangeButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/view1"
android:layout_alignRight="@+id/view1"
android:layout_below="@id/view1"
android:layout_marginBottom="10dip"
android:layout_marginLeft="15dip"
android:layout_marginRight="15dip"
android:text="@string/menu_text_near_me" />

placing the + sign means that the view can appear after it is referenced — andrei, May 21 '14 at 13:08

score 1 · Answer 3 · answered May 21 '14 at 13:02

1

Use linear layout, then elements get underneath each other.

answered May 21 '14 at 13:02

sparrkli

661
1
7
17

RelativeLayout: why do not my buttons show below the line?

3 Answers3