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.

Comments

Post Terpopuler Sepanjang Masa

Cara Memasang Iklan Interstitial AdMob

Cara Memasang Iklan Banner AdMob di Android Studio

Aplikasi Pengingat Tugas (To Do Reminder) Android

Tutorial Menerapkan Animasi Lottie di Android Studio

Cara Merubah Package Name di Android Studio

Menampilkan Webview Pada Aplikasi di Android Studio

Cara Membuat Custom Icon Vector Asset di Android Studio