Menggunakan Pick Color (Ambil Warna)

Postingan kali ini akan mendemokan cara menerapkan pick color atau ambil warna yang bisa diterapkan untuk mengganti warna latar belakang layout, warna teks dan sebagainya yang bisa diwarnai. Disini kita akan menggunakan library dari seorang developer asal Indonesia dengan nama samaran Yukuku.

Hal pertama, silahkan untuk memasukkan library dibawah ini ke dalam file build.gradle (module: app), lalu jangan lupa untuk sync gradle. Jika mendapati kesulitan atau belum terbiasa dengan hal seperti ini, Anda dapat menemukan tutorial-tutorial nya di blog ini, silahkan menggunakan fitur search (pencarian).

implementation 'com.github.yukuku:ambilwarna:2.0.1'

Kita akan coba menerapkannya untuk mengganti warna latar belakang layout utama. Berikut isi dari layout activity_main, sebuah Linearlayout dan sebuah TextView yang masing-masing sudah diberikan identitas (ID). TextView ini akan kita gunakan sebagai tombol untuk memunculkan dialog pick color nya.

activity_main.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:id="@+id/layoutUtama"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="20dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/gantiWarna"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:drawable/list_selector_background"
        android:text="GANTI WARNA"
        android:textColor="#000000"
        android:textSize="30sp"
        android:textStyle="bold"
        android:layout_gravity="center"/>

</LinearLayout>

Selanjutnya pada MainActivity.java, pertama-tama dengan mendeklarasikan terlebih dahulu variabel Linearlayout dan objek int. Kemudian mendeklarasikan id dari Linearlayout tersebut dan menerapkan klik listener untuk TextView di dalam onCreate.

Lalu untuk penerapan dialog pick colornya kita akan buat diluar onCreate supaya tidak terlalu ramai kodingan di dalam onCreate. Terdapat dua metode di dalam dialog pick color yaitu : onOk dan onCancel, yang mana tentunya kode untuk merubah warna akan diletakkan di dalam onOk sedangkan onCancel akan membatalkan aksi.

MainActivity.java :

package com.gwnbs.pickcolor;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

import yuku.ambilwarna.AmbilWarnaDialog;

public class MainActivity extends AppCompatActivity {

    private LinearLayout layoutUtama;
    private int warnaDipilih;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        layoutUtama = findViewById(R.id.layoutUtama);
        TextView gantiWarna = findViewById(R.id.gantiWarna);

        gantiWarna.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                bukaDialogWarna();
            }
        });
    }

    private void bukaDialogWarna() {
        AmbilWarnaDialog dialogWarna = new AmbilWarnaDialog(this,
                warnaDipilih, true, new AmbilWarnaDialog.OnAmbilWarnaListener() {
            @Override
            public void onOk(AmbilWarnaDialog dialog, int warna) {
                warnaDipilih = warna;
                layoutUtama.setBackgroundColor(warna);
            }

            @Override
            public void onCancel(AmbilWarnaDialog dialog) {
            }
        });
        dialogWarna.show();
    }
}

Simpel dan mudah bukan?.. Nah, untuk menyimpan hasil perubahan warna kita bisa menggunakan Sharedpreferences untuk memerintah system Android mengingatnya. Jika menggunakan Sharedpreferences tentunya kita harus punya nilai defaultnya. Pertama kita deklarasikan dulu variabel untuk Sharedprefences dan nilai int untuk warna default.

Kemudian kita buat metode penyimpanannya dan memasukkannya ke dalam metode onOk pada dialog pick color sebelumnya, lalu memuat penyimpanannya di dalam onCreate. Sehingga berikut kode selengkapnya pada MainActivity.java :

package com.gwnbs.pickcolor;

import androidx.appcompat.app.AppCompatActivity;

import android.content.SharedPreferences;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

import yuku.ambilwarna.AmbilWarnaDialog;

public class MainActivity extends AppCompatActivity {

    private LinearLayout layoutUtama;
    private int warnaDipilih;
    private SharedPreferences pref;
    static int warnaDefault = Color.RED;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        layoutUtama = findViewById(R.id.layoutUtama);
        pref = getSharedPreferences("SIMPAN", MODE_PRIVATE);
        warnaDipilih = pref.getInt("simpan", warnaDefault);
        layoutUtama.setBackgroundColor(warnaDipilih);

        TextView gantiWarna = findViewById(R.id.gantiWarna);

        gantiWarna.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                bukaDialogWarna();
            }
        });
    }

    private void bukaDialogWarna() {
        AmbilWarnaDialog dialogWarna = new AmbilWarnaDialog(this,
                warnaDipilih, true, new AmbilWarnaDialog.OnAmbilWarnaListener() {
            @Override
            public void onOk(AmbilWarnaDialog dialog, int warna) {
                warnaDipilih = warna;
                layoutUtama.setBackgroundColor(warna);
                simpanHasil();
            }

            @Override
            public void onCancel(AmbilWarnaDialog dialog) {
            }
        });
        dialogWarna.show();
    }

    private void simpanHasil () {
        pref = getSharedPreferences("SIMPAN", MODE_PRIVATE);
        SharedPreferences.Editor edit = pref.edit();
        edit.putInt("simpan", warnaDipilih);
        edit.apply();
    }
}

Baik, sekian saja mudah-mudahan dapat dipahami, jika ada yang ingin disampaikan bisa diposting di kolom komentar.