Android PercentRelativeLayout `aspectRatio` and Implicit Height

266 Views Asked by At

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 first ImageView (16/9).

  • The second ImageView (27/40) gets its height from the PercentRelativeLayout (and indirectly from the first ImageView).

  • The width of the second ImageView is calculated from its implicit height (including padding) and app:layout_aspectRatio.

  • The second ImageView should overlap the left side of the first ImageView.

Here's a picture of what I want:

relative layout example

0

There are 0 best solutions below