Seekbar outer shadow on progress part

Question

I am customizing a seekbar in Android, trying to get both inner and outer shadow (bottom side) of the filled section only.

i would like a result like this:

At the moment, I created:

• the rounded borders
• the gradient effect
• the custom thumb
• the inner shadow (on top side of progress, very small)

I am not able to create the outer shadow (on the bottom side of progress).

This is my code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <size android:height="16dp"/>
            <corners android:radius="20dp"/>
            <solid android:color="@color/background_unselected_gray"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <layer-list>
                <item>
                    <shape>
                        <corners
                            android:bottomLeftRadius="20dp"
                            android:topLeftRadius="20dp"/>
                        <gradient
                            android:endColor="@color/button_red_gradient_bottom"
                            android:startColor="@color/button_red_gradient_top"/>
                    </shape>
                </item>

                <item>
                    <shape>
                        <corners
                            android:bottomLeftRadius="18dp"
                            android:topLeftRadius="18dp"/>
                        <gradient
                            android:angle="270"
                            android:centerColor="@color/horizontal_seekbar_inner_shadow_center"
                            android:centerY="0.1"
                            android:endColor="@color/transparent"
                            android:startColor="@color/horizontal_seekbar_inner_shadow_top"/>
                    </shape>
                </item>
            </layer-list>
        </scale>
    </item>
</layer-list>

Answer 1

I found solution myself.

SOLUTION:

I just added another item into layer-list of id:progress item with:

• gradient from dark gray to transparent to simulate a shadow
• a padding using bottom property

This is the code of added item:

<item android:bottom="-3dp">
      <shape>
          <corners
              android:bottomLeftRadius="20dp"
              android:topLeftRadius="20dp"/>
                  <gradient
                      android:angle="270"
                      android:centerColor="@color/horizontal_seekbar_outer_shadow_center"
                      android:centerY="0.75"
                      android:endColor="@color/transparent"
                      android:startColor="@color/horizontal_seekbar_outer_shadow_top"/>
      </shape>
</item>

I applied a kind of negative padding to this item so it is behind progress bar.

Full code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <size android:height="16dp"/>
            <corners android:radius="20dp"/>
            <solid android:color="@color/background_unselected_gray"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <layer-list>
                <item android:bottom="-3dp"
                      android:left="1dp">
                    <shape>
                        <corners
                            android:bottomLeftRadius="20dp"
                            android:topLeftRadius="20dp"/>
                        <gradient
                            android:angle="270"
                            android:centerColor="@color/horizontal_seekbar_outer_shadow_center"
                            android:centerY="0.75"
                            android:endColor="@color/transparent"
                            android:startColor="@color/horizontal_seekbar_outer_shadow_top"/>
                    </shape>
                </item>

                <item>
                    <shape>
                        <corners
                            android:bottomLeftRadius="20dp"
                            android:topLeftRadius="20dp"/>
                        <gradient
                            android:endColor="@color/button_red_gradient_bottom"
                            android:startColor="@color/button_red_gradient_top"/>
                    </shape>
                </item>

                <item>
                    <shape>
                        <corners
                            android:bottomLeftRadius="18dp"
                            android:topLeftRadius="18dp"/>
                        <gradient
                            android:angle="270"
                            android:centerColor="@color/horizontal_seekbar_inner_shadow_center"
                            android:centerY="0.1"
                            android:endColor="@color/transparent"
                            android:startColor="@color/horizontal_seekbar_inner_shadow_top"/>
                    </shape>
                </item>
            </layer-list>
        </scale>
    </item>
</layer-list>