Progress bar shadow only on filled part

Question

Implementing a progress bar in android, trying to get a drop shadow on the bottom part of the filled section only, like this:

API level is KitKat and up but i wont mind a solution that applies to LOLLIPOP and up only. Elevation does not seem to work, nor do the card View. any sugesstions?

Answer 1

Create the following xml shape and place it as your progressBar background.

** The 10dp in the xml assumes the progressBar is 20dp in Height and that you want the shadow to be exactly half of it.

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:id="@android:id/background">
            <layer-list>
                <item android:bottom="10dp">
                    <shape android:shape="rectangle">
                        <solid android:color="@color/orange" />
                    </shape>
                </item>
            </layer-list>
        </item>

        <item android:id="@android:id/progress">
            <clip>
                <layer-list>
                    <item>
                        <shape android:shape="rectangle">
                            <solid android:color="@color/green" />
                        </shape>
                    </item>
                    <item android:top="10dp">
                        <shape android:shape="rectangle">
                            <gradient
                                android:angle="90"
                                android:endColor="@color/black"
                                android:startColor="@color/white" />
                        </shape>
                    </item>
                </layer-list>
            </clip>
        </item>
    </layer-list>