How to create geometric shape for all of the screen sizes?

Issue

I want to create geometric shape for all of the screen sizes in Android. I wrote the code for this case. But my shape changes in other screen sizes. I want to create shape like the following picture

And my code is:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate android:fromDegrees="0">
            <shape android:shape="rectangle">
                <solid android:color="@color/colorPrimaryDark" />
            </shape>
        </rotate>
    </item>

    <item android:top="180dp" android:bottom="-100dp" android:left="-70dp" android:right="-50dp">
        <rotate android:fromDegrees="6">
            <shape android:shape="rectangle">
                <solid android:color="@color/base_color6" />
            </shape>
        </rotate>
    </item>
</layer-list>

Solution

I did this but it breaks on different resolution. Because of the angle view are distort and that causes major UI issue. To break that, I create a WEBP Image with that angle and set it to the background. And set the whole view around that in ConstraintLayout with group and barrier. Now it pretty much work fine on various resolution device

Answered By - Ankit Tale