Ziv Kesten Ziv Kesten - 1 month ago 16
Android Question

Progress bar shadow only on filled part

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

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

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>