Android – barra de búsqueda de estilo

Quería un estilo de búsqueda barra que se parece a la de la imagen de abajo.

Introduzca aquí la descripción de la imagen

Mediante el uso de seekbar predeterminado obtendré algo como esto:

Introduzca aquí la descripción de la imagen

Así que lo que necesito es sólo cambiar el color. No necesito estilos adicionales. ¿Hay algún enfoque directo para hacer esto o debo construir mi costumbre drawable.?

Intenté construir 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:

Introduzca aquí la descripción de la imagen

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

Mi implementación personalizada:

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> 

Progess_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="#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> 

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

barra de busqueda:

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

Extraería drawables y xml del código fuente de Android y cambia su color a rojo. Aquí está el ejemplo cómo terminé esto para mdpi drawables:

Personalizado red_scrubber_control.xml (agregar a 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> 

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

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

Es bueno copiar estos drawables para cada hdpi, mdpi, xhdpi. Por ejemplo, sólo uso mdpi:

A continuación, con Photoshop cambiar 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

Añadir SeekBar al diseño:

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

Resultado:

Introduzca aquí la descripción de la imagen

Editado:

Aquí está buen recurso Android Holo generador de colores que ayudará a crear elementos con diferentes colores mucho más rápido. Sólo tienes que seleccionar el color y el elemento y se creará necesario dibujable para xhdpi, hdpi y mdpi.

Si desea exactamente la misma barra pero en rojo, puede agregar un filtro de color PorterDuff mediante programación. Puede obtener cada dibujable que desea colorizar a través de los métodos de la clase base ProgressBar . A continuación, establezca un filtro de color para ello.

 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 Andras Balázs Lajtha respuesta 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

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line"> <stroke android:width="1dp" android:color="#D9D9D9"/> <corners android:radius="1dp" /> </shape> 

Progreso.xml

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line"> <stroke android:width="1dp" android:color="#2EA5DE"/> <corners android:radius="1dp" /> </shape> 

Style.xml

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@android:id/background" android:drawable="@drawable/seekbar_background"/> <item android:id="@android:id/progress"> <clip android:drawable="@drawable/seekbar_progress" /> </item> </layer-list> 

Thumb.xml

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <size android:height="30dp" android:width="30dp"/> <stroke android:width="18dp" android:color="#882EA5DE"/> <solid android:color="#2EA5DE" /> <corners android:radius="1dp" /> </shape> 

Google ha hecho esto más fácil en SDK 21. Ahora tenemos métodos para configurar el color del tinte del pulgar

 android:thumbTint android:thumbTintMode 

http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTint http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTintMode

Como mencionar uno por encima (@andrew), la creación de Custom SeekBar es super fácil con este sitio – http://android-holo-colors.com/

Sólo hay que habilitar SeekBar allí, elegir el color, y recibir todos los recursos y copiar al proyecto. A continuación, aplicarlos en xml, por ejemplo:

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

Acaba de poner

Android: maxHeight = "3dp"
Android: minHeight = "3dp"

Eso es todo.

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

 `<item name="colorAccent">` 

En su styles.xml . A continuación, para establecer una imagen de pulgar deslizante personalizada, simplemente utilice este código en el bloque de su diseño SeekBar xml:

 android:thumb="@drawable/slider" 
 <SeekBar android:id="@+id/seekBar1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:progressTint="@color/red" android:thumbTint="@color/red" /> 

Funciona igual que la respuesta seleccionada. No hay necesidad de hacer ningún archivo extraíble o bien. (IN 5.0 solamente) Saludos

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

 <resources> <color name="colorPrimary">#212121</color> <color name="colorPrimaryDark">#1e1d1d</color> <!-- change below line --> <color name="colorAccent">#FF4081</color> </resources> 

Cambio el background_fill.xml

 <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line" > <size android:height="1dp" /> <gradient android:angle="0" android:centerColor="#616161" android:endColor="#616161" android:startColor="#616161" /> <corners android:radius="0dp" /> <stroke android:width="1dp" android:color="#616161" /> <stroke android:width="1dp" android:color="#616161" /> </shape> 

Y el progress_fill.xml

 <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line" > <size android:height="1dp" /> <gradient android:angle="0" android:centerColor="#fafafa" android:endColor="#fafafa" android:startColor="#fafafa" /> <corners android:radius="1dp" /> <stroke android:width="1dp" android:color="#cccccc" /> <stroke android:width="1dp" android:color="#cccccc" /> </shape> 

Para hacer el fondo y progreso altura 1dp .

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

Si miras los recursos de Android, la barra de búsqueda utiliza imágenes.

Tienes que hacer un dibujable que es transparente en la parte superior e inferior para decir 10px y el centro 5px línea es visible.

Consulte la imagen adjunta. Necesitas convertirlo en un NinePatch.

Introduzca aquí la descripción de la imagen

Simple manera de cambiar el color de la barra de búsqueda …

  <ProgressBar android:id="@+id/progress" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:theme="@style/Progress_color"/> 

Estilo: Progress_color

  <style name="Progress_color"> <item name="colorAccent">@color/white</item> <!-- Whatever color you want--> </style> 

Cambio de clase java ProgressDrawable ()

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

Para aquellos que usan Data Binding:

  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. Añadir app:thumbTintCompat a tu SeekBar

     <SeekBar android:id="@+id/seek_bar" style="@style/Widget.AppCompat.SeekBar" android:layout_width="wrap_content" android:layout_height="wrap_content" app:thumbTintCompat="@{@android:color/white}" /> 

Eso es. Ahora puedes 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 los dispositivos pre-lollipop.

También puedes hacerlo de esta manera:

 <SeekBar android:id="@+id/redSeekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:progressDrawable="@color/red" android:maxHeight="3dip"/> 

¡Espero que ayude!

  • Android ImageButton estado no cambia
  • Marcar al usuario seleccionado como se ha activado en FriendPicker (Facebook SDK para Android)
  • Selector de fondo en RecyclerView Item
  • Selector de botones de Android
  • Cómo establecer el color de fila alternativo de Listview y el color de fondo del elemento seleccionado
  • Selector hereda
  • Android drawable invalid start tag
  • Android: Cómo hacer un selector desplegable
  • ListView Sombra de artículo + selector personalizado
  • Selección de un número del usuario con varios números cuando se utiliza el selector de contactos
  • Cambio de relleno en el selector
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.