Why does image in relative layout with "fill_parent" hide button underneath?

Question

I'm trying to increase the size of an image in relative layout. Right now, its width and height are set to wrap_content. When I set them fill_parent, the image grows, but pushes the button underneath off the display. The relevant XML is below. What am I doing wrong?

Edit: Thanks for all the answers, but so far, if I set the height of the image to fill_parent or match_parent, it always extends to the bottom of the display, regardless of if the button is in or outside of relative layout. Why does the relative layout ignore what's beneath it?

<LinearLayout>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/relativelayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/myImageView"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:src="@drawable/apple"
            android:alpha=".5"
            android:paddingBottom="0dp"
            android:adjustViewBounds="true" />
        <TextView
            android:id="@+id/myImageViewText"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Sample"
            android:textColor="#000000"
            android:singleLine="true"
            android:layout_alignLeft="@+id/myImageView"
            android:layout_alignStart="@+id/myImageView"
            android:layout_alignParentTop="true" />


    </RelativeLayout>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/enterPluButton"
        android:background="#FFBD5C"
        android:textColor="#000000"
        android:text="Submit" />
</LinearLayout>

I updated my answer. You have to use layout_alignBottom instead of layout_below on the Button if you want it to not be pushed downwards by the ImageView. — bytehala, May 16 '15 at 11:35

score 1 · Answer 1 · answered May 16 '15 at 04:15

1

Set android:layout_alignParentBottom="true" for button.
Set android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/enterPluButton" for your RelativeLayout
Set android:layout_width="match_parent" android:layout_height="match_parent" for the ImageView

answered May 16 '15 at 04:15

Muthukrishnan Suresh

241
1
8

Thanks for trying, but unfortunately, the match_parent or fill_parent on the layout height of the ImageView automatically extends it to the bottom, covering up the button. – Jack BeNimble May 16 '15 at 04:56
Change the Parent layout to relative layout – Muthukrishnan Suresh May 24 '15 at 07:13

bytehala · Answer 2 · 2015-05-16T11:34:56.783

I understand now what you're trying to do. Try this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativelayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">


    <ImageView
        android:id="@+id/myImageView"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_centerInParent="true"
        android:adjustViewBounds="true"
        android:alpha=".5"
        android:paddingBottom="0dp"
        android:src="@drawable/apple" />

    <TextView
        android:id="@+id/myImageViewText"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/myImageView"
        android:layout_alignParentTop="true"
        android:layout_alignStart="@+id/myImageView"
        android:gravity="center"
        android:singleLine="true"
        android:text="Sample"
        android:textColor="#000000" />

    <Button
        android:id="@+id/enterPluButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/myImageView"
        android:background="#FFBD5C"
        android:text="Submit"
        android:textColor="#000000" />

</RelativeLayout>

score 0 · Answer 3 · answered May 16 '15 at 03:15

In RelativeLayouts views are positioneed relatively to the top left of the "ViewGroup". To get the ImageView to stop hiding the Button, or any other view at that matter, add the layout_below attribute.

<TextView
    android:layout_below="@+id/relativelayout"
    android:id="@+id/myImageViewText"
    android:layout_width="fill_parent"
    ...
/>

Also, for ImageView it is not advised, unless being used for a background, that you set layout_height to fill_parent or match_parent.

You would get the desired result if you place the Button in the relative layout and position it under the text view.

score 0 · Answer 4 · answered May 16 '15 at 03:43

RelativeLayout positions View relative of each other. if it does not have a relation to a another child View it calculates with the Parent View which is the RelativeLayout. This is why you are having that. Why don't wrap the LinearLayout in a ScrollView or give the RelativeLayout a fixed dimension

Why does image in relative layout with "fill_parent" hide button underneath?

4 Answers4