Chamfer progress bar on Android

Question

Is it possible to chamfer the progress bar on Android without writing my own class of the progress bar?

Current look:

Desired look:

This is how my drawable looks at the moment:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/border">
        <shape android:shape="rectangle">
            <padding android:bottom="2dp"
                     android:left="2dp"
                     android:right="2dp"
                     android:top="2dp" />
            <corners android:radius="12dp" />
            <solid android:color="#ffffff" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />
            <solid android:color="#e0e0e0" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle">
                <corners android:radius="10dp" />
                <solid android:color="#b3e5fc" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <corners android:radius="10dp" />
                <solid android:color="#7ed9f0" />
            </shape>
        </clip>
    </item>
</layer-list>

Answer 1

Create a VectorDrawable custom_progressbar_shape.xml as a resource file. Create your desired shape using android:pathData (View this link for learning more on VectorDrawable pathData) like the triangle I created similar to your provided shape:

custom_progressbar_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/custom"
    android:height="100dp"
    android:width="100dp"
    android:viewportHeight="100"
    android:viewportWidth="60">
    <group
        android:name="triableGroup">
        <path
            android:name="triangle"
            android:fillColor="#7ed9f0"
            android:pathData="M 0,0 L 50,0 L 0,100 z" />
    </group>
</vector>

Add this VectorDrawable to your given Drawable, say custom_progressbar_horizontal.xml like this:

custom_progressbar_horizontal.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:drawable="@drawable/custom_progressbar_shape"
        android:gravity="center_vertical|fill_horizontal">
    ...
    </item>
    ...
</layer-list>

Use this Drawable as your custom ProgressBar style inside styles.xml:

<style name="MyProgressBarStyle" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
        <item name="colorControlActivated">#7ed9f0</item>
        <item name="colorControlHighlight">#b3e5fc</item>
        <item name="android:progressDrawable">@drawable/custom_progressbar_horizontal</item>
        <item name="android:minWidth">200dp</item>
</style>

And then set this style to your ProgressBar in Layout XML file:

<ProgressBar
        android:id="@+id/MyProgressBar"
        android:padding="10dp"
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/MyProgressBarStyle"
        android:progress="30"
        android:secondaryProgress="60"/>