Membuat UI Cantik Dan Serasi Di Android
Menggunakan Palette Library Material Design
Fitria Arnita
fitriaarnita23@gmail.com
Abstrak
Material Design
adalah panduan komprehensif untuk desain visual,
gerak, dan interaksi lintas platform dan perangkat. Android kini
menyertakan dukungan untuk aplikasi desain bahan. Untuk
menggunakan desain bahan di aplikasi Android, ikuti panduan yang
didefinisikan dalam spesifikasi desain bahan dan gunakan komponen
dan fungsionalitas baru yang tersedia di Android 5.0 (API level 21) ke
atas. bertujuan untuk pengubahan interface secara masal, melainkan
langkah untuk menuju
New Visually Representative language, yang
berarti mewujudkan visualisasi agar menyerupai bentuk nyata baik
dalam teksture, bayangan dan pencahayaan. Salah satu material
design yang digunakan untuk masalah pewarnaan yaitu
palette
Library.
Palette Ditujukan untuk membuat aplikasi berwarna,
konsisten, masuk akal, dan mudah untuk digunakan. Secara dasar
Palette akan memberikan pilihan warna yang mencolok seperti pada
source asset dan menentukan elemen menjadi
dark muted, dark
vibrant, muted, vibrant, light muted, light vibrant.
Pendahuluan
Baru-beberapa bulan lalu Google telah merilis Platform terbaru dari system operasi Android, system operasi tersebutdiberi nama Lollipop sebagai android versi 5.0 dalam system operasi Lollipop ini google telah menerapkan
konsep Material Design. Material Design sendiri bukan bertujuan untuk
pengubahan interface secara masal, melainkan langkah untuk menuju New
Visually Representative language, yang berarti mewujudkan visualisasi agar menyerupai bentuk nyata baik dalam teksture, bayangan dan pencahayaan. Sebelum adanya Material design, para pengembang yang berfokus pada User Interface (UI) dan User Experience (UX) lebih mengusung bentuk tiga dimensi dimana banyak gradient yang memiliki kesan “Timbul” dari layar. Tetapi dalam beberapa kasus, design seperti itu sudah terlihat jadul dan using, sehingga tidak popular lagi dan mulai ditinggalkan oleh para designer, baik yang menutamakan UI maupun UX. Material design sendiri cenderung menggunakan warna-warna solid dan tanpa gradient, dan hanya menggunakan efek pencahayaan sederhana namun tetap terkesan simple dan elegan.
Material Design adalah bahasa pemrograman visual yang dibuat oleh Google. Bahasa pemrogaman ini menggunakan tampilan visual yang menarik tapi sederhana. Material Design bukan menawarkan konsep perubahan secara masive,
tetapi ini adalah langkah yang signifikan untuk menuju New Visually
Representative language. Teknologi ini akan memicu design berbasis artificial
yang diwujudkan kedalam bentuk yang nyata.
Sebelum trend material design "menukik", banyak designer yang berusaha
membuat tampilan (contohnya tombol / button) menggunakan style 3D agar bagaimana output yang dihasilkan menyerupai bentuk asli di dunia nyata. Tetapi hal itu sudah tidak populer lagi, hal yang menjadi prioritas utama sekarang adalah kecepatan akses yang menjadi salah satu bagian dari material design karena secara garis besar mengutamakan pewarnaan objek yang solid tanpa memaksakan
sebut dengan flat design yang tidak mengutamakan penggunaan background yang terlalu rumit tetapi simple agar membuat para pengguna dapat lebih mudah dan tidak bingung untuk menggunakan objek tersebut.
Palette Ditujukan untuk membuat aplikasi berwarna, konsisten, masuk akal, dan mudah untuk digunakan. Secara dasar Palette akan memberikan pilihan
warna yang mencolok seperti pada source asset dan menentukan elemen menjadi
dark muted, dark vibrant, muted, vibrant, light muted, light vibrant.
Pembahasan
Kali ini saya akan membahas salah satu fitur dari library Android Material Design yang sering digunakan, yaitu Palette. Dengan menggunakan class Palette, kita bisa dengan mudah mengekstrak/mengambil warna dari sebuah gambar, yang akan berguna dalam penerapan style/tema aplikasi supaya sesuai dengan images/gambar yang sedang ditampilkan. Contohnya pada aplikasi MP3 player, dimana dengan menggunakan Palette tema warna background dan warna tombol bisa disesuaikan dengan gambar cover album yang dimainkan, sehingga terasa serasi
Di benak kita mungkin mengekstrak warna dari gambar terdengar susah dan butuh skill coding tingkat tinggi, namun untungnya Palette class sangat mempermudah kita dalam hal ini. Tidak hanya itu Palette class bahkan membedakan warna ke dalam beberapa tipe sehingga memudahkan kalian untuk mengambil mana warna yang benar-benar cocok untuk aplikasi kalian.
kita akan mulai dengan membuat sebuah project Android baru di Android Studio terlebih dahulu.
Kemudian update dependencies pada file build.gradle kalian dengan mengimport Palette library seperti di bawah ini :
dependencies { ...
... }
Jika sudah, kita akan membuat style baru yang akan digunakan untuk TextView pada res/values/styles.xml bernama tvPalleteStyle
<style name="tvPalleteStyle"> <item name="android:layout_height">40dp</item> <item name="android:layout_width">match_parent</item> <item name="android:textColor">@android:color/white</item> <item name="android:textStyle">bold</item> <item name="android:paddingLeft">5dp</item> </style>
Selanjutnya, kita menambahkan beberapa strings baru juga pada strings.xml :
<string name="vibrant">Vibrant</string>
<string name="vibrant_light">Vibrant Light</string> <string name="vibrant_dark">Vibrant Dark</string> <string name="muted">Muted</string>
<string name="muted_light">Muted Light</string> <string name="muted_dark">Muted Dark</string>
Kemudian untuk margin kita akan mengupdate dimens.xml :
<resources>
<!-- Default screen margins, per the Android Design guidelines. --> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> <dimen name="card_margin">16dp</dimen>
Setelah itu, pada file activity_main.xml masukkan kode seperti di bawah ini : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical"> <ImageView android:id="@+id/ivWallpaper" android:layout_width="match_parent" android:layout_height="275dp" android:src="@drawable/face2" /> <TextView android:id="@+id/tvVibrant" style="@style/tvPalleteStyle" android:layout_marginTop="10dp" android:text="@string/vibrant" /> <TextView android:id="@+id/tvVibrantLight" style="@style/tvPalleteStyle" android:text="@string/vibrant_light" />
<TextView android:id="@+id/tvVibrantDark" style="@style/tvPalleteStyle" android:text="@string/vibrant_dark" /> <TextView android:id="@+id/tvMuted" style="@style/tvPalleteStyle" android:text="@string/muted" /> <TextView android:id="@+id/tvMutedLight" style="@style/tvPalleteStyle" android:text="@string/muted_light" /> <TextView android:id="@+id/tvMutedDark" style="@style/tvPalleteStyle" android:text="@string/muted_dark" /> </LinearLayout>
Yang terakhir, kita akan mengupdate class MainActivity.java. Di class inilah kita akan menggunakan Palette untuk mengambil warna dari gambar Bitmap, Di dalam Palette sendiri, kita akan mempunyai banyak Swatch (mirip seperti Photoshop), dan di tiap Swatch ada satu color. Palette secara default akan mencoba untuk mengambil 16 tipe warna, namun pada praktiknya hanya ada 6 profil warna yang akan sering kita gunakan, yaitu :
Vibrant : gunakan getVibrantColor() method untuk mendapatkan warna vibrant. Vibrant dark : gunakan getDarkVibrantColor() method untuk mendapatkan warna vibrant dark.
Vibrant light : gunakan getLightVibrantColor() method untuk mendapatkan warna vibrant light.
Muted : gunakan getMutedColor() method untuk mendapatkan warna muted. Muted dark : gunakan getDarkMutedColor() method untuk mendapatkan warna muted dark.
Muted light : gunakan getLightMutedColor() method untuk mendapatkan warna muted light. import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.graphics.Palette; import android.support.v7.widget.Toolbar; import android.widget.TextView; /** * Created by Herdi_WORK on 18.09.16. */
public class MainActivity extends AppCompatActivity{
private TextView vibrantView; private TextView vibrantLightView; private TextView vibrantDarkView; private TextView mutedView; private TextView mutedLightView; private TextView mutedDarkView;
@Override
super.onCreate(savedInstanceState); setContentView(R.layout.activity_pallete); initViews(); paintTextBackground(); }
private void initViews() {
vibrantView = (TextView) findViewById(R.id.tvVibrant);
vibrantLightView = (TextView) findViewById(R.id.tvVibrantLight); vibrantDarkView = (TextView) findViewById(R.id.tvVibrantDark); mutedView = (TextView) findViewById(R.id.tvMuted);
mutedLightView = (TextView) findViewById(R.id.tvMutedLight); mutedDarkView = (TextView) findViewById(R.id.tvMutedDark); }
private void paintTextBackground() {
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.lena);
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() { @Override
public void onGenerated(Palette palette) {
// ambil 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); vibrantView.setBackgroundColor(vibrant); vibrantLightView.setBackgroundColor(vibrantLight); vibrantDarkView.setBackgroundColor(vibrantDark); mutedView.setBackgroundColor(muted); mutedLightView.setBackgroundColor(mutedLight); mutedDarkView.setBackgroundColor(mutedDark); } }); } }
Penutup
Material Design adalah bahasa pemrograman visual yang dibuat oleh Google. Bahasa pemrogaman ini menggunakan tampilan visual yang menarik tapi sederhana. Material Design bukan menawarkan konsep perubahan secara masive,
tetapi ini adalah langkah yang signifikan untuk menuju New Visually
Representative language. Teknologi ini akan memicu design berbasis artificial
yang diwujudkan kedalam bentuk yang nyata.
Salah satu fitur dari library Android Material Design yang sering digunakan, yaitu Palette. Dengan menggunakan class Palette, kita bisa dengan mudah mengekstrak/mengambil warna dari sebuah gambar, yang akan berguna dalam penerapan style/tema aplikasi supaya sesuai dengan images/gambar yang sedang ditampilkan. Contohnya pada aplikasi MP3 player, dimana dengan menggunakan Palette tema warna background dan warna tombol bisa disesuaikan dengan gambar cover album yang dimainkan, sehingga terasa serasi.
Palette Ditujukan untuk membuat aplikasi berwarna, konsisten, masuk akal, dan mudah untuk digunakan. Secara dasar Palette akan memberikan pilihan
warna yang mencolok seperti pada source asset dan menentukan elemen menjadi
Referensi
https://www.dumetschool.com/blog/apa-itu-material-design http://okyasha7.blogspot.nl/2014/11/melihat-lebih-spesifik-pada-google.html http://diptonugroho.blogspot.nl/2015/07/tutorial-mudah-membuat-material-design.html https://www.twoh.co/2016/09/27/tutorial-menggunakan-android-palette-untuk-ambil-warna-dari-gambar/ https://developer.android.com/design/material/index.html?hl=idBiografi
hai hai nama saya Fitria Arnita, saat ini saya sibuk kuliah dan bekerja. Saya kuliah di salah satu Perguruan Tinggi ilmu komputer di Tangerang angkatan 2014 sampai saat ini. Rumah saya berada di daerah Kabupaten Tangerang beralamat Dasana Indah. Kalo dengan hobi, saya lebih menyukai anime (kartun jepang), saya sampai saat ini belum pernah mengikuti organisasi, saya jurusan Sistem Informasi dan konsentrasinya Sistem Informasi Manajemen, memang saya tidak terlalu mengerti tentang IT tetapi saya belajar untuk menggelutinya. Untuk lebih tahu tentang saya, silahkan cek facebook: fitria arnita dan Ig :fitriaarnita23.
