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.
- Appcompact DialogFragment de una sola opción marca de verificación color
- Android: ¿por qué no puedo usar un selector para el fondo de TextView?
- Android Selector Drawable no funciona con atributos
- NullPointerException en el método de mutación de Drawable Android 1.6
- Android linearlayout selector de fondo
Mediante el uso de seekbar predeterminado obtendré algo como esto:
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:
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>
- ¿Cómo cambiar el color presionado a otro color del selector dinámicamente?
- Pulgar personalizado para un buscador en Android
- Cómo cambiar el color del texto en la prensa de un textview particular en un linearlayout
- Definición dinámica y uso de selectores
- Deshabilitar el resaltado de GridView de Android completamente (deshabilitar la selección)
- Archivo XML válido da un error "no se pudo analizar" en Android ADT
- El selector ImageView no funciona
- Cómo cambiar textColor de un botón de XML en Android?
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_focused_holo.png:
Red_scrubber_control_normal_holo.png:
Red_scrubber_control_pressed_holo.png:
Red_scrubber_primary_holo.9.png:
Red_scrubber_secondary_holo.9.png:
Red_scrubber_track_holo_light.9.png:
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:
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.
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:
-
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); }
-
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!