Android - styliser la barre de recherche

Question

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

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

Ce dont j'ai besoin, c'est de changer uniquement la couleur. Je n'ai pas besoin de styles supplémentaires. Existe-t-il une approche directe pour faire cela ou dois-je créer un tableau personnalisé ?

J'ai essayé d'en créer un personnalisé, mais je n'ai pas pu obtenir le résultat exact indiqué ci-dessus. Après avoir utilisé un drawable personnalisé, j'obtiens ce qui est montré ci-dessous :

Si je dois construire un modèle personnalisé, veuillez me suggérer comment réduire la largeur de la ligne de progression ainsi que sa forme.

ma mise en œuvre 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>

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

seekbar :

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

Answer 1

J'extrairais les drawables et le xml du code source Android et changerais leur couleur en rouge. Voici un exemple de la façon dont j'ai réalisé cette opération pour les drawables 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>

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, j'ai copié les éléments à dessiner nécessaires à partir du code source d'Android. à partir de ce lien

Il est bon de copier ces drawables pour chaque hdpi, mdpi, xhdpi. Par exemple, je n'utilise que mdpi :

Puis, avec Photoshop, changez la couleur du bleu au rouge :

Red_scrubber_control_disabled_holo.png :

Red_scrubber_control_focused_holo.png :

Red_scrubber_control_normal_holo.png :

Red_scrubber_control_pressed_holo.png :

rouge_scrubber_primary_holo.9.png :

Red_scrubber_secondary_holo.9.png :

rouge_scrubber_track_holo_light.9.png :

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

Answer 2

Style de matériau personnalisé pour la barre d'outils Android, pour d'autres personnalisations de la barre d'outils. 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:thumbTint">#c51162</item>
</style>

Mise à jour : colorControlActivated es thumbTint maintenant.

Answer 3

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

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

Answer 4

Si vous voulez exactement la même barre mais en rouge, vous pouvez ajouter un filtre de couleur PorterDuff de manière programmatique. Vous pouvez obtenir chaque drawable que vous voulez coloriser par le biais des méthodes de l'élément Barre d'avancement de la classe de base. Ensuite, il faut définir un filtre de couleur pour cela.

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

Si l'ajustement de couleur désiré ne peut pas être fait par un filtre Porter Duff, vous pouvez spécifier votre propre filtre de couleur .

Answer 5

Google a facilité cette tâche dans le SDK 21. Nous avons maintenant des attributs pour spécifier les couleurs de la 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