Crear gradient background (fondo degradado) para una Activity / Fragment / Component
En muchas ocasiones cuando creamos una aplicación nos topamos que el diseño necesita un fondo personalizado con un degradado, por lo que en estas ocasiones la propiedad android:backgroundColor de nuestra vista no es suficiente, por ello nos vemos en la necesidad de crear uno elemento personalizado. Pero ¿cómo hacemos esto? Bueno, para ello tenemos que crear un nuevo recurso del tipo drawable, es decir, un elemento que se puede dibujar, la verdad estos pueden ser desde lo más simple, por ejemplo, un solo color (e incluso ninguno), hasta algo muy complejo, como un conjunto de capas que se sobreponen unas a otras en un orden determinado y que se adaptan a los estados del componente/vista al que fue asignado (pero esto ya lo veremos en otro post).
Como ves, los drawables pueden ser muy distintos, por ellos, se “categorizan” en distintos “tipos” (shape, layer-list, etc.), pero en esta ocasión nos centraremos en algo sencillo, crear degradados de dos y de tres colores.
Creando un gradient background (fondo degradado)
Paso 1: Crear un proyecto en Android Studio (ya sea Java o Kotlin)
Si no sabes como crear uno, consulta la siguiente documentación:
https://developer.android.com/studio/projects/create-project
Paso 2: Crear un recurso drawable
Al abrir nuestro proyecto del lado izquierdo podremos encontrar la siguiente estructura:
Desplegaremos el contenido de la carpeta res, donde encontraremos la carpeta drawable:
Damos clic derecho en esta, y seleccionaremos New > Drawable Resource File, como aparece en la imagen:
Esto nos abrirá una ventana similar a la siguiente:
Donde colaremos gradient_background (nombre de nuestro archivo) en el campo File name y shape (tipo de drawable) en Root element, de esta forma:
Y daremos clic en el botón OK:
Esto creará el archivo gradient_background.xml que podremos ver en la carpeta drawable:
Al mismo tiempo nos abrirá el editor para que podamos comenzar a crear nuestro degradado:
Interludio para explicar la interfaz, si ya sabes como funciona ve al siguiente paso.
Como podrás ver, la ventana se divide en tres secciones:
- La primera es la estructura del proyecto (rojo): en estas se encuentran todos los archivos de nuestro proyecto.
- la segunda (verde) el código de nuestro archivo: aquí es donde se escribe el código que creará a tu recurso drawable.
- y la tercera la previsualización de nuestro drawable (azul): por último, aquí podrás ir dándote una idea de como se verá tu componente al usar tu drawable.
Nota: Si la interfaz de tu Android Studio no se ve así, puedes verificar que estés en la vista correcta en la esquina superior derecha de la sección azul.
Se pueden ver tres tipos de `vista`:* Code: Solo dejara ver el código.
* Split: Deja la vista dividida, para ver el código y la previsualización
* Design: Que en el caso de los drawables, solo dejará ver la previsualización.
Paso 3: Crear degradado
Una vez creado el archivo, comenzaremos a crear el degradado, agregando el siguiente código a nuestro archivo gradient_background.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#0f3443"
android:endColor="#34e89e"
android:angle="90"/>
</shape>android:startColorindica el color de inicio del degradado.android:endColorindica el color con el que termina el degradado.android:angleindica el ángulo de donde inicia el degradado, este deber ser 0, 90, 180 o 270.
El código anterior nos dejará un resultado como el siguiente:
Nota: Puedes usar los colores que a ti te gusten, incluso referenciarlos desde tus recursos (colors.xml) con “@color/tu_color”.
Para crear un degradado de tres colores, el código quedaría así (usé colores distintos para hacerlo más notorio):
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#feac5e"
android:centerColor="#c779d0"
android:endColor="#4bc0c8"
android:angle="90"/>
</shape>Como notarás se agrega la propiedad android:centerColor, la cual nos permite agregar un tercer color en medio de nuestro degradado.
Obteniendo el siguiente resultado:
Paso 4: Usar nuestro degradado
Abriremos el layout de nuestro Activity o Fragment al que queremos asignar como fondo nuestro degradado, en mi caso activity_main.xml:
Nota: Al igual que con nuestro `drawable` si seleccionamos la vista `Split` podemos ver el código y la previsualización.
Y asignaremos nuestro degradado a la propiedad android:background de nuestro elemento padre (root), quedando de la siguiente forma:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="@drawable/gradient_background"> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>
Esto hará que el activity luzca de la siguiente manera:
O así, usando el degradado de tres colores:
Y hemos terminado… ahora te toca crear tus propios degradados y darle un gran estilo a tu aplicación.
Si no sabes qué colores puedes usar para tus degradados, consulta https://uigradients.com donde podrás encontrar cientos de degradados geniales con sus respectivos colores en hexadecimal.
Contacto 👾
No te olvides de seguirme en mis redes sociales:
Github — https://github.com/Oliver404
Instagra — https://www.instagram.com/oliver.botello/
Twitter — https://twitter.com/oliver_botello
Espero que te haya sido de ayuda, gracias por leerme y te veo en un siguiente post.
Recursos:
Código de ejemplo:
