I would like to position one image on top of another while still preserving aspect ratio. Here's what I currently have.
<android.support.percent.PercentRelativeLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- 16 / 9 Image -->
<ImageView
android:scaleType="centerCrop"
app:layout_aspectRatio="178%"
app:layout_widthPercent="100%"
app:imageUrl="@{API.Backdrop(basePath, show)}" />
<!-- 27/40 Aspect Ratio -->
<ImageView
android:scaleType="centerCrop"
app:layout_aspectRatio="67.5%"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
app:imageUrl="@{API.Poster(basePath, show)}"/>
</android.support.percent.PercentRelativeLayout>
This layout results in the second ImageView
not rendering. It's probably caused by PercentRelativeLayout
's layout_height
being wrap_content
and the second ImageView
's height being based on the PercentRelativeLayout
's height.
What I want to happen:
PercentRelativeLayout
should take the height of the firstImageView
(16/9).The second
ImageView
(27/40) gets its height from thePercentRelativeLayout
(and indirectly from the firstImageView
).The width of the second
ImageView
is calculated from its implicit height (including padding) andapp:layout_aspectRatio
.The second
ImageView
should overlap the left side of the firstImageView
.
Here's a picture of what I want: