Question

I have the following layout:

<LinearLayout width:fill height:fill >
  <RelativeLayout width:fill height:wrap >
    <ImageView width:fill height:wrap >
    <LinearLayout width:wrap height:wrap />
  </RelativeLayout>
</LinearLayout>

The innermost LinearLayout seems to have no idea that it is inside the RelativeLayout when it comes to vertical properties. Gravity works only horizontally. For all intents and purposes (vertically), the inner LinearLayout thinks that the outer LinearLayout is its parent. Aligning parent Top/Bottom stretches it and the RelativeLayout to fill the outer LinearLayout.

Ultimately what I want here is for the relative layout height to wrap the imageview almost as if it was its background (though it’s meant to be an overlay on top of another view on top of the background), and the linear layout to simply work inside the constraints of the relative layout.

Furthermore, I want to be able to clip anything that goes outside the bounds of the relative layout wrapping the imageview. What’s my best option here?

Answer 1

I think your issue here is that wrap_content does not bound the upper limit of the View (at least by the parent). As such, the height of your RelativeLayout can go on to the full size of it’s parent. If it’s parent wasn’t wrap_content too, it would stretch out to it’s parent and so forth until it reaches a parent that has an upper-bound.

In this case, your top parent is bound by the size of the phone, so it stops there. Instead of using gravity on your inner-most LinearLayout. Use the attribute layout_centerInParent="true" on your inner-most LinearLayout. Unless the layout becomes bigger than your ImageView it should conform to the center of your RelativeLayout.

EDIT:
You may also want to experiment with the different Scale Types of the ImageView. There are some that will scale the image as big as it can get without cropping or distorting the ratio. There are some that will always fill the entire view but may crop or distort the image.