En el artículo anterior Cómo crear una herramienta de selección de color básica en Android , hemos discutido cómo crear una herramienta de selección de color básica. En este artículo, vamos a crear la misma herramienta de selección de color pero usando una rueda de color y un control deslizante . Este es otro tipo de selector de color que permite al usuario elegir el nivel de brillo del color y la intensidad del color. Esta es también una de las bibliotecas de código abierto. Entonces, en este artículo se ha discutido la implementación del siguiente tipo de herramienta de selección de color.
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 ColorPicker
- Ahora agregue la dependencia de la biblioteca del selector de color como (al archivo Gradle de nivel de aplicación ):
implementación ‘com.github.duanhong169:colorpicker:1.1.6’
- 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 si no puede ubicar el archivo Gradle de nivel de aplicación e invocar la dependencia.
Paso 3: trabajar con el archivo activity_main.xml
- archivo actividad_principal.xml
- actividad_principal.xml
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
Java
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import top.defaults.colorpicker.ColorPickerPopup;
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;
// handling the Pick Color Button to open color
// picker dialog
mPickColorButton.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(final View v) {
new ColorPickerPopup.Builder(MainActivity.this).initialColor(
Color.RED) // set initial color
// of the color
// picker dialog
.enableBrightness(
true) // enable color brightness
// slider or not
.enableAlpha(
true) // enable color alpha
// changer on slider or
// not
.okTitle(
"Choose") // this is top right
// Choose button
.cancelTitle(
"Cancel") // this is top left
// Cancel button which
// closes the
.showIndicator(
true) // this is the small box
// which shows the chosen
// color by user at the
// bottom of the cancel
// button
.showValue(
true) // this is the value which
// shows the selected
// color hex code
// the above all values can be made
// false to disable them on the
// color picker dialog.
.build()
.show(
v,
new ColorPickerPopup.ColorPickerObserver() {
@Override
public void
onColorPicked(int color) {
// set the color
// which is returned
// by the color
// picker
mDefaultColor = color;
// now as soon as
// the dialog closes
// set the preview
// box to returned
// color
mColorPreview.setBackgroundColor(mDefaultColor);
}
});
}
});
// handling the Set Color button to set the selected
// color for the GFG text.
mSetColorButton.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View v) {
// now change the value of the GFG text
// as well.
gfgTextView.setTextColor(mDefaultColor);
}
});
}
}
Salida: ejecutar en el emulador
Publicación traducida automáticamente
Artículo escrito por adityamshidlyali y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA