Membuat UI Cantik Dan Serasi Di Android

Membuat UI Cantik Dan Serasi Di Android
Menggunakan Palette Library Material Design
Fitria Arnita
[email protected]
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.
Kata Kunci: Palette, Material Design, Android Studio
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam
setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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
menggunakan gambar-gambar yang tidak diperlukan. Istilah tersebut sering kita
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam
setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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 {
...
compile 'com.android.support:palette-v7:24.2.1'
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam
setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
...
}
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>
</resources>
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam
setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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" />
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam
setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
<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.
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam
setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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
protected void onCreate(Bundle savedInstanceState) {
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam
setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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);
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam
setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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);
}
});
}
}
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam
setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Contohnya seperti ini :
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam
setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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
dark muted, dark vibrant, muted, vibrant, light muted, light vibrant.
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam
setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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-materialdesign.html
https://www.twoh.co/2016/09/27/tutorial-menggunakan-android-palette-untukambil-warna-dari-gambar/
https://developer.android.com/design/material/index.html?hl=id
Biografi
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.
Terima kasih ya semoga bermanfaat
Lisensi Dokumen:
Copyright © 2008-2017 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam
setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org