2011-08-14 28 views
17

En un nivel alto, he hecho varios tipos de estilos de barra de progreso, pero todos son feos cuando intento hacerlos flacos.Haciendo una Barra de Progreso Skinny Customizada/barra de búsqueda

Busco a un tutorial comienzo del salto o el diseño que le dará una barra que se parece a la imagen de abajo

enter image description here

¿Alguna idea? Estaré encantado de publicar los resultados cuando/si los hago funcionar.

+0

¿Usted intentó establecer dibujable el progreso y el pulgar? – Ronnie

+0

Bueno, sí. Eso es lo que tiene que hacerse sin importar qué. Estoy más que buscando ejemplos o trabajo o tutoriales sobre cómo hacer una barra de progreso delgada. – Du3

+0

Encontrará un muy buen tutorial [aquí] (http://www.mokasocial.com/2011/02/create-a-custom-styled-ui-slider-seekbar-in-android/) – Ronnie

Respuesta

32

Hay una propiedad de Android: maxHeight que hace exactamente lo que necesita. Debes configurar el android: thumb drawable más grande que maxHeight para lograr el efecto slick de la barra de búsqueda.

Por ejemplo:

<SeekBar 
     android:id="@+id/whiteBalanceSeek" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="3dp" 
     android:max="200" 
     android:maxHeight="3dp" 
     android:paddingLeft="10dp" 
     android:paddingRight="10dp" 
     android:progress="100" 
     android:progressDrawable="@drawable/slider_progress" 
     android:thumb="@drawable/thumb_img" /> 

El dibujable slider_progress fue tomada de here y la thumb_img es un PNG desnudo con un círculo rojo.

Esto es lo que tengo:

Slick sliders

+1

puedes compartir slider_progress y thumb_img, creo que la clave es progressDrawable y thumb – pengwang

+0

progressDrawable no es nada especial. He reutilizado el XML desde aquí: http://stackoverflow.com/questions/2020882/how-to-change-progress-bars-progress-color-in-android Y la imagen del pulgar es un círculo rojo desnudo PNG –

+0

Tengo una duda ... ¿No se supone que 'maxHeight' es la altura de todo 'SeekBar' y por lo tanto, cortó incluso el pulgar en caso de que lo excediera? ¿Por qué solo funciona para progressBar? –