¿Cómo crear una herramienta básica de selección de color en Android?

Hay muchas herramientas de selección de color de código abierto para que las aplicaciones de Android elijan. En esta discusión, al final de este artículo, uno podrá implementar la herramienta de selección de color en la aplicación de Android, eche un vistazo a la siguiente imagen para obtener una descripción general de la discusión. En este artículo, se ha discutido la implementación de la herramienta de selección de color muy básica.

Pasos para implementar una herramienta de selección de color

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 la dependencia de la biblioteca del selector de color de AmbilWarna

• AmbilWarna es una biblioteca de selección de color de código abierto que se puede encontrar aquí. Que tiene un solo lanzamiento y este es uno de los lanzamientos finales.
• Ahora agregando su dependencia al archivo gradle de nivel de aplicación .

implementación ‘com.github.yukuku:ambilwarna:2.0.1’

• Asegúrese de que el sistema esté conectado a la red (para que descargue los archivos necesarios) y después de invocar la dependencia, haga clic en el botón » Sincronizar ahora «.
• Consulte la siguiente imagen para ubicar el archivo gradle de nivel de aplicación e invocar la dependencia.

Paso 3: trabajar con el archivo actvity_main.xml

• archivo actividad_principal.xml
• actividad_principal.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <!--Give all widgets, the proper id to handle
         them in MainActivity.java-->
  
    <!--GeeksforGeeks Text-->
    <TextView
        android:id="@+id/gfg_heading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:text="GeeksforGeeks"
        android:textSize="42sp"
        android:textStyle="bold" />
  
    <!--Pick color Button-->
    <Button
        android:id="@+id/pick_color_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:text="Pick Color" />
  
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:textSize="18sp"
        android:text="Your picked color is:" />
  
    <!--sample view to preview selected color by user-->
    <!--by default this has been set to darker gery-->
    <!--this can be overridden after user chose the
         color from color picker-->
    <!--which has been handled in the MainActivity.java-->
    <View
        android:id="@+id/preview_selected_color"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center"
        android:background="@android:color/darker_gray"
        android:layout_marginTop="8dp" />
  
    <!--set color button to overwrite the 
        color for GeeksforGeeks text-->
    <Button
        android:id="@+id/set_color_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        android:text="Set Color" />
  
</LinearLayout>

Interfaz de usuario de salida:

Antes de manejar la funcionalidad del cuadro de diálogo de la herramienta de selección de color, es necesario comprender las partes del cuadro de diálogo para que pueda ser más fácil al tratar con partes del cuadro de diálogo en el código Java.

Paso 4: trabajar con el archivo MainActivity.java

• MainActivity.java
• MainActivity.java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import yuku.ambilwarna.AmbilWarnaDialog;
  
public class MainActivity extends AppCompatActivity {
  
    // text view variable to set the color for GFG text
    private TextView gfgTextView;
  
    // two buttons to open color picker dialog and one to
    // set the color for GFG text
    private Button mSetColorButton, mPickColorButton;
  
    // view box to preview the selected color
    private View mColorPreview;
  
    // this is the default color of the preview box
    private int mDefaultColor;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // register the GFG text with appropriate ID
        gfgTextView = findViewById(R.id.gfg_heading);
  
        // register two of the buttons with their
        // appropriate IDs
        mPickColorButton = findViewById(R.id.pick_color_button);
        mSetColorButton = findViewById(R.id.set_color_button);
  
        // and also register the view which shows the
        // preview of the color chosen by the user
        mColorPreview = findViewById(R.id.preview_selected_color);
  
        // set the default color to 0 as it is black
        mDefaultColor = 0;
  
        // button open the AmbilWanra color picker dialog.
        mPickColorButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // to make code look cleaner the color
                        // picker dialog functionality are
                        // handled in openColorPickerDialogue()
                        // function
                        openColorPickerDialogue();
                    }
                });
  
        // button to set the color GFG text
        mSetColorButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // as the mDefaultColor is the global
                        // variable its value will be changed as
                        // soon as ok button is clicked from the
                        // color picker dialog.
                        gfgTextView.setTextColor(mDefaultColor);
                    }
                });
    }
  
    // the dialog functionality is handled separately
    // using openColorPickerDialog this is triggered as
    // soon as the user clicks on the Pick Color button And
    // the AmbilWarnaDialog has 2 methods to be overridden
    // those are onCancel and onOk which handle the "Cancel"
    // and "OK" button of color picker dialog
    public void openColorPickerDialogue() {
  
        // the AmbilWarnaDialog callback needs 3 parameters
        // one is the context, second is default color,
        final AmbilWarnaDialog colorPickerDialogue = new AmbilWarnaDialog(this, mDefaultColor,
                new AmbilWarnaDialog.OnAmbilWarnaListener() {
                    @Override
                    public void onCancel(AmbilWarnaDialog dialog) {
                        // leave this function body as
                        // blank, as the dialog
                        // automatically closes when
                        // clicked on cancel button
                    }
  
                    @Override
                    public void onOk(AmbilWarnaDialog dialog, int color) {
                        // change the mDefaultColor to
                        // change the GFG text color as
                        // it is returned when the OK
                        // button is clicked from the
                        // color picker dialog
                        mDefaultColor = color;
  
                        // now change the picked color
                        // preview box to mDefaultColor
                        mColorPreview.setBackgroundColor(mDefaultColor);
                    }
                });
        colorPickerDialogue.show();
    }
}

Salida: ejecutar en el emulador