Quería dar estilo a una barra de búsqueda que se parece a la de la imagen de abajo.
introduzca la descripción de la imagen aquí
Usando la barra de búsqueda por defecto obtendré algo como esto:
Así que lo que necesito es sólo cambiar el color. No necesito estilos adicionales. ¿Existe algún enfoque directo para hacer esto o debo construir mi drawable personalizado?
Traté de construir uno personalizado, pero no pude obtener el exacto como se muestra arriba. Después de usar el dibujable personalizado, lo que obtengo es lo que se muestra a continuación:
Si tengo que 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>
progress_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>
progress.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>
seekbar:
<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>
Yo extraería los drawables y el xml del código fuente de Android y cambiaría su color a rojo. Aquí está el ejemplo de cómo completé esto para mdpi drawables:
Custom red_scrubber_control.xml
(añadir 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 copie los drawables requeridos del código fuente de Android, los tomé de este enlace
Es bueno copiar estos drawables para cada hdpi, mdpi, xhdpi. Por ejemplo, yo uso sólo mdpi:
Entonces usando 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_normal_holo.png:
red_scrubber_control_presionado_holo.png:
red_scrubber_primary_holo.9.png:
red_scrubber_secondary_holo.9.png: red_scrubber_secondary_holo.9
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:
Si quieres exactamente la misma barra pero en rojo, puedes añadir un filtro de color PorterDuff de forma programada. Puedes obtener cada dibujable que quieras colorear a través de los métodos de la clase base ProgressBar. Luego establece un filtro de color para él.
mySeekBar.getProgressDrawable().setColorFilter(new PorterDuffColorFilter(srcColor, PorterDuff.Mode.MULTIPLY));
Si el ajuste de color deseado no se puede hacer a través de un filtro Porter Duff, puede especificar su propio filtro de color.
Si miras los recursos de Android, la barra de búsqueda realmente utiliza imágenes.
Usted tiene que hacer un dibujable que es transparente en la parte superior e inferior para decir 10px y la línea central 5px es visible.
Consulte la imagen adjunta. Tienes que convertirlo en un NinePatch.