Crear gradient background (fondo degradado) con código / programando
Introducción
La mayoría de las aplicaciones cuentan con un estilo definido, donde se establecen colores, tipografía, distancias y más, con el fin de hacer que la aplicación represente su esencia. Hay ocasiones en las que necesitamos que nuestra UI se adapte a un estatus, quizá a una configuración remota (ya lo veremos en otro post) o ¿por qué no? que cambie de forma aleatoria. Es aquí, cuando nuestros recursos estáticos (drawables XML) pueden no llegar a cumplir con lo que necesitamos (si quieres saber como crear degradados estáticos, mira el siguiente post), por lo que nos tocará escribir código para lograr lo que queremos.
Creando un gradient background (fondo degradado) con código
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 degradado (gradient)
Lo primero que tenemos que definir es en donde utilizaremos nuestro degradado, ya sea un activity, un fragment o un componente (view), en mi caso seleccioné MainActivity. Como podrás ver en el XML, su elemento padre (root) es un ConstraintLayout (en mi caso):
Cómo crearemos el degradado con código, nos centraremos en el archivo Java / Kotlin (en mi caso MainActivity.kt) no te preocupes si no sabes Kotlin, explicaré la solución con ambos lenguajes:
// Kotlinpackage com.oliverbotello.example.gradientprogrammaticallyimport android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}// JAVA
package com.oliverbotello.example.gradientprogrammatically;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Una vez abierta la clase, crearemos la función assignGradient:
// Kotlin
private fun assignGradient() {
// CODE
}// JAVA
private void assignGradient() {
// CODE
}
En esta es donde crearemos el degradado, para ello declararemos una variable del tipo GradientDrawable y le asignaremos las propiedades de startColor, endColor y shape (la propiedad shape define la forma que tendrá nuestro gradient):
// Kotlin
private fun assignGradient() {
val gradient = GradientDrawable().apply {
colors = intArrayOf(Color.CYAN, Color.GREEN)
orientation = GradientDrawable.Orientation.TOP_BOTTOM
gradientType = GradientDrawable.LINEAR_GRADIENT
shape = GradientDrawable.RECTANGLE
}
}// JAVA
private void assignGradient() {
GradientDrawable gradient = new GradientDrawable();
gradient.setColors(new int[] {Color.CYAN, Color.GREEN});
gradient.setOrientation(
GradientDrawable.Orientation.TOP_BOTTOM
);
gradient.setGradientType(GradientDrawable.LINEAR_GRADIENT);
gradient.setShape(GradientDrawable.RECTANGLE);
}
Si prefieres ocupar colores que tienes declarados en tus recursos (colors.xml), puedes referenciarlos de la siguiente forma:
// Kotlin
private fun assignGradient() {
val gradient = GradientDrawable().apply {
colors = intArrayOf(
resources.getColor(R.color.teal_200),
resources.getColor(R.color.green)
)
orientation = GradientDrawable.Orientation.TOP_BOTTOM
gradientType = GradientDrawable.LINEAR_GRADIENT
shape = GradientDrawable.RECTANGLE
}
}// JAVA
private void assignGradient() {
GradientDrawable gradient = new GradientDrawable(); gradient.setColors(
new int[] {
getResources().getColor(R.color.teal_200),
getResources().getColor(R.color.green)
}
);
gradient.setOrientation(
GradientDrawable.Orientation.TOP_BOTTOM
);
gradient.setGradientType(GradientDrawable.LINEAR_GRADIENT);
gradient.setShape(GradientDrawable.RECTANGLE);
}
Paso 3: Usar nuestro degradado
Ahora que ya hemos creado el degradado tendremos que asignarlo al elemento que queremos, para ello tendremos que asignar un ID a nuestro elemento, en mi caso al elemento ConstraintLayout del activity_main.xml:
<?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:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"> <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>
Una vez asignado el ID, obtendremos la referencia a nuestro elemento mediante la función findViewById a la cual le pasaremos el identificador de nuestro componente con ayuda de la clase R:
// Kotlin
findViewById<View>(R.id.content)// JAVA
findViewById(R.id.content)
Al obtener la referencia podremos asignar el degradado que creamos a nuestro elemento, haciendo uso de su propiedad background (en el caso de Java haremos uso del método setBackground()):
// Kotlin
findViewById<View>(R.id.content).background = gradient// JAVA
findViewById(R.id.content).setBackground(gradient);
Quedando nuestro método assignGradient de la siguiente forma:
// Kotlin
private fun assignGradient() {
val gradient = GradientDrawable().apply {
colors = intArrayOf(
resources.getColor(R.color.teal_200),
resources.getColor(R.color.green)
)
orientation = GradientDrawable.Orientation.TOP_BOTTOM
gradientType = GradientDrawable.LINEAR_GRADIENT
shape = GradientDrawable.RECTANGLE
} findViewById<View>(R.id.content).background = gradient
}// JAVA
private void assignGradient() {
GradientDrawable gradient = new GradientDrawable(); gradient.setColors(
new int[] {
getResources().getColor(R.color.teal_200),
getResources().getColor(R.color.green)
}
);
gradient.setOrientation(
GradientDrawable.Orientation.TOP_BOTTOM
);
gradient.setGradientType(GradientDrawable.LINEAR_GRADIENT);
gradient.setShape(GradientDrawable.RECTANGLE);
findViewById(R.id.content).setBackground(gradient);
}
Finalmente solo habrá que llamar nuestro método assignGradient, en mi caso lo haré desde el método onCreate de mi MainActivity:
// Kotlin
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
assignGradient()
}// JAVA
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
assignGradient();
}
Al ejecutar nuestra aplicación obtendremos un resultado similar al siguiente (dependiendo de los colores que hayas elegido):
Ahora hemos terminado, GradientDrawable acepta más de dos colores así que puedes asignar los que necesites.
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:
Extra
Como extra agregaremos la opción de asignar colores de forma aleatoria a nuestro degradado, para ello generaremos la función randomGradient que devolverá un int array (o arreglo de enteros):
// Kotlin
private fun randomGradient(): Array<Int> {
return intArrayOf(
getRandomColor(),
getRandomColor()
)
}// JAVA
private int[] randomGradient() {
return new int[] {
getRandomColor(),
getRandomColor()
};
}
La cual como podrás ver, llamara a la función getRandomColor dos veces (llama a la función tantas veces como colores aleatorios quieras generar), que es la encargada de generar colores aleatorios:
// Kotlin
private fun getRandomColor(): Int {
val r = Random.nextInt(0, 256)
val g = Random.nextInt(0, 256)
val b = Random.nextInt(0, 256) return Color.rgb(r, g, b)
}// JAVA
private int getRandomColor() {
Random random = new Random();
int r = random.nextInt(256);
int g = random.nextInt(256);
int b = random.nextInt(256); return Color.rgb(r, g, b);
}
Como se ve en la función getRandomColor se hace uso de la clase Random, la cual contiene el método nextInt que nos permite generar números de forma aleatoria entre 0 y 256 (por ello los parámetros). Para generar el color, obtenemos tres veces números aleatorios para obtener los valores de rojo (variable r), verde (variable g) y azul (variable b), finalmente creamos el color con la función rgb de la clase Color pasándole nuestras variables r, g y b.
Ya hemos generado los colores que usaremos en nuestro degradado, ahora tendremos que asignarlos, para ello modificaremos la función assignGradient, quedando de la siguiente forma:
// Kotlin
private fun assignGradient() {
val gradient = GradientDrawable().apply {
colors = randomColors()
orientation = GradientDrawable.Orientation.TOP_BOTTOM
gradientType = GradientDrawable.LINEAR_GRADIENT
shape = GradientDrawable.RECTANGLE
} findViewById<View>(R.id.content).background = gradient
}// JAVA
private void assignGradient() {
GradientDrawable gradient = new GradientDrawable(); gradient.setColors(randomColors());
gradient.setOrientation(
GradientDrawable.Orientation.TOP_BOTTOM
);
gradient.setGradientType(GradientDrawable.LINEAR_GRADIENT);
gradient.setShape(GradientDrawable.RECTANGLE);
findViewById(R.id.content).setBackground(gradient);
}
Dejando (para mi) un resultado como el siguiente:
RETO
Ahora te toca crear un botón que cada vez que el usuario de clic en él, el background cambie.
Nota: Puedes concultar la respuesta en el repositorio de Github
