Cara Mengambil Warna Dari Gambar Menggunakan Android Palette
Assalamualaikum Warahmatullahi Wabarakatuh.
Hallo sahabat developer, pada pembaasan kali ini kita akan belajar dan melanjutnya materi mengenai android material design, didalam android material design terdapat sebuah class library yang dapat diguakan untuk mengambil/mengekstrak warna dari gambar, bernama Pelette. Dengan menggunakan class Palette, kita dapat mengambil warna dari gambar yang ditampilkan pada layar aplikasi.
Contohnya seperti pada aplikasi pemutar musik, saat user milih lagu dan menampilkan gambar album dari musik yang dimainkan, warna background dan juga warna tombol pada aplikasi tersebut akan menyesuaikan dengan warna pada gambar yang tampil pada aplikasinya, sehingga tampilan aplikasi lebih selaras dengan gambar yang ditampilkan.
Materi lainnya yang direkomendasikan:
- Cara Membuat SwitchCompat di Android Material Design
- Cara Menambahkan Ripple Effects di Android Material Design
- Cara Membuat AppBarLayout dan CoordinatorLayout di Android Material Design
- Membuat Animasi dan Sub Menu pada Floating Action Button
- Belajar Cara Membuat TabHost di Android Studio
- Belajar Membuat Style Material Design di Android Studio
Tidak hanya itu, dalam class Palette warna-warna tersebut akan dibedakan menjadi beberapa tipe, sehingga memudahkan kalian untuk memilih warna yang sesuai untuk tampilan aplikasi yang akan dibuat.
Pada tutorial ini kita akan belajar membuat project sederhana menggunakan class Palette, didalam project tersebut kita siapkan sebuah gambar yang akan ditampilkan pada ImageView, tapi Palette akan mengambil gambar tersebut melalui Bitmap, bukan dari ImageView, warna-warna dari gambar tersebut akan kita tampilkan pada Background TextView.
Cara Menggunakan Android Palette untuk Ambil Warna dari Gambar
1) Buka aplikasi Android Studio kalian, Buat Project Baru.2) Pertama masukan beberapa library berikut ini didalam dependensies pada file build.gradle (app level), untuk kebutuhan komponen material design kita.
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:palette-v7:27.1.1'
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="12dp"
android:orientation="vertical"
tools:context="android.cianjur.developer.net.materialdesignexample.MainActivity">
<ImageView
android:id="@+id/gambarSinga"
android:layout_width="wrap_content"
android:layout_height="170dp"
android:layout_marginBottom="8dp"
app:srcCompat="@drawable/singa" />
<TextView
android:id="@+id/getVibrant"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="12dp"
android:text="Vibrant"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/getVibrantDark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="12dp"
android:text="Vibrant Dark"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/getVibrantLight"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="12dp"
android:text="Vibrant Light"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/getMuted"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="12dp"
android:text="Muted"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/getMutedDark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="12dp"
android:text="Muted Dark"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="@+id/getMutedLight"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="12dp"
android:text="Muted Light"
android:textSize="15sp"
android:textStyle="bold" />
</LinearLayout>
4) Buka class MainActivity.java, pada class ini kita akan implementasikan Paletter untuk mengambil warna dari Gambar Bitmap, secara default Palette akan mengambil 16 jenis warna, tapi disini kita hanya akan mengambil 6 jenis warna saja dari Gambar Bitmap lalu menampilkannya pada warna Background TextView.
package android.cianjur.developer.net.materialdesignexample;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.graphics.Palette;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
//Deklarasi Variable
private TextView Vibrant, VibrantDark, VibrantLight, Muted, MutedDark, MutedLight;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Inisialisasi
Vibrant = findViewById(R.id.getVibrant);
VibrantDark = findViewById(R.id.getVibrantDark);
VibrantLight = findViewById(R.id.getVibrantLight);
Muted = findViewById(R.id.getMuted);
MutedDark = findViewById(R.id.getMutedDark);
MutedLight = findViewById(R.id.getMutedLight);
//Mengambil gambar dari Bitmap
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.singa);
//Menggunakan class Paletter untuk mengekstrak warna dari Gambar Bitmap
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(@NonNull Palette palette) {
//Mengambil Warna dari Gambar menggunakan Palette
int defaultValue = 0x000000;
int vibrant = palette.getVibrantColor(defaultValue);
int vibrantLight = palette.getLightVibrantColor(defaultValue);
int vibrantDark = palette.getDarkVibrantColor(defaultValue);
int muted = palette.getMutedColor(defaultValue);
int mutedLight = palette.getLightMutedColor(defaultValue);
int mutedDark = palette.getDarkMutedColor(defaultValue);
//Menerapkan Warna tersebut pada Background TextView
Vibrant.setBackgroundColor(vibrant);
VibrantLight.setBackgroundColor(vibrantLight);
VibrantDark.setBackgroundColor(vibrantDark);
Muted.setBackgroundColor(muted);
MutedLight.setBackgroundColor(mutedLight);
MutedDark.setBackgroundColor(mutedDark);
}
});
}
}
- getVibrantColor() method untuk mendapatkan warna vibrant.
- getDarkVibrantColor() method untuk mendapatkan warna vibrant dark.
- getLightVibrantColor() method untuk mendapatkan warna vibrant light.
- getMutedColor() method untuk mendapatkan warna muted.
- getDarkMutedColor() method untuk mendapatkan warna muted dark.
- getLightMutedColor() method untuk mendapatkan warna muted light.
Sekian dari saya, mohon maaf bila ada kesalahan, jika ada yang ingin ditanyaka, silakan isi kolom komentar dibawah ini.
Wassalamualaikum Warahmatullahi Wabarakatuh.
Posting Komentar untuk "Cara Mengambil Warna Dari Gambar Menggunakan Android Palette"