Come creare una barra di ricerca personalizzata in Android?

Question

Voglio fare cliente la barra di ricerca come questa immagine:

ho controllato this e this. se qualcuno ha qualche idea su questo .. per favore condividilo. Grazie

Answer 1

Se ho capito bene, vuoi creare un valore numerico sopra il cursore reale che si muove lungo il globo.

Una cosa che puoi fare è scrivere un testo sopra l'immagine reale del cursore da "fondere" il testo direttamente sul file di disegnabile dell'immagine Orb.

Io parto dal presupposto che si sta utilizzando il first tutorial che hai fornito nella tua domanda iniziale

public class CustomSeekBar extends Activity { 
    SeekBar mybar; 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_custom_seek_bar); 
     mybar = (SeekBar) findViewById(R.id.seekBar1); 

     mybar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() { 

     @Override 
     public void onStopTrackingTouch(SeekBar seekBar) { 

     //add here your implementation 
     } 

     @Override 
     public void onStartTrackingTouch(SeekBar seekBar) { 

     //add here your implementation 
     } 

     @Override 
     public void onProgressChanged(SeekBar seekBar, int progress, 
      boolean fromUser) { 
      int value = seekBar.getProgress(); //this is the value of the progress bar (1-100) 
      //value = progress; //this should also work 
      String valueString = value + ""; //this is the string that will be put above the slider 
      seekBar.setThumb(writeOnDrawable(R.drawable.thumbler_small, value));   
     } 
    }); 
    } 

    public BitmapDrawable writeOnDrawable(int drawableId, String text){ 

    Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true); 

    Paint paint = new Paint(); 
    paint.setStyle(Style.FILL); 
    paint.setColor(Color.BLACK); //Change this if you want other color of text 
    paint.setTextSize(20); //Change this if you want bigger/smaller font 

    Canvas canvas = new Canvas(bm); 
    canvas.drawText(text, 0, bm.getHeight()/2, paint); //Change the position of the text here 

    return new BitmapDrawable(bm); 
} 
} 

Questo prende un disegnabile dalle vostre risorse disegna un testo su di esso e restituisce il nuovo drawable. Utilizzare seekBar.getProgress(); per ottenere il valore necessario dalla barra di ricerca.

Mi raccomando di pulire un po 'il codice perché ora crea un nuovo oggetto di pittura ogni volta che tocchi la barra di ricerca che è davvero pessima.

Si avrebbe bisogno di fare più cose per farlo funzionare solo quando si fa clic il globo anche se ...

Answer 2

codice XML

<SeekBar 
    android:id="@+id/seekBar1" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:progressDrawable="@drawable/seek_bar" 
    android:paddingLeft="15dp" 
    android:paddingRight="15dp" 
    android:thumb="@drawable/thumbler_small" 
    android:indeterminate="false" /> 

seek_bar.xml

<?xml version="1.0" encoding="UTF-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item 
     android:id="@+android:id/SecondaryProgress" 
     android:drawable="@drawable/first"/> 
    <item 
     android:id="@+android:id/progress" 
     android:drawable="@drawable/second"/> 
</layer-list> 

il primo drawable è vuoto o mostrato non pieno di colore.

Il secondo drawable è il riempimento o il colore dell'area intera.

this collegamento aiuto il vostro più.

Answer 3

Se si vuole fare stesso aspetto che vi mostra in immagini, si dovrà fornire MinHeight e maxHeight entrambi gli attributi per SeekBar nel file XML. Per esempio:

<SeekBar 
    android:id="@+id/seekBar1" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:progressDrawable="@drawable/seek_bar" 
    android:paddingLeft="15dp" 
    android:paddingRight="15dp" 
    android:thumb="@drawable/thumbler_small" 
    **android:minHeight = "20dp" 
    android:maxHeight = "20dp"** 
    android:indeterminate="false" /> 

Si prega di controllare gli attributi nel codice sopra evidenziati.

Answer 4

Perché non scrivere un personalizzato cercano vista bar.

Ecco alcuni esempi di codice per mettere il testo nel mezzo del dispositivo di scorrimento del pollice barra di ricerca e il testo si muove con il cursore. Dovrebbe essere facile da adattare per stampare il testo sulla parte superiore del cursore.

public class CustomSeekBar extends SeekBar { 

private Paint textPaint; 

private Rect textBounds = new Rect(); 

private String text = ""; 


public CustomSeekBar(Context context) { 
    super(context); 
    textPaint = new Paint(); 
    textPaint.setColor(Color.WHITE); 

} 

public CustomSeekBar(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    textPaint = new Paint(); 
    textPaint.setColor(Color.WHITE); 

} 

public CustomSeekBar(Context context, AttributeSet attrs, int defStyle) { 
    super(context, attrs, defStyle); 


    textPaint = new Paint(); 
    textPaint.setColor(Color.WHITE); 
     } 

@Override 
protected synchronized void onDraw(Canvas canvas) { 
    // First draw the regular progress bar, then custom draw our text 
    super.onDraw(canvas); 

    // Now progress position and convert to text. 
    text = Integer.toString(getProgress()); 

    // Now get size of seek bar. 
    float width = getWidth(); 
    float height = getHeight(); 

    // Set text size. 
    textPaint.setTextSize((height * 3)/4); 
    // Get size of text. 
    textPaint.getTextBounds(text, 0, text.length(), textBounds); 

    // Calculate where to start printing text. 
    float position = (width/getMax()) * getProgress(); 

    // Get start and end points of where text will be printed. 
    float textXStart = position - textBounds.centerX(); 
    float textXEnd = position + textBounds.centerX(); 

    // Check does not start drawing outside seek bar. 
    if(textXStart < 0) textXStart = 0; 

    if(textXEnd > width) 
     textXStart -= (textXEnd - width); 

    // Calculate y text print position. 
    float yPosition = (height/2) - textBounds.centerY(); //- (textBounds.bottom/2); 

    canvas.drawText(text, textXStart, yPosition, textPaint); 
} 

public synchronized void setTextColor(int color) { 
    super.drawableStateChanged(); 
    textPaint.setColor(color); 
    drawableStateChanged(); 
} 

}

Spero che questo sia utile a voi.

Answer 5

hi prima creare un file XML nella cartella disegnabile (se non crearne uno nuovo)
e incolla questo codice o di seguire un tutorial per farlo in fretta possibile

repeatbottombackground.xml

 <bitmap android:dither="true" android:src="@drawable/bottom_bar_repeat" android:tilemode="repeat"  xmlns:android="http://schemas.android.com/apk/res/android"> 

    </bitmap> 

seek_thumb.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
     <item android:drawable="@drawable/seek_thumb_pressed" android:state_pressed="true" android:state_window_focused="true"> 

<item android:drawable="@drawable/seek_thumb_pressed" android:state_focused="true" android:state_window_focused="true"> 
<item android:drawable="@drawable/seek_thumb_pressed" android:state_selected="true" android:state_window_focused="true"> 
<item android:drawable="@drawable/seek_thumb_normal"> 
</item></item></item></item></selector> 

vi do un link spero che possa vi aiutano a

dispiace non devo spiegare di più, basta seguire il tutorial :)

riguarda,