¿Alguna vez has querido reducir el tamaño de tu aplicación de Android o hacer que parezca más interesante? Si es así, entonces deberías probar ShapeDrawables.
Primero, repasaremos las ventajas y desventajas de ShapeDrawables . Luego crearemos algunos Drawables que podrían usarse en su aplicación y, por último, para la gran final, intentaremos replicar un gradiente como se puede ver en la aplicación / sitio web de Spotify .
¿Por qué deberías usar ShapeDrawables?
Cuando desee utilizar imágenes PNG o JPEG en su aplicación, debe proporcionar varias copias de la misma imagen para diferentes densidades de pantalla. Eso, por supuesto, satura tu aplicación con copias de la misma imagen. Sí, a veces ese es el camino que tenemos que elegir porque no podemos usar Drawables para cada caso, pero podemos reducir drásticamente el tamaño de nuestra aplicación si podemos usar Drawables en su lugar. ShapeDrawables son una serie de comandos que indican cómo dibujar algo en la pantalla. Es por eso que se pueden redimensionar y estirar tanto como queramos, sin perder calidad. Podemos cambiar el color y manipularlos incluso cuando la aplicación se está ejecutando y usar el mismo ShapeDrawablevarias veces en nuestra aplicación. Dado que ShapeDrawables son una subclase de la clase abstracta Drawable , podemos usarlos en métodos donde se espera un Drawable . Haga clic para obtener la documentación de ShapeDrawable.
¿Hay alguna desventaja?
Por supuesto, tal como lo mencioné antes, no podemos usarlos en todos los casos. He dicho antes que la clase ShapeDrawable es una subclase de la clase abstracta Drawable . También hay otras subclases y cada una de ellas tiene su propio caso de uso. Puede hacer clic aquí para verificar otros tipos de Drawable y descubrir cuál es el adecuado para su caso . Otro problema es que tardaron un poco más en dibujar que un mapa de bits, ya que hay mucho análisis y dibujo detrás de escena. Pero creo que ese no es un gran problema si sus Drawables son simples.
Mi opinión es que debe usar Drawables ( ShapeDrawables ) siempre que pueda, porque son fáciles de modificar y no ocupan mucho espacio.
Comencemos a codificar
Primero echemos un vistazo a un ejemplo simple y luego recrearemos un gradiente como se puede ver en la aplicación / sitio web de Spotify.
Crear un degradado simple ShapeDrawable en XML
Primero cree un nuevo archivo de recursos dibujables.
Haga clic derecho en res / drawable> Nuevo> Archivo de recursos dibujables> asigne un nombre a su archivo> use la forma como elemento raíz> haga clic en Aceptar
Así es como se ve el primer ejemplo:
Este es el código para el primer ejemplo:
Algunos atributos útiles que puede usar al definir una forma:
1.) Tipo de forma
Puede especificar el tipo de forma usando el atributo android: shape XML en la etiqueta de forma. Si no especifica la forma, se selecciona el tipo de rectángulo predeterminado. Otras formas disponibles son ovalada, línea y anillo. Aquí hay un ejemplo:
android: forma = "oval"
2.) esquinas redondeadas
Como nuestra forma es un rectángulo, podemos redondear las esquinas del rectángulo. Puede hacerlo dentro de la etiqueta de esquinas. Puede especificar el radio para todas las esquinas usando android: radius . Aquí hay un ejemplo:
android: radius = ”21dp”
Por supuesto, puede usar el valor del archivo de recursos dimens . Si quieres ser un poco más experimental, puedes usar un radio diferente para cada esquina. Puede hacerlo usando android: topLeftRadius , android: topRightRadius , android: bottomLeftRadius y android: bottomRightRadius . Aquí hay un ejemplo:
android: bottomLeftRadius = ”10dp”
3.) Gradiente o color sólido
Si desea usar un color sólido, debe usar una etiqueta sólida y luego dentro de esa etiqueta puede especificar el color usando android: color . Aquí hay un ejemplo:
android: color = @ color / your_color_name
Todos los atributos de degradado deben estar en una etiqueta de degradado. Puede especificar su color de inicio, centro y final utilizando android: startColor , android: centerColor y android: endColor . Aquí hay un ejemplo:
android: startColor = @ color / your_color_name
android: centerColor = @ color / your_color_name
android: endColor = @ color / your_color_name
Si no especifica el tipo de gradiente, se elige el lineal predeterminado. Otros tipos son radiales y de barrido. Aquí se explica cómo especificar el tipo de gradiente:
android: type = "radial"
Incluso puedes cambiar el ángulo del gradiente. Por ejemplo, si desea que su gradiente vaya de abajo a la izquierda a la derecha, debe configurar su ángulo en android: angle = ”45” (tenga en cuenta que el ángulo debe ser un múltiplo de 45).
4.) Especificar tamaño
Si lo desea, puede especificar el tamaño de la forma. Recuerde que puede cambiar el tamaño más tarde, por ejemplo, cuando usa ShapeDrawable en un ImageView . Puede cambiar el tamaño dentro de la etiqueta de tamaño. Un ndroid: layout_height y android: layout_width se utilizan para hacer eso. Probablemente conozcas estos dos:
android: layout_height = ”40dp”
android: layout_width = ”10dp”
5.) Trazo (contorno alrededor de la forma)
A veces quieres un contorno alrededor de tu forma y para hacerlo puedes usar la etiqueta de trazo. Puede especificar el ancho y el color del contorno usando android: width y android: color . Aquí hay un ejemplo:
android: ancho = "2dp"
android: color = @ color / your_beautiful_color
Incluso puede tener guiones como un contorno alrededor de su forma. Para obtener ese efecto, debe usar estos dos atributos: android: dashGap , android: dashWidth . Aquí hay un ejemplo:
android: dashGap = ”1dp”
android: dashWidth = ”4dp”
Usemos nuestra forma en una vista
Una vez que esté satisfecho con su forma, puede usarla en una Vista , por ejemplo. Así es como podría usar una forma de círculo en un ImageView usando XML.
<ImageView xmlns: android = ”http://schemas.android.com/apk/res/android"
android: id = ”@ + id / my_image_view”
android: layout_width = ”wrap_content”
android: layout_height = ”wrap_content”
android: background = ”@ drawable / my_custom_circle”
android: text = ”@ string / hello_world” />
En lugar de usar el atributo android: background , puedes usar:
android: src = ”@ drawable / my_custom_circle”
Así es como puedes hacer lo mismo usando Java
ImageView myImageView = (ImageView) findViewById (R.id.my_image_view);imageView.setImageResource (R.drawable.my_custom_circle);
Modificar formas usando Java
Ahora ya sabe cómo definir formas usando XML y cómo usarlas en Vistas. Pero también tiene que haber una manera de definirlos y modificarlos usando Java, ¿verdad? Claro, pero recomiendo definir formas usando XML, si puedes, porque es mucho más fácil visualizar y verificar tu progreso. Si ha usado XML para definir su forma, puede usar el método getDrawable en Java para obtener la referencia a su forma. Este método devolverá un Drawable . Tenga en cuenta que puede manipular sus formas incluso cuando su aplicación se está ejecutando.
Drawable drawable = getDrawable (R.drawable.button_shape);
GradientDrawable gradientDrawable = (GradientDrawable) dibujable;
En este punto, está listo para comenzar a modificar su GradientDrawable . Aquí están algunos ejemplos:
gradientDrawable.setColor (ContextCompat.getColor (this, R.color.colorPrimary));
gradientDrawable.setShape (GradientDrawable.OVAL);
gradientDrawable.setStroke (12, Color.CYAN);
Definir formas usando Java
RoundRectShape roundRectShape = new RoundRectShape (nuevo float [] {
10, 10, 10, 10,
10, 10, 10, 10}, nulo, nulo);ShapeDrawable shapeDrawable = new ShapeDrawable (roundRectShape);
shapeDrawable.getPaint (). setColor (Color.parseColor ("# FFFFFF"));ImageView myImageView = findViewById (R.id.my_image_view);
myImageView.setBackground (shapeDrawable);
// o puedes usar myImageView.setImageDrawable (shapeDrawable);
Ahora es el momento del último paso. Recreemos el gradiente de Spotify usando nuestras nuevas habilidades.
Esta es la imagen original del diseño que recrearemos:
Este es el código para el fondo degradado:
Este es el código para el rectángulo redondeado alrededor del botón de acceso:
Ahora usemos estas formas en nuestro diseño. Este es el código final para el diseño:
Desafortunadamente, nuestra fuente y márgenes no son perfectos, ¡pero creo que lo hicimos! Se ve bien.
Ahora es tu turno. Le he mostrado un simple ejemplo y quiero que comience a crear sus propias formas y gradientes.