web-dev-qa-db-fra.com

Thumb SeekBar personnalisé montrant l'arrière-plan indésirable

J'ai essayé de créer un SeekBar personnalisé. Il est censé avoir des coins arrondis. Même la progression de SeekBar devrait avoir des coins arrondis des deux côtés. Je n'ai pas besoin d'un pouce. Quelque chose comme ça.

Custom Seekbar with round corners

Pour y parvenir, j'ai fait un layer-list fichier xml, nommé custom_seekbar.xml comme suit:

<?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 Android:shape="rectangle">
            <corners Android:radius="20dp" />
            <solid Android:color="#F0E9DC" />
        </shape>
    </item>

    <item Android:id="@Android:id/secondaryProgress">
        <clip>
            <shape Android:shape="rectangle">
                <corners Android:radius="20dp" />
                <solid Android:color="#F0E9DC" />
            </shape>
        </clip>
    </item>

    <item Android:id="@Android:id/progress">
        <clip>
            <shape Android:shape="rectangle">
                <corners Android:radius="20dp" />
                <solid Android:color="#E38F71" />
            </shape>
        </clip>
    </item>

</layer-list>

Et pour faire face au coin rond mobile, j'ai pensé à utiliser un pouce circulaire avec une hauteur égale à celle du SeekBar. Voici thumb.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">

    <size Android:height="16dp"
        Android:width="16dp"/>

    <corners Android:radius="20dp"/>

    <solid Android:color="#E38F71"/>

</shape>

Et je montre le SeekBar comme ceci dans mon activité:

<SeekBar
        Android:layout_width="250dp"
        Android:layout_height="16dp"
        Android:layout_centerInParent="true"
        Android:progressDrawable="@drawable/custom_seekbar"
        Android:thumb="@drawable/thumb" />

Le seul problème est le pouce. Il ne s'affiche pas comme prévu. Il a un arrière-plan indésirable comme celui-ci:

Custom Seekbar thumb with unwanted background

Si je mets un pouce transparent, la progression n'est plus ronde. J'ai même essayé d'utiliser une forme ovale pour le pouce. Quelqu'un s'il vous plaît dites-moi où je me trompe? Ou s'il existe un autre moyen d'obtenir les résultats souhaités. Toute aide sera grandement appréciée.

androidandroid-seekbar
23
Anjani

ajouter Android:splitTrack="false", résoudra votre problème. J'utiliserais également Android:shape="oval", au lieu de rectangle avec des coins arrondis, pour votre thumb.xml

76
Blackbelt