Android - Barre de recherche de style

229

Je voulais créer une barre de recherche qui ressemble à celle de l'image ci-dessous.

entrez la description de l'image ici

En utilisant la barre de recherche par défaut, j'obtiendrai quelque chose comme ceci:

entrez la description de l'image ici

Donc, ce dont j'ai besoin, c'est de ne changer que la couleur. Je n'ai besoin d'aucun style supplémentaire. Existe-t-il une approche simple pour ce faire ou dois-je créer mon dessin personnalisé.?

J'ai essayé d'en construire un personnalisé, mais je n'ai pas pu obtenir exactement celui indiqué ci-dessus. Après avoir utilisé un dessin personnalisé, ce que j'obtiens est comme indiqué ci-dessous:

entrez la description de l'image ici

Si j'ai besoin de créer celui personnalisé, veuillez suggérer comment réduire la largeur de la ligne de progression ainsi que la forme.

mon implémentation personnalisée:

background_fill.xml:

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

    <gradient
        android:angle="90"
        android:centerColor="#FF555555"
        android:endColor="#FF555555"
        android:startColor="#FF555555" />

    <corners android:radius="1dp" />

    <stroke
        android:width="1dp"
        android:color="#50999999" />
    <stroke
        android:width="1dp"
        android:color="#70555555" />

</shape>

progress_fill.xml

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

    <gradient
        android:angle="90"
        android:centerColor="#FFB80000"
        android:endColor="#FFFF4400"
        android:startColor="#FF470000" />

    <corners android:radius="1dp" />

    <stroke
        android:width="1dp"
        android:color="#50999999" />
    <stroke
        android:width="1dp"
        android:color="#70555555" />

</shape>

progress.xml

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

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/background_fill"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/progress_fill" />
    </item>

</layer-list>

thumb.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <gradient
        android:angle="270"
        android:endColor="#E5492A"
        android:startColor="#E5492A" />

    <size
        android:height="20dp"
        android:width="20dp" />

</shape>

barre de recherche:

<SeekBar
        android:id="@+id/seekBarDistance"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="88dp"
        android:progressDrawable="@drawable/progress"
        android:thumb="@drawable/thumb" >
    </SeekBar>
suresh cheemalamudi
la source
40
Merci d'avoir montré un exemple de changement de style de barre de recherche XD. (pas beaucoup sur internet).
Helin Wang

Réponses:

297

Je voudrais extraire les drawables et xml du code source Android et changer sa couleur en rouge. Voici un exemple de la façon dont j'ai terminé cela pour les tirages mdpi:

Personnalisé red_scrubber_control.xml(ajouter à res / drawable):

<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>

Douane: red_scrubber_progress.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/red_scrubber_track_holo_light"/>
    <item android:id="@android:id/secondaryProgress">
        <scale
            android:drawable="@drawable/red_scrubber_secondary_holo"
            android:scaleWidth="100%" />
    </item>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/red_scrubber_primary_holo"
            android:scaleWidth="100%" />
    </item>

</layer-list>

Copiez ensuite les drawables requis à partir du code source Android, j'ai pris ce lien

Il est bon de copier ces drawables pour chaque hdpi, mdpi, xhdpi. Par exemple, j'utilise uniquement mdpi:

Ensuite, en utilisant Photoshop, changez la couleur du bleu au rouge:

red_scrubber_control_disabled_holo.png: red_scrubber_control_disabled_holo

red_scrubber_control_focused_holo.png: red_scrubber_control_focused_holo

red_scrubber_control_normal_holo.png: red_scrubber_control_normal_holo

red_scrubber_control_pressed_holo.png: red_scrubber_control_pressed_holo

red_scrubber_primary_holo.9.png: red_scrubber_primary_holo.9

red_scrubber_secondary_holo.9.png: red_scrubber_secondary_holo.9

red_scrubber_track_holo_light.9.png: red_scrubber_track_holo_light.9

Ajoutez SeekBar à la mise en page:

<SeekBar
    android:id="@+id/seekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progressDrawable="@drawable/red_scrubber_progress"
    android:thumb="@drawable/red_scrubber_control" />

Résultat:

entrez la description de l'image ici

andrew
la source
Andrew, merci pour la bonne réponse. J'ai un problème avec ça. Lorsque red_scrubber_controlj'utilise le drawable pour le pouce, je tombe en panne. Si tous les tiroirs dans le sélecteur sont identiques, cela fonctionne bien, mais si je change l'un d'eux, j'obtiens une Resources$NotFoundException: File .../red_scrubber_control.xml from drawaable resource ID...pensée?
karl
2
Oups. Il s'avère qu'il était lié à stackoverflow.com/questions/6669296/… . La nouvelle image que j'essayais d'ajouter était accidentellement 37 Mo au lieu de 2 Ko ...
karl
Existe-t-il de toute façon à utiliser @dimenpour définir la taille du pouce en fonction de l'écran?
Si8
1
@ SiKni8 Vous pouvez définir différentes dimensions pour différentes tailles d'écran en fonction des paramètres normal, large, xlarge, sw ou w pour le dossier de valeurs. Ensuite, utilisez simplement cette dimension dans votre mise en page, style ou thème. Vérifiez ce lien
Andrew
1
Merci pour le lien vers le générateur Android Holo Colors. C'est très utile.
Arbres
66

Ma réponse est inspirée de la réponse d'Andras Balázs Lajtha qui permet de travailler sans fichier xml

seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
Fred Dupont
la source
La couleur de la boîte de dialogue de progression a changé, mais pas celle des pouces. Pourquoi?
Yonatan Nir
7
Si vous n'avez pas besoin de le faire dans le code et que vous ne voulez pas créer de listes de couches et de dessins, etc., vous pouvez également le faire dans le xml de la barre de recherche android:progressTint="@color/my_color" android:thumbTint="@color/another_color"
Daveloper87
59

Si vous voulez exactement la même barre mais en rouge, vous pouvez ajouter un filtre de couleur PorterDuff par programmation. Vous pouvez obtenir chaque dessin que vous souhaitez coloriser grâce aux méthodes de la classe de base ProgressBar . Ensuite, définissez un filtre de couleur pour cela.

mySeekBar.getProgressDrawable().setColorFilter(new PorterDuffColorFilter(srcColor, PorterDuff.Mode.MULTIPLY));

Si le réglage de couleur souhaité ne peut pas être effectué via un filtre Porter Duff, vous pouvez spécifier votre propre filtre de couleur .

Andras Balázs Lajtha
la source
3
Je ne sais pas depuis quel SDK, proly 21, mais si vous voulez une même icône juste une couleur différente, ajoutez simplement la couleur "colorAccent" dans colors.xml et il l'utilisera
tibbi
57

Style de matériau personnalisé Android pour la barre de recherche, pour d'autres personnalisations de la barre de recherche http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples

<style name="MySeekBar" parent="Widget.AppCompat.SeekBar">
    <item name="android:progressBackgroundTint">#f4511e</item>
    <item name="android:progressTint">#388e3c</item>
    <item name="android:colorControlActivated">#c51162</item>
</style>

style de matériau personnalisé pour la barre de recherche

Arnav Rao
la source
2
Excellente solution pour Android> 21
saltandpepper
4
Êtes-vous sûr que colorControlActivatedc'est le bon paramètre pour le pouce? Ça devrait l'être thumbTint.
Peter Knut
Quelle est la solution pour ci-dessous API 21?
Faisal Shaikh
42

Remplacez simplement les atributtes de couleur par votre couleur

background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">

    <stroke android:width="1dp" android:color="#D9D9D9"/>
    <corners android:radius="1dp" />

</shape>

progress.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="line">

    <stroke android:width="1dp" android:color="#2EA5DE"/>
    <corners android:radius="1dp" />

</shape>

style.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/seekbar_background"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_progress" />
    </item>

</layer-list>

thumb.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <size android:height="30dp" android:width="30dp"/>
    <stroke android:width="18dp" android:color="#882EA5DE"/>
    <solid android:color="#2EA5DE" />
    <corners android:radius="1dp" />

</shape>
ionutgyn
la source
1
Comment utiliser les fichiers dans une barre de recherche?
mungaih pk
@RahulRastogi comment avez-vous utilisé ces fichiers? Un peu idiot que cette réponse soit si populaire avec 0 explication sur la façon dont cela fonctionne ...
Selali Adobor
1
@AssortedTrailmix Je l'ai fait il y a longtemps. Essayez de définir des attributs tels que: android: thumb = "@ drawable / thumb" et dans android: progressDrawable, définissez le fichier dessinable de la liste des couches mentionné ci-dessus. Vous pouvez essayer: mindfiremobile.wordpress.com/2014/05/20/…
Rahul Rastogi
37

Google a rendu cela plus facile dans le SDK 21. Nous avons maintenant des attributs pour spécifier les couleurs de teinte du pouce:

android:thumbTint
android:thumbTintMode
android:progressTint

http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTint http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTintMode

k2col
la source
7
progressTint, aussi.
afollestad
1
Les listes de teintes s'appliquent à chaque élément d'interface utilisateur sur Android à partir de l'API 21, c'est ainsi que colorAccent est appliqué.
afollestad
16

Toutes ces réponses sont obsolètes.

En 2019, il est plus facile de personnaliser votre barre de recherche à votre couleur préférée en la changeant ProgressBaren

<SeekBar
            android:id="@+id/seekBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:progressTint="#36970f"
            android:thumbTint="#36970f"
            />

Styliser la couleur de votre barre de recherche par programme, essayez le code suivant

        seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
        seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
Giannis Mpountouridis
la source
Pourquoi déconseillé?
CoolMind
parce que les bibliothèques ont changé
Giannis Mpountouridis
Vous pouvez voir la réponse de @Ahamadullah Saikat ( stackoverflow.com/a/50074961/2914140 ) ou lvguowei.me/post/customize-android-seekbar-color . Ils n'utilisent pas de bibliothèques et définissent les couleurs SeekBar même pour les anciennes API.
CoolMind
11

Comme mentionné ci-dessus (@andrew), créer un SeekBar personnalisé est super facile avec ce site - http://android-holo-colors.com/

Activez simplement SeekBar, choisissez la couleur, recevez toutes les ressources et copiez-les dans le projet. Appliquez-les ensuite en xml, par exemple:

  android:thumb="@drawable/apptheme_scrubber_control_selector_holo_light"
  android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_light"
Anton Kizema
la source
10

production:

entrez la description de l'image ici

dans le fichier de mise en page:

        <android.support.v7.widget.AppCompatSeekBar
            android:id="@+id/seekBar_bn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:max="25"
            android:minHeight="10dp"
            android:progress="10"
            android:progressDrawable="@drawable/progress"
            android:thumb="@drawable/custom_thumb" />

drawable / progress.xml

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

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/background_fill"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/progress_fill" />
    </item>

</layer-list>

drawable / background_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="6dp"
        android:left="-6dp"
        android:right="-6dp"
        android:top="6dp">

        <shape android:shape="rectangle">
            <solid android:color="#888888" />
            <stroke
                android:width="5dp"
                android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

drawable / progress_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="6dp"
        android:left="-6dp"
        android:right="-6dp"
        android:top="6dp">

        <shape android:shape="rectangle">
            <solid android:color="@color/myPrimaryColor" />
            <stroke
                android:width="5dp"
                android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

drawable / custom_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/myPrimaryColor"/>
            <size
                android:width="22dp"
                android:height="22dp"/>
        </shape>
    </item>
</layer-list>

colours.xml

<color name="myPrimaryColor">#660033</color>
Ahamadullah Saikat
la source
1
ne savait pas que AppCompat Seekbar existait
Pierre
10

Il suffit de régler

android:maxHeight="3dp"
android:minHeight="3dp"

C'est tout

Dimanche G Akinsete
la source
9
<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:progressTint="@color/red"
android:thumbTint="@color/red" />

fonctionne comme même la réponse sélectionnée. pas besoin de créer de fichier dessinable ou autre. (IN 5.0 uniquement)

Haroon Ahmed
la source
5

Par défaut, Android associera la couleur de progression de votre curseur à

`<item name="colorAccent">`

valeur dans votre styles.xml . Ensuite, pour définir une image de pouce de curseur personnalisé, utilisez simplement ce code dans le bloc de mise en page XML de votre SeekBar :

android:thumb="@drawable/slider"
IgorGanapolsky
la source
5
LayerDrawable progressDrawable = (LayerDrawable) mSeekBar.getProgressDrawable();

// progress bar line *progress* color
Drawable processDrawable = progressDrawable.findDrawableByLayerId(android.R.id.progress);

// progress bar line *background* color
Drawable backgroundDrawable = progressDrawable.findDrawableByLayerId(android.R.id.background);

// progress bar line *secondaryProgress* color
Drawable secondaryProgressDrawable = progressDrawable.findDrawableByLayerId(android.R.id.secondaryProgress);
processDrawable.setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);

// progress bar line all color
mSeekBar.getProgressDrawable().setColorFilter(Color.BLUE, PorterDuff.Mode.SRC_IN);

// progress circle color
mSeekBar.getThumb().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
Hugo
la source
4

Pour les API <21 (et> = 21), vous pouvez utiliser la réponse de @Ahamadullah Saikat ou https://www.lvguowei.me/post/customize-android-seekbar-color/ .

entrez la description de l'image ici

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="3dp"
    android:minHeight="3dp"
    android:progress="50"
    android:progressDrawable="@drawable/seek_bar_ruler"
    android:thumb="@drawable/seek_bar_slider"
    />

drawable / seek_bar_ruler.xml:

<?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">
            <solid
                android:color="#94A3B3" />
            <corners android:radius="2dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <solid
                    android:color="#18244D" />
                <corners android:radius="2dp" />
            </shape>
        </clip>
    </item>
</layer-list>

drawable / seek_bar_slider.xml:

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

    <solid android:color="#FFFFFF" />
    <stroke
        android:width="4dp"
        android:color="#18244D"
        />
    <size
        android:width="25dp"
        android:height="25dp"
        />
</shape>
CoolMind
la source
3

Si vous utilisez SeekBar par défaut fourni par Android Sdk, c'est un moyen simple de changer la couleur de cela. allez simplement dans color.xml dans /res/values/colors.xml et changez colorAccent.

<resources>
    <color name="colorPrimary">#212121</color>
    <color name="colorPrimaryDark">#1e1d1d</color>
     <!-- change below line -->
    <color name="colorAccent">#FF4081</color>
</resources>
sang rouge
la source
2

Je change la background_fill.xml

<?xml version="1.0" encoding="UTF-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<size android:height="1dp" />
<gradient
    android:angle="0"
    android:centerColor="#616161"
    android:endColor="#616161"
    android:startColor="#616161" />
<corners android:radius="0dp" />
<stroke
    android:width="1dp"
    android:color="#616161" />
<stroke
    android:width="1dp"
    android:color="#616161" />
</shape>

et le progress_fill.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<size android:height="1dp" />
<gradient
    android:angle="0"
    android:centerColor="#fafafa"
    android:endColor="#fafafa"
    android:startColor="#fafafa" />
<corners android:radius="1dp" />
<stroke
    android:width="1dp"
    android:color="#cccccc" />
<stroke
    android:width="1dp"
    android:color="#cccccc" />
 </shape>

pour faire le fond et la 1dphauteur de progression .

vrunoa
la source
2

Un moyen simple de changer la couleur de la barre de recherche ...

 <ProgressBar
            android:id="@+id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:theme="@style/Progress_color"/>

Style: Progress_color

 <style name="Progress_color">
    <item name="colorAccent">@color/white</item> <!-- Whatever color you want-->
</style>

changement de classe java ProgressDrawable ()

seek_bar.getProgressDrawable().setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.MULTIPLY);
Mathan Chinna
la source
1

Si vous regardez les ressources Android, la barre de recherche utilise en fait des images.

Vous devez faire un dessinable qui est transparent en haut et en bas pour dire 10px et la ligne centrale 5px est visible.

Reportez-vous à l'image ci-jointe. Vous devez le convertir en NinePatch.

entrez la description de l'image ici

Sagar Waghmare
la source
pouvez-vous s'il vous plaît suggérer quelques articles sur le même?
suresh cheemalamudi
L'un des bons liens que j'ai trouvés - mokasocial.com/2011/02/…
Sagar Waghmare
La solution de Sunday G Akinsete fonctionne, pas besoin d'utiliser un NinePatch
Helin Wang
0

Pour ceux qui utilisent la liaison de données:

  1. Ajoutez la méthode statique suivante à n'importe quelle classe

    @BindingAdapter("app:thumbTintCompat")
    public static void setThumbTint(SeekBar seekBar, @ColorInt int color) {
        seekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN);
    }
  2. Ajoutez un app:thumbTintCompatattribut à votre SeekBar

    <SeekBar
           android:id="@+id/seek_bar"
           style="@style/Widget.AppCompat.SeekBar"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           app:thumbTintCompat="@{@android:color/white}"
    />

C'est tout. Vous pouvez maintenant utiliser app:thumbTintCompatavecSeekBar . La teinte de progression peut être configurée de la même manière.

Remarque: cette méthode est également compatible avec les appareils pré-sucettes.

Stan Mots
la source
0

Petite correction à la réponse de @ arnav-rao:

pour vous assurer que le pouce est bien coloré, utilisez:

<style name="MySeekBar" parent="Widget.AppCompat.SeekBar">
    <item name="android:progressBackgroundTint">@color/colorBgTint</item>
    <item name="android:progressTint">@color/colorProgressTint</item>
    <item name="android:thumbTint">@color/colorThumbTint</item>
</style>

ici android: thumbTint colore en fait le "pouce"

levus.lazarus
la source
0

consultez ce tutoriel très bien

https://www.lvguowei.me/post/customize-android-seekbar-color/

Facile :

<SeekBar
                android:id="@+id/seekBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:max="100"
                android:maxHeight="3dp"
                android:minHeight="3dp"
                android:progressDrawable="@drawable/seekbar_style"
                android:thumbTint="@color/positive_color"/>

puis un fichier de style:

<?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" >
            <solid
                android:color="@color/positive_color" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle" >
                <solid
                    android:color="@color/positive_color" />
            </shape>
        </clip>
    </item>
</layer-list>
Joolah
la source
0

Je voulais créer un style pour la barre de recherche, puis ajouter le style à un thème afin de pouvoir l'appliquer à un thème entier tout en permettant à un sous-style de le remplacer. Voici ce que j'ai fait:

<!-- Blue App Theme -->
    <style name="AppTheme.Blue" parent="BaseTheme.Blue">        
        <item name="android:seekBarStyle">@style/SeekbarStyle.Blue</item>
        <item name="seekBarStyle">@style/SeekbarStyle.Blue</item> <!--This is essential for some devices, e.g. Samsung-->
</style>

<!-- Slider Styles -->
<style name="SeekbarStyle.Blue" parent="Widget.AppCompat.SeekBar">
        <item name="android:progressBackgroundTint">@color/material_blue_a700_pct_30</item>
        <item name="android:thumbTint">@color/material_blue_a700</item>
        <item name="android:thumbTintMode">src_in</item>
        <item name="android:progressTint">@color/material_blue_a700</item>
</style>

<style name="SeekbarStyle.Green" parent="Widget.AppCompat.SeekBar">
        <item name="android:progressBackgroundTint">@color/material_green_a700_pct_30</item>
        <item name="android:thumbTint">@color/material_green_a700</item>
        <item name="android:thumbTintMode">src_in</item>
        <item name="android:progressTint">@color/material_green_a700</item>
</style>

Ce qui précède définit le style de la barre de recherche de thème sur bleu pour tous les appareils 21+, y compris Samsung (qui ont besoin que la fonction de recherche de style de barre soit appliquée en plus d'Android: SeeBarStyle; je ne sais pas pourquoi, mais j'ai vu ce problème de première main). Si vous souhaitez que toutes les barres de recherche conservent le style de thème et n'appliquent le style de barre de recherche verte qu'à quelques widgets, ajoutez ce qui suit au widget de votre choix:

<SeekBar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.Green"/>
Chris Sprague
la source
0

Avec la bibliothèque de composants de matériaux version 1.2.0, vous pouvez utiliser le nouveau Slidercomposant.

 <com.google.android.material.slider.Slider
       android:valueFrom="0"
       android:valueTo="300"
       android:value="200"
       android:theme="@style/slider_red"
       />

Vous pouvez remplacer la couleur par défaut en utilisant quelque chose comme:

  <style name="slider_red">
    <item name="colorPrimary">#......</item>
  </style>

entrez la description de l'image ici

Sinon, vous pouvez utiliser ces attributs dans la mise en page pour définir une couleur ou un sélecteur de couleurs:

   <com.google.android.material.slider.Slider
       app:activeTrackColor="@color/...."
       app:inactiveTrackColor="@color/...."
       app:thumbColor="@color/...."
       />

ou vous pouvez utiliser un style personnalisé:

 <style name="customSlider" parent="Widget.MaterialComponents.Slider">
    <item name="activeTrackColor">@color/....</item>
    <item name="inactiveTrackColor">@color/....</item>
    <item name="thumbColor">@color/....</item>
  </style>
Gabriele Mariotti
la source
les documents officiels indiquent que c'est toujours prévu. Il y a t'il d'autres solutions?
tejaspatel
@tejaspatel Dans la réponse, il y a le lien du composant officiel. La 1ère version est désormais disponible en 1.2.0-alpha01.
Gabriele Mariotti
-1

Vous pouvez également procéder de cette façon:

<SeekBar
    android:id="@+id/redSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progressDrawable="@color/red"
    android:maxHeight="3dip"/>

J'espère que cela vous aidera!

Omar Aflak
la source
1
Je ne pense pas que vous puissiez utiliser une couleur à la recherche d'un dessinable
Lancelot