How to set a background for ViewPager2 to have an image that will have rounded corners only on the left side?

374 Views Asked by At

My current implementation is to create a ImageView sibling element. If I use any of the aspect ratio-preserving scaleType other than centerCrop, the image only covers the ViewPager2 partially, which is not what I want.

(I want the image to maintain it's aspect ratio, fill the ViewPager2, while also having rounded corners on the left)

If I put scaleType as "centerCrop", the ViewPager2 is fully covered by the image, but the rounded corners on the left are gone.

...
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/homeViewPager"
            android:layout_width="975dp"
            android:layout_height="match_parent"

            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <ImageView
            android:layout_width="975dp"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@drawable/rounded_corners_left_only"
            android:src="@drawable/grey_hexagon_tiles"
            android:scaleType="centerCrop"
            />
...

rounded_corners_left_only.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/concierge_background_color"/>
    <corners
        android:topLeftRadius="20dp"
        android:bottomLeftRadius="20dp"
        />
</shape>
0

There are 0 best solutions below