web-dev-qa-db-fra.com

Barre de recherche de style Android

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

enter image description here

En utilisant une barre de recherche par défaut, je vais obtenir quelque chose comme ceci:

enter image description here

Donc, ce dont j'ai besoin, c'est de ne changer que la couleur. Je n'ai pas besoin de styles supplémentaires. Existe-t-il une approche simple pour ce faire ou devrais-je créer mon dessin sur mesure?

J'ai essayé de construire un personnalisé, mais je ne pouvais pas obtenir l'exact comme indiqué ci-dessus . Après avoir utilisé customable, ce que j'obtiens est le suivant:

enter image description here

Si j’ai besoin de créer un modèle 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>

progess_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>
androidseekbarcustom-selectors
200
suresh cheemalamudi

Je voudrais extraire drawables et XML à partir du code source Android et changer sa couleur en rouge. Voici un exemple comment j'ai complété ceci pour mdpi drawables:

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>

Personnalisé: 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>

Ensuite, copiez les éléments requis de Android _ code source, j'ai pris à partir de ce lien

Il est bon de copier ces drawables pour chaque hdpi, mdpi, xhdpi. Par exemple, je n'utilise que 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

Ajouter une barre de recherche à 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:

enter image description here

290
andrew

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

seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
58
fred dupont

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 via les méthodes de la classe ProgressBar base. Puis 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 .

58
Andras Balázs Lajtha

Il suffit de remplacer les attributs 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>
39
ionutgyn

Cela a été facilité par Google 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:thumbTinthttp://developer.Android.com/reference/Android/widget/AbsSeekBar. html # attr_Android: thumbTintMode

33
k2col

Style de matériau personnalisé de seekbar Android, pour les autres personnalisations de seekbar 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>

 seekbar custom material style

23
Arnav Rao

Comme mentionné ci-dessus (@andrew), créer une barre de recherche personnalisée est très facile avec ce site - http://Android-holo-colors.com/

Pour cela, activez simplement SeekBar, choisissez une couleur, recevez toutes les ressources et copiez-les dans le projet ..__, puis appliquez-les au format XML, par exemple:

  Android:thumb="@drawable/apptheme_scrubber_control_selector_holo_light"
  Android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_light"
11
Anton Kizema

Il suffit de mettre 

Android:maxHeight="3dp"
Android:minHeight="3dp"

C'est tout

10
Sunday G Akinsete
<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. inutile de créer un fichier extractible ou autre. 

8
Haroon Ahmed

Toutes ces réponses sont obsolètes.

En 2019, il est plus facile d’adapter votre barre de recherche à votre couleur préférée en modifiant votre ProgressBaren ceci.

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

Styliser votre couleur seekbar par programme, essayez le code suivant

        seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
        seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
5
Giannis Mpountouridis

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

`<item name="colorAccent">`

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

Android:thumb="@drawable/slider"
5
IgorGanapolsky
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);
3
Hugo

sortie:

 enter image description here

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>

couleurs.xml

<color name="myPrimaryColor">#660033</color>
3
Ahamadullah Saikat

Si vous utilisez la barre SeekBar par défaut fournie par Android Sdk, il s'agit d'un moyen simple de changer la couleur de celle-ci. Il suffit d’aller à color.xml dans /res/values/colors.xml et de changer colorAccent.

<resources>
    <color name="colorPrimary">#212121</color>
    <color name="colorPrimaryDark">#1e1d1d</color>
     <!-- change below line -->
    <color name="colorAccent">#FF4081</color>
</resources>
3
redblood

Je change le 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>

faire le background & progress 1dp height.

2
vrunoa

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);
2
Mathan Chinna

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

Vous devez faire un dessin 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.

enter image description here

1
Sagar Waghmare

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

enter image description here

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

vérifier ce tutoriel très bien 

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

simple:

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

Je souhaitais créer un style pour la barre de recherche, puis l'ajouter à 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 style seekbar sur bleu pour tous les appareils âgés de 21 ans et plus, y compris Samsung (qui requiert l'application de seekBarStyle en plus d'Android: seekBarStyle; je ne sais pas pourquoi mais j'ai vu ce problème de visu). Si vous souhaitez que toutes les barres de recherche conservent le style de thème et n'appliquent que le style de barre de recherche vert à quelques widgets, ajoutez les éléments suivants au widget de votre choix:

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

Pour ceux qui utilisent la liaison de données:

  1. Ajouter 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. Ajouter l'attribut app:thumbTintCompat à 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. Maintenant, vous pouvez utiliser app:thumbTintCompat avec n'importe quelle SeekBar. La teinte de progression peut être configurée de la même manière.

Remarque: cette méthode est également compatible avec les périphériques pré-Lollipop.

0
Stan Mots

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 réellement le "pouce"

0
levus.lazarus