Gradient Drawable in Android – Create Gradient Backgrounds
Hemos visto los colores degradados en muchos sitios web como fondos, utilizados en los logotipos de la aplicación, como en el logotipo de Instagram que se muestra a continuación, fondo de la aplicación, botones, barras de progreso, etc. Un gradiente hace que la interfaz de usuario de cualquier aplicación, ya sea una aplicación móvil o un sitio web, más hermoso y vibrante. Muchos desarrolladores están utilizando el gradiente en sus aplicaciones y sitios web para que se vea más atractivo. Así que en este tutorial, vamos a aprender a establecer un fondo de degradado para nuestra actividad Android App.
¿Qué es el gradiente?
Según Wikipedia:
En gráficos por ordenador, un gradiente de color especifica una gama de colores dependientes de la posición, por lo general se utiliza para llenar una región. Por ejemplo, muchos gestores de ventanas permiten especificar el fondo de la pantalla como un gradiente. Los colores producidos por un gradiente varían continuamente con la posición, produciendo transiciones de color suaves.
Un gradiente de color también se conoce como una rampa de color o una progresión de color. Al asignar colores a un conjunto de valores, un gradiente es un mapa de color continuo, un tipo de esquema de color.
Así que vamos a añadir un simple gradiente a nuestra aplicación Android.
Paso 1: Crea un nuevo Proyecto
-
Abre tu Android Studio Haz clic en «Iniciar un nuevo proyecto de Android Studio» (Aprende a configurar Android Studio y a crear tu primer proyecto Android)
-
Elige «Actividad vacía» en la ventana de plantilla del proyecto y haz clic en Siguiente
-
Introduce el Nombre de la App, Nombre del paquete, ubicación de guardado, lenguaje(Java/Kotlin, nosotros usamos Java para este tutorial), y SDK mínimo(estamos usando la API 19: Android 4.4 (KitKat))
-
A continuación, haz clic en el botón Finish después de rellenar los datos anteriores
-
Ahora, espera a que el proyecto termine de construirse.
Paso 2: Creación del color degradado
Para crear un color degradado necesitamos crear un archivo .xml en la carpeta drawable. Así que ve a app -> res -> drawable y haz clic con el botón derecho en drawable -> New -> Drawable Resource File y crea el archivo gradient_drawable.xml.
El código del archivo gradient_drawable.xml se muestra a continuación:
Como puedes ver en el código anterior, estamos usando la etiqueta gradient junto con la provisión de los atributos android:startColor, android:centerColor y android:endColor para definir el color que se utilizará en el gradiente. Así que vamos a conocer los atributos disponibles en el dibujable de gradiente.
Atributos XML del dibujable de degradado
Los siguientes son los atributos del dibujable <gradient>:
| Atributos | Descripción |
|---|---|
| android:startColor |
Color inicial del degradado. El valor del color puede estar en cualquiera de las formas «#rgb», «#argb», «#rrggbb», «#aarrggbb» |
| android:endColor |
Color final del degradado El valor del color puede estar en cualquiera de las formas «#rgb», «#argb», «#rrggbb», «#aarrggbb» |
| android:centerColor |
El color central del degradado. Puede ser opcional pero se puede usar si se quiere El valor del color puede estar en cualquiera de las formas «#rgb», «#argb», «#rrggbb», «#aarrggbb» |
| android:centerX |
X posición del punto central del gradiente dentro de la forma como una fracción del ancho 0.5 es el valor por defecto |
| android:centerY |
Posición Y del punto central del gradiente dentro de la forma como fracción de la altura 0.5 es el valor por defecto |
| android:angle |
El ángulo del gradiente y sólo se utiliza con el gradiente lineal Debe ser múltiplo de 45 en el rango |
| android:type |
Se utiliza para establecer el tipo de gradiente y el valor por defecto es lineal . y es de 3 tipos
|
| android:gradientRadius |
Se utiliza para establecer el radio del gradiente. Sólo se utiliza con el gradiente radial. |
Paso 3: Modificar activity_main.xml
Ahora abre el archivo activity_main.xml y elimina el código por defecto y cambia el diseño a RelativeLayout y establece su fondo a fondo de gradiente como se muestra a continuación:
android:background = "@drawable/gradient_background"Con esto nuestro activity_main.xml está hecho y el código completo se verá como:
Y la salida de lo anterior se muestra a continuación:
También podemos añadir el gradiente a diferentes Vistas y diseños en nuestra aplicación Android. Vamos a cubrir algunos otros componentes de Android App en los que podemos utilizar fondos de degradado.
Fondo degradado con botón:
Aquí usaremos el fondo degradado para el botón:
La salida del código anterior es:
Fondo degradado con TextView:
Aquí usaremos el fondo degradado para TextView:
La salida del código anterior es:
Fondo degradado con ImageView:
Aquí usaremos el fondo degradado para ImageView:
La salida del código anterior es:
Fondo degradado con SeekBar:
Aquí utilizaremos el fondo degradado para SeekBar:
El resultado del código anterior es:
