Saltar a contenido

EJERCICIOS PROPUESTOS

Ejercicio 1. Personalización del aspecto

Crea una nueva aplicación llamada Drawables con un único TextView que ocupe toda la anchura de la pantalla y tenga el texto en color negro. Asigna como fondo del TextView un elemento drawable que dibuje un marco de 5 dp de grosor, en color azul y con esquinas redondeadas. Añade al drawable un gradiente lineal para el fondo, desde el color gris claro hasta blanco. Deja un margen de 5 dp entre los bordes de la pantalla y el marco. ¿Es posible establecer este margen dentro de la definición del drawable? ¿Y desde el propio layout?

Ejercicio 2. Personalización de botones

Añade un botón a la aplicación anterior debajo del TextView y haz que ocupe todo el ancho. Para personalizar su aspecto vamos a crear un drawable tipo lista de estados (state list) que asigne una imagen distinta a cada uno de los estados del botón. Busca una imagen en Internet (o créala tu mismo) para el fondo del botón que consista en un rectángulo alargado con los bordes redondeados. Modifica esta imagen para crear las tres que necesitamos: boton_normal.png con el fondo gris claro, boton_pressed.png con el fondo gris oscuro y boton_focused.png con el fondo amarillo. Asigna estas imágenes a cada uno de los estados del drawable tipo state list y establécelo como fondo del botón.

Prueba el aspecto de la aplicación, ¿Las esquinas del botón se ven estiradas? Para solucionar esto tienes que transformar las imágenes a tipo nine-patch y definir los parches de cada una. Recuerda que desde la misma plataforma puedes apretar botón derecho sobre el drawable y elegir la opción "Create 9-patch file", y que haciendo doble clic sobre la imagen tipo nine patch se abre el editor. Es importante también que elimines o renombres la imagen original para que solo se utilice la nueva versión.

Ejercicio 3. Animación por fotogramas

Continuamos con la aplicación del ejercicio anterior, en este caso vamos a añadir una vista de tipo ProgressBar centrada en horizontal que muestre un progreso indeterminado (el circular). Vamos a personalizar la animación de esta vista para muestre un contador del 1 al 5.

Crea cinco imágenes (dentro de la carpeta drawables) y dibuja en cada una de ellas el número correspondiente. Crea también un animation-list drawable a partir de dichas imágenes y configúralo para que se reproduzca de forma continuada cambiando de fotograma cada 1000ms. Reemplaza la animación por defecto del ProgressBar por la que acabamos de crear. Para hacer esto no tienes que escribir ni una línea de código Kotlin, sino que lo puedes hacer desde el layout mediante el atributo indeterminateDrawable.

Ejercicio 4. Niveles

En este ejercicio vamos a crear un level list drawable para que modifique su color dependiendo del valor seleccionado en un SeekBar. Este tipo de drawable permite cambiar de vista según el valor del elemento sobre el que se aplique.

Añade una vista tipo SeekBar que ocupe todo el ancho de la pantalla debajo del ProgressBar del ejercicio anterior y establece su valor máximo a 1000 (android:max="1000"). Puesto que el valor mínimo está fijado por defecto a 0, vamos a crear los siguientes cuatro rangos y asignar un drawable distinto a cada uno de ellos:

  • De 0 a 250 asigna un rectángulo en color verde (#FF00FF00).
  • De 251 a 500 asigna un rectángulo en color amarillo (#FFFFFF00).
  • De 501 a 750 asigna un rectángulo en color naranja (#FFFF8800).
  • De 751 a 1000 asigna un rectángulo en color rojo (#FFFF0000).

Cada uno de estos drawables los puedes crear por separado como rectángulos con esquinas redondeadas del color indicado. A continuación introdúcelos en un level list drawable para los rangos indicados y establécelo como progressDrawable en la barra.