personalizzata SeekBar Drawable Android

Question

voglio personalizzare il SeekBar Android di default:

ho letto le nove immagini di patch e ha creato 6 immagini PNG. I primi tre sono per la barra grigia corso (progressDrawable), come illustrato di seguito:

1. destro immagine

   immagine

2. Centro

   

3. immagine Sinistra

   

Il risultato dovrebbe essere:

Le immagini blu rappresentano il progresso e sono i seguenti:

1. immagine Destra

   

2. immagine Centro

   

3. immagine Sinistra

   

e il pollice è la seguente:

La mia domanda è, come posso utilizzare nove immagini di patch per generare la barra di ricerca personalizzata esattamente come la prima immagine e come posso applicarla alla mia barra di ricerca?

Answer 1

Penso che non dovrebbe essere complesso. Non devi fare 6 immagini per soddisfare le tue esigenze. Basta creare 2 nove patch per lo sfondo, il progresso. E thumb.png. Qui è la vostra 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"> 

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

mi ricordo che il vostro thumb dovrebbe avere spazio vuoto in cima quando si crea così sembra che si voleva. Spero che questo aiuti.

Answer 2

1) Vai AndroidSDK -> Strumenti ed eseguire draw9patch.bat

si vedrà la finestra nera

2) trascinare l'immagine nella finestra e iniziare a 9 patch:

inizio cerotto intorno le immagini

3) ora andare al menu e fare clic su Salva 9-patch file ...

Consiglio finale: la foto deve essere.Formato PNG e contiene solo contenuto non spazio libero intorno ad esso. per esempio ho salvato la tua foto sul mio computer e ho visto che c'è molto spazio inutilizzato sotto la parte blu della tua foto.

fanno ora riferimento alla vostra SeekBar:

basta seguire il link e

Create Custom Slide Bar

mi dispiace; Non ho abbastanza reputazione per inserire l'immagine

Answer 3

È possibile utilizzare una barra di ricerca personalizzata utilizzando il codice Java ... e aggiungere all'elenco dei livelli come i drawable ... questa parte di codice ti aiuterà a sperare.

1.LayerList drawable

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

Questa sarà la classe customSeekbar ed è possibile utilizzare questo SeekBar personalizzato nella vostra applicazione

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)); 
    } 
}