How to draw angled rectangle as background for ViewPager android

Question

I want to implement a ViewPager having angled rectangle as background as shown in the image. I have tried to get it done by setting xml as background. But it only displays properly if we give image in that xml itself and if I try to manage it runtime then it is not taking that angled background.

This is the drawable I have attached to custom viewpager layout

<item android:top="300dp"
android:bottom="-300dp"
android:left="0dp"
android:right="-300dp">
<rotate
    android:fromDegrees="-10"
    android:pivotX="0%"
    android:pivotY="100%">
    <shape
        android:shape="rectangle">
        <solid
            android:color="@color/white"/>
    </shape>
</rotate>

AND this is the custom viewpager layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <RelativeLayout
        android:id="@+id/rl_image"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@drawable/custom_imageview">

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/rl_image"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="-60dp">

        <de.hdodenhof.circleimageview.CircleImageView
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/profile_image"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@drawable/fashion1"
            app:civ_border_color="#FFF"
            app:civ_border_width="1dp" />

    </RelativeLayout>
</RelativeLayout>

This is how it should display

Can anyone please tell me how to do it?

Answer 1

This is how it should display

checked this link.

based on above link i guess as page swipes you want change background.

solution :

1. use constraint_layout or frame_layout.
2. add view pager as match_parent in height and width.
3. angle view use it and view on top of view_pager.

suggestion : use constraint layout.

note : above solution will not change view_pager dimensions (dont change it since view is complex, if you change behaviour unpredictable). Only you end up with place custom view on top of pager.

Answer 2

If you need to learn how to create a diagonal cut you could have a look at this tutorial: https://medium.com/@adinugroho/create-diagonal-cut-view-in-android-5a376eca6a1c

If you need a library to do it for you then have a look at this library: https://github.com/florent37/DiagonalLayout