Material UI Layout divide by angle line

Question

I want to implement ui like image below.taken from here . Layout divide by angle line in half.Don't have any idea how to implement it.Any help will be appreciated. Not getting any hint from web

Answer 1

Finally after long search i found this sample Android-Diagonal-Cut-View

Height of item need to be declare in XML. Add XML in drawable use below code snippet.

Drawable - background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/colorPrimary"/>
<item>
<bitmap android:src="@drawable/bebe" android:gravity="center" android:alpha="0.1"/>
</item>

<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="?android:colorBackground"/>
</shape>
</rotate>
</item>
</layer-list>

Usage :

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