Android – barra de búsqueda de estilo

Quería diseñar una barra de búsqueda que se parece a la de la imagen de abajo.

enter image description here

Al usar la barra de búsqueda predeterminada obtendré algo como esto:

enter image description here

Entonces lo que necesito es solo cambiar el color. No necesito estilos adicionales. ¿Hay algún enfoque directo para hacer esto o debería construir mi dibujable personalizado?

Intenté crear uno personalizado, pero no pude obtener el exacto como se muestra arriba. Después de usar Drawable personalizado, lo que obtengo es como se muestra a continuación:

enter image description here

Si necesito construir el personalizado, sugiera cómo reducir el ancho de la línea de progreso y también la forma.

mi implementación personalizada:

background_fill.xml:

       

progess_fill.xml

        

progress.xml

        

thumb.xml

      

barra de busqueda:

   

Extraería drawables y xml del código fuente de Android y cambié su color a rojo. Aquí hay un ejemplo de cómo completé esto para mdpi drawables:

Custom red_scrubber_control.xml (agregar a res / dibujable):

       

Personalizado: red_scrubber_progress.xml

          

Luego copie los elementos necesarios del código fuente de Android, tomé de este enlace

Es bueno copiar estos dibujables para cada hdpi, mdpi, xhdpi. Por ejemplo, uso solo mdpi:

Luego, con Photoshop, cambie el color de azul a rojo:

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

Agregar SeekBar al diseño:

  

Resultado:

enter image description here

Si desea exactamente la misma barra pero en rojo, puede agregar un filtro de color PorterDuff programáticamente. Puede obtener cada dibujante que desee colorear a través de los métodos de la clase base ProgressBar . Luego configura un filtro de color para eso.

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

Si el ajuste de color deseado no puede realizarse a través de un filtro Porter Duff, puede especificar su propio filtro de color .

Mi respuesta está inspirada en la respuesta de Andras Balázs Lajtha que permite trabajar sin archivo xml

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

Simplemente reemplace los atributtes de color con su color

background.xml

     

progress.xml

     

style.xml

       

thumb.xml

       

Google lo ha hecho más fácil en SDK 21. Ahora tenemos atributos para especificar los colores del tinte del pulgar:

 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

Estilo de material personalizado de barra de búsqueda de Android, para otras personalizaciones de barra de búsqueda http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples

  

estilo de material personalizado de la barra de búsqueda

Como mencionamos anteriormente (@andrew), la creación de SeekBar personalizada es súper fácil con este sitio – http://android-holo-colors.com/

Simplemente habilite SeekBar allí, elija color y reciba todos los recursos y copie al proyecto. Luego, aplíquelos en xml, por ejemplo:

  android:thumb="@drawable/apptheme_scrubber_control_selector_holo_light" android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_light" 

Solo establece

 android:maxHeight="3dp" android:minHeight="3dp" 

Eso es todo

  

funciona igual que la respuesta seleccionada. no es necesario hacer ningún archivo dibujable o de lo contrario. (IN 5.0 solamente) Saludos

De forma predeterminada, Android coincidirá con el color de progreso de su control deslizante para

 `` 

valor en su styles.xml . Luego, para establecer una imagen del control deslizante personalizado, simplemente use este código en el bloque de diseño de SeekBar xml:

 android:thumb="@drawable/slider" 

Si está utilizando SeekBar predeterminado proporcionado por Android Sdk, entonces es una manera simple de cambiar el color de eso. solo vaya a color.xml dentro de /res/values/colors.xml y cambie el colorAccent.

  #212121 #1e1d1d  #FF4081  
 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); 

Cambio el background_fill.xml

 < ?xml version="1.0" encoding="UTF-8"?>        

y progress_fill.xml

 < ?xml version="1.0" encoding="UTF-8"?>        

para hacer que el fondo y el progreso 1dp altura.

Si observa los recursos de Android, la barra de búsqueda realmente usa imágenes.

Tienes que hacer un dibujable que sea transparente en la parte superior e inferior, por ejemplo, 10px y la línea central de 5px esté visible.

Consulte la imagen adjunta. Necesita convertirlo en un NinePatch.

enter image description here

Manera simple de cambiar el color de la barra de búsqueda …

   

Estilo: Progress_color

   

cambio de clase java ProgressDrawable ()

 seek_bar.getProgressDrawable().setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.MULTIPLY); 

Para aquellos que usan enlace de datos:

  1. Agregue el siguiente método estático a cualquier clase

     @BindingAdapter("app:thumbTintCompat") public static void setThumbTint(SeekBar seekBar, @ColorInt int color) { seekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN); } 
  2. Agregar app:thumbTintCompat atributo app:thumbTintCompat a su SeekBar

      

Eso es. Ahora puede usar la app:thumbTintCompat con cualquier SeekBar . El tinte de progreso se puede configurar de la misma manera.

Nota: este método también es compatible con dispositivos pre-lollipop.

salida:

enter image description here

en el archivo de diseño:

   

drawable / progress.xml

 < ?xml version="1.0" encoding="utf-8"?>       

drawable / background_fill.xml

 < ?xml version="1.0" encoding="utf-8"?>         

dibujable / progress_fill.xml

 < ?xml version="1.0" encoding="utf-8"?>         

drawable / custom_thumb.xml

 < ?xml version="1.0" encoding="utf-8"?>         

colors.xml

 #660033 

Pequeña corrección a la respuesta por @ arnav-rao:

para asegurarse de que el pulgar tenga el color correcto, use:

  

aquí android: thumbTint realmente colorea el “pulgar”

mira este tutorial muy bueno

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

sencillo :

  

luego un archivo de estilo:

 < ?xml version="1.0" encoding="utf-8"?>               

También puedes hacerlo de esta manera:

  

Espero que ayude!