Membuat UI Cantik Dan Serasi Di Android Menggunakan Palette Library Material Design

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"> 40dp match_parent @android:color/white bold 5dp

Selanjutnya, kita menambahkan beberapa strings baru juga pada strings.xml :

<string name="vibrant">Vibrant <string name="vibrant_light">Vibrant Light <string name="vibrant_dark">Vibrant Dark <string name="muted">Muted <string name="muted_light">Muted Light <string name="muted_dark">Muted Dark Kemudian untuk margin kita akan mengupdate dimens.xml :

16dp 16dp 16dp

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 :


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 protected void onCreate(Bundle savedInstanceState) {


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); } });

} }


Contohnya seperti ini :


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.


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


Membuat UI Cantik Dan Serasi Di Android Menggunakan Palette Library Material Design

Recommend Documents