How to create multi-colored shape background in Android activity

Question

I am looking to make my Activity's background into two colors. A custom color on top and a white color on the bottom. The thing is I don't want to separate them with a horizontal line. I would like to create something very similar to the image provided. I really wouldn't know where to start to create this...

I tried this, but again, I don't really want to have a horizontal separation. I would prefer a separation more like the image.

Here's what I've tried so far.

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FAFAFA" />
        </shape>
    </item>
    <item android:bottom="300dp" android:top="0dp" android:left="0dp" android:right="0dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</layer-list>

Answer 1

You need something like this as a background of your layout.

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <path
        android:fillColor="@color/colorPrimary"
        android:pathData="M0,0 L0,50 L500,80 L500,0 z" />
</vector>

This looks like this in my emulator.