Selección de colores con la paleta API en Android con ejemplo

Cuando hacemos el diseño de la interfaz de usuario para cualquiera de las aplicaciones, la parte más importante que debemos tener en cuenta al crear la aplicación es que debemos usar la combinación de colores adecuada en nuestra aplicación, que a veces debe ser la misma que la de la imagen. Con esta API, podemos actualizar los colores de nuestros widgets de acuerdo con los colores que están presentes en nuestra imagen. Esta API nos ayudará a extraer colores de la imagen y luego podremos usar estos colores en nuestros widgets. 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que usaremos dos imágenes diferentes para cambiar los colores de los componentes de la interfaz de usuario de diseño de acuerdo con nuestro archivo de imagen.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: Agregar dependencia en el archivo build.gradle 

Gradle Scripts > build.gradle(Módulo:aplicación)

implementación ‘com.android.support:palette-v7:30.3.0’

Después de agregar la dependencia, ahora sincronice su proyecto y avanzaremos hacia el trabajo con nuestro archivo de diseño. 

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/idRLBack"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <!--Image view for displaying our image-->
    <ImageView
        android:id="@+id/idIVImage"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:src="@drawable/logo1" />
  
    <!--linear layout for our buttons to 
        change image and layout colors-->
    <LinearLayout
        android:id="@+id/idLL"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idIVImage"
        android:layout_centerHorizontal="true"
        android:layout_margin="10dp"
        android:orientation="horizontal"
        android:weightSum="2">
          
        <!--first button for our first image-->
        <Button
            android:id="@+id/idBtnChangeImg"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:text="Image 1"
            android:textAllCaps="false" />
  
        <!--second button for our second image-->
        <Button
            android:id="@+id/idBtnChangeImg2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:text="Image 2"
            android:textAllCaps="false" />
    </LinearLayout>
      
    <!--sample text view for heading-->
    <TextView
        android:id="@+id/idTVGFG"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idLL"
        android:layout_margin="4dp"
        android:padding="4dp"
        android:text="Welcome to Geeks for Geeks"
        android:textAlignment="center"
        android:textSize="25sp" />
      
    <!--sample text view for second heading-->
    <TextView
        android:id="@+id/idTVHead"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idTVGFG"
        android:layout_margin="3dp"
        android:padding="4dp"
        android:text="Geeks For Geeks Carnival"
        android:textAlignment="center" />
      
</RelativeLayout>

Nota : Las imágenes utilizadas en ImageView están presentes en la carpeta dibujable. Puedes agregarle el tuyo. 

Paso 4: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.palette.graphics.Palette;
  
public class MainActivity extends AppCompatActivity {
  
    // creating variables for our UI components..
    private TextView headTV, gfgTV;
    private ImageView gfgIV;
    private Button changeBtn, changeBtn2;
    private RelativeLayout backRL;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing all our variables with their ids.
        headTV = findViewById(R.id.idTVHead);
        gfgTV = findViewById(R.id.idTVGFG);
        gfgIV = findViewById(R.id.idIVImage);
        backRL = findViewById(R.id.idRLBack);
        changeBtn = findViewById(R.id.idBtnChangeImg);
        changeBtn2 = findViewById(R.id.idBtnChangeImg2);
          
        // on below line we are decoding our image from image resource.
        Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(), R.drawable.logo1);
        Bitmap bitmap2 = BitmapFactory.decodeResource(getResources(), R.drawable.logo2);
          
        // Get bitmap from drawable resources
        // on below line we are calling a method
        // to change the layout color according to first image.
        createPaletteAsync(bitmap1);
          
        // on below line we are setting 
        // bitmap to our image view.
        gfgIV.setImageBitmap(bitmap1);
          
        // on below line we are adding click listener to our button1.
        changeBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                  
                // inside on click we are calling a second method 
                // to change our layout colors with second image bitmaps. .
                createDarkPaletteAsync(bitmap2);
                  
                // on below line we are setting bitmap to our image view.
                gfgIV.setImageBitmap(bitmap2);
            }
        });
          
        // adding on click listener for our second button.
        changeBtn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                  
                // on below line we are calling a method to change
                // our layout colors and we are passing our first image bitmap.
                createPaletteAsync(bitmap1);
                  
                // on below line we are setting 
                // the bitmap to our image view.
                gfgIV.setImageBitmap(bitmap1);
            }
        });
    }
  
    public void createDarkPaletteAsync(Bitmap bitmap) {
          
        // on below line we are calling a palette 
        // method from bitmap to get colors from our image.
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            public void onGenerated(Palette p) {
                  
                // Use generated instance
                // on below line we are passing
                // a default value to it.
                int defaultValue = 0x000000;
                  
                // on below line we are adding colors to our different views.
                headTV.setTextColor(p.getLightVibrantColor(defaultValue));
                gfgTV.setTextColor(p.getLightVibrantColor(defaultValue));
                backRL.setBackgroundColor(p.getDarkVibrantColor(defaultValue));
                changeBtn.setTextColor(p.getDarkVibrantColor(defaultValue));
                changeBtn.setBackgroundColor(p.getLightVibrantColor(defaultValue));
                changeBtn2.setTextColor(p.getDarkVibrantColor(defaultValue));
                changeBtn2.setBackgroundColor(p.getLightVibrantColor(defaultValue));
            }
        });
    }
  
    public void createPaletteAsync(Bitmap bitmap) {
        // on below line we are calling a palette method
        // from bitmap to get colors from our image.
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            public void onGenerated(Palette p) {
                 
                // Use generated instance
                // on below line we are passing
                // a default value to it.
                int defaultValue = 0x000000;
                  
                // on below line we are adding colors to our different views.
                headTV.setTextColor(p.getDarkVibrantColor(defaultValue));
                gfgTV.setTextColor(p.getDominantColor(defaultValue));
                backRL.setBackgroundColor(p.getLightVibrantColor(defaultValue));
                changeBtn.setTextColor(p.getLightMutedColor(defaultValue));
                changeBtn.setBackgroundColor(p.getDarkVibrantColor(defaultValue));
                changeBtn2.setTextColor(p.getLightMutedColor(defaultValue));
                changeBtn2.setBackgroundColor(p.getDarkVibrantColor(defaultValue));
                  
            }
        });
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación. 

Producción: