transparente - widget barra busqueda google android

Barra de búsqueda personalizada(tamaño del pulgar, color y fondo)

Question

Me gustaría tener esta barra de búsqueda en mi proyecto de Android:

Esta es mi barra de búsqueda:

<SeekBar
android:id="@+id/seekBar_luminosite"
android:layout_width="@dimen/seekbar_width"
android:layout_height="@dimen/seekbar_height"
android:minHeight="15dp"
android:minWidth="15dp"
android:maxHeight="15dp"
android:maxWidth="15dp"
android:progress="@integer/luminosite_defaut"
android:progressDrawable="@drawable/custom_seekbar"
android:thumb="@drawable/custom_thumb" />

Este es mi custom_thumb.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:angle="270"
android:endColor="@color/colorDekraOrange"
android:startColor="@color/colorDekraOrange" />
<size
android:height="35dp"
android:width="35dp" />
</shape>

Este es mi custom_seekbar.xml:

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

Este es mi seekbar.png (fondo):

Y este es el resultado :

Sin sombras ni bordes redondeados en la barra ...

Realmente no entiendo cómo puedo hacerlo.

Answer 1

Sin sombras ni bordes redondeados en la barra.

Estás utilizando una imagen, así que la solución más fácil es remar tu bote con el flujo,

No puede dar alturas manualmente, sí, pero asegúrese de que tenga suficiente espacio para mostrar su vista de imagen completa allí

• la manera más fácil es usar android:layout_height="wrap_content" para SeekBar
• Para obtener bordes redondeados más claros, puede usar fácilmente la misma imagen que usó con otro color.

No soy bueno con Photoshop, pero logré editar uno de fondo para una prueba

_{seekbar_brown_to_show_progress.png}

<SeekBar
android:splitTrack="false" // for unwanted white space in thumb
android:id="@+id/seekBar_luminosite"
android:layout_width="250dp" // use your own size
android:layout_height="wrap_content"
android:minHeight="10dp"
android:minWidth="15dp"
android:maxHeight="15dp"
android:maxWidth="15dp"
android:progress="50"
android:progressDrawable="@drawable/custom_seekbar_progress"
android:thumb="@drawable/custom_thumb" />

custom_seekbar_progress.xml

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

custom_thumb.xml es igual que el tuyo

Finalmente android:splitTrack="false" eliminará el espacio en blanco no deseado en su pulgar

Echemos un vistazo a la salida:

Answer 2

Al principio, la cortesía es para @Charuka .

HACER

Puede usar android:progressDrawable="@drawable/seekbar" lugar de android:background="@drawable/seekbar" .

progressDrawable utilizado para el modo de progreso.

Deberías probar con

android:minHeight

Define la altura mínima de la vista. No se garantiza que la vista pueda alcanzar esta altura mínima (por ejemplo, si su diseño principal la limita con menos altura disponible).

android:minWidth

Define el ancho mínimo de la vista. No se garantiza que la vista pueda alcanzar este ancho mínimo (por ejemplo, si su diseño principal lo limita con menos ancho disponible)

 android:minHeight="25p"
android:maxHeight="25dp" 

FYI:

Usar android: minHeight y android: maxHeight no es una buena solución. Necesita rectificar su barra de búsqueda personalizada (desde el nivel de clase) .

Answer 3

Puedes probar la barra de progreso en lugar de la barra de búsqueda

<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_marginBottom="35dp"
/>

Answer 4

SeekBar personalizado de Android: seguimiento o progreso personalizado, forma, tamaño, fondo y pulgar y para otras personalizaciones de barra de búsqueda, visite http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples

Pista personalizada dibujable

<?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:gravity="center_vertical|fill_horizontal">
<shape android:shape="rectangle"
android:tint="#ffd600">
<corners android:radius="8dp"/>
<size android:height="30dp" />
<solid android:color="#ffd600" />
</shape>
</item>
<item android:id="@android:id/progress"
android:gravity="center_vertical|fill_horizontal">
<scale android:scaleWidth="100%">
<selector>
<item android:state_enabled="false"
android:drawable="@android:color/transparent" />
<item>
<shape android:shape="rectangle"
android:tint="#f50057">
<corners android:radius="8dp"/>
<size android:height="30dp" />
<solid android:color="#f50057" />
</shape>
</item>
</selector>
</scale>
</item>
</layer-list>

Pulgar personalizado dibujable

?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:thickness="4dp"
android:useLevel="false"
android:tint="#ad1457">
<solid
android:color="#ad1457" />
<size
android:width="32dp"
android:height="32dp" />
</shape>

Salida

Answer 5

Todo hecho en XML (sin imágenes .png ). El bit inteligente es border_shadow.xml .

Todo sobre los vectors estos días ...

Captura de pantalla:

Esta es su SeekBar ( res/layout/???.xml ):

Barra de busqueda

<SeekBar
android:id="@+id/seekBar_luminosite"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:progress="@integer/luminosite_defaut"
android:progressDrawable="@drawable/seekbar_style"
android:thumb="@drawable/custom_thumb"/>

Hagamos que sea elegante (para que pueda personalizarlo fácilmente más adelante):

estilo

res/drawable/seekbar_style.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/border_shadow" >
</item>
<item
android:id="@android:id/progress" >
<clip
android:drawable="@drawable/seekbar_progress" />
</item>
</layer-list>

pulgar

res / drawable / custom_thumb.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="@color/colorDekraOrange"/>
<size
android:width="35dp"
android:height="35dp"/>
</shape>
</item>
</layer-list>

Progreso

res/drawable/seekbar_progress.xml :

<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/progressshape" >
<clip>
<shape
android:shape="rectangle" >
<size android:height="5dp"/>
<corners
android:radius="5dp" />
<solid android:color="@color/colorDekraYellow"/>
</shape>
</clip>
</item>
</layer-list>

sombra

res/drawable/border_shadow.xml :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners
android:radius="5dp" />
<gradient
android:angle="270"
android:startColor="#33000000"
android:centerColor="#11000000"
android:endColor="#11000000"
android:centerY="0.2"
android:type="linear"
/>
</shape>
</item>
</layer-list>

Answer 6

Usa tintes;)

<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="15dp"
android:minWidth="15dp"
android:maxHeight="15dp"
android:maxWidth="15dp"
android:progress="20"
android:thumbTint="@color/colorPrimaryDark"
android:progressTint="@color/colorPrimary"/>

use el color que necesita en thumbTint y progressTint. ¡Es mucho más rápido! :)

Edite ofc que puede usar en combinación con android:progressDrawable="@drawable/seekbar"

Answer 7

android: minHeight android: maxHeight es importante para eso.

<SeekBar
android:id="@+id/pb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="2dp"
android:minHeight="2dp"
android:progressDrawable="@drawable/seekbar_bg"
android:thumb="@drawable/seekbar_thumb"
android:max="100"
android:progress="50"/>

seekbar_bg.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">
<shape>
<corners android:radius="3dp" />
<solid android:color="#ECF0F1" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="3dp" />
<solid android:color="#C6CACE" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="3dp" />
<solid android:color="#16BC5C" />
</shape>
</clip>
</item>
</layer-list>

seekbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#16BC5C" />
<stroke
android:width="1dp"
android:color="#16BC5C" />
<size
android:height="20dp"
android:width="20dp" />
</shape>

Answer 8

• En primer lugar, use android:splitTrack="false" para el problema de transparencia de su pulgar.

• Para el seekbar.png, debes usar un parche 9 . Sería bueno para el borde redondeado y la sombra de su imagen.