web-dev-qa-db-fra.com

Barre de recherche personnalisée Drawable Android

Je souhaite personnaliser la barre de recherche Android par défaut pour: 

enter image description here

J'ai lu environ neuf images de patch et créé 6 images png. Les trois premiers sont pour la barre de progression grise (progressDrawable), comme indiqué ci-dessous:

  1. Bonne image 

    enter image description here

  2. Image du centre

    enter image description here

  3. Image de gauche

    enter image description here

Le résultat devrait être:

enter image description here

Les images bleues représentent la progression et sont les suivantes:

  1. Bonne image

    enter image description here

  2. Image du centre

    enter image description here

  3. Image de gauche

    enter image description here

Et le pouce est comme suit:

enter image description here

Ma question est la suivante: comment utiliser neuf correctifs pour générer la barre de recherche personnalisée exactement comme la première image et comment puis-je l’appliquer à ma barre de recherche? 

androidseekbar
13
Dimitri

Je pense que cela ne devrait pas être complexe. Vous n'avez pas à créer 6 images pour répondre à vos besoins. Il suffit de créer 2 neuf correctifs pour le fond, les progrès. Et thumb.png. Voici votre XML:

<SeekBar
  Android:id="@+id/my_seekbar"
  Android:layout_width="wrap_content"
  Android:layout_height="wrap_content"
  Android:progressDrawable="@drawable/seekbar_progress"
  Android:thumb="@drawable/thumb">

dans votre seekbar_progress:

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

<item Android:id="@Android:id/background">
    <nine-patch Android:src="@drawable/progressbar_bg" Android:dither="true"/>
</item>
<item Android:id="@Android:id/progress">
    <clip xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:clipOrientation="horizontal"
        Android:gravity="left">
        <nine-patch Android:src="@drawable/progressbar_status" Android:dither="true"/>
    </clip>
 </item>
</layer-list>

Rappelez-vous que votre thumb devrait avoir un espace vide en haut lors de la création afin que cela ressemble à ce que vous vouliez ...

16
boburShox

Vous pouvez utiliser une barre de recherche personnalisée en utilisant du code Java ... et ajouter une liste de calques en tant que dessinables ... ce morceau de code vous aidera, j'espère.

1.LayerList dessinable

<layer-list 
    xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item 
        Android:id="@Android:id/background">
        <nine-patch 
            Android:src="@drawable/your_nine_patch_image"
            Android:tileMode="repeat">
        </nine-patch>
    </item>
    <item 
        Android:id="@Android:id/progress">
        <layer-list 
            xmlns:Android="http://schemas.Android.com/apk/res/Android" >
            <item>
                <clip >
                    <bitmap 
                        xmlns:Android="http://schemas.Android.com/apk/res/Android"
                        Android:src="@drawable/clipimage_for_progress"
                        Android:tileMode="repeat"/>
                </clip>
            </item>
        </layer-list>
    </item>
</layer-list>

Ce sera votre classe customSeekbar et vous pourrez utiliser cette barre de recherche personnalisée dans votre application.

public class CustomSeekbar {
    public CustomSeekbar(Context context) {
        super(context);
        setCustomUI();
    }

    public CustomSeekbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        setCustomUI();
    }

    public CustomSeekbar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setCustomUI();
    }

    void setCustomUI() {

        this.setProgressDrawable(getResources().getDrawable(
                R.drawable.yourBackground));
    }
}
8
Sreedev R

1) Allez sur AndroidSDK -> outils et exécutez draw9patch.bat.

vous verrez la fenêtre noire

2) faites glisser votre image dans la fenêtre et démarrez le 9 patch:

commencez à corriger les images 

3) Maintenant, allez dans le menu Fichier et cliquez sur Save 9-patch ...

Dernier conseil: votre image doit être au format .PNG et ne doit contenir que du contenu, pas d’espace libre. Par exemple, j'ai enregistré votre photo dans mon ordinateur et vu qu'il y avait beaucoup d'espace inutilisé sous la partie bleue de votre photo.

Maintenant, appliquez sur votre seekbar:

Il suffit de suivre le lien aussi

Créer une barre de défilement personnalisée

Je suis désolé; je n'ai pas assez de réputation pour insérer une image 

1
mohammad jannesary