Search code examples
androidlayoutandroid-5.0-lollipopandroid-seekbar

Custom seekbar thumb not transparent on Lollipop API21


This is my seekbar:

<SeekBar
    android:id="@+id/seek1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:progressDrawable="@drawable/style_progressbar"
    android:thumb="@drawable/style_progressbar_circle"
    android:progress="20" />

This is style_progressbar.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle" >
            <corners android:radius="5dp" />
            <gradient
                android:angle="270"
                android:endColor="@color/gris_hint"
                android:startColor="@color/gris_hint" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle" >
                <corners android:radius="5dp" />
                <gradient
                    android:angle="270"
                    android:endColor="@color/gris"
                    android:startColor="@color/gris" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle" >
                <corners android:radius="5dp" />
                <gradient
                    android:angle="270"
                    android:endColor="@color/gris"
                    android:startColor="@color/gris" />
            </shape>
        </clip>
    </item>
</layer-list>

And this is style_progressbar_circle.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/red_scrubber_control_disabled_holo" android:state_enabled="false"/>
    <item android:drawable="@drawable/red_scrubber_control_pressed_holo" android:state_pressed="true"/>
    <item android:drawable="@drawable/red_scrubber_control_focused_holo" android:state_selected="true"/>
    <item android:drawable="@drawable/red_scrubber_control_normal_holo"/>
</selector>    

This is how I see it in Lollipop

Seekbar Lollipop

This is how it should look, this is how it looks on Kitkat and lower versions.

Seekbar KitKat

Any idea? I've got some issues with layouts on Lollipop but this is the only one I can't solve for my own.


Solution

  • The Material seek bar has split track enabled by default. You need to turn it off.

    <SeekBar
        ....
        android:splitTrack="false" />