membuat ui cantik dan serasi di android menggunakan...

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

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





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





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'

...

}

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>



<dimen name="activity_horizontal_margin">16dp</dimen>

<dimen name="activity_vertical_margin">16dp</dimen>

<dimen name="card_margin">16dp</dimen>

</resources>





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"


android:text="@string/vibrant_light" />





<TextView

android:id="@+id/tvVibrantDark"


android:text="@string/vibrant_dark" />

<TextView

android:id="@+id/tvMuted"


android:text="@string/muted" />

<TextView

android:id="@+id/tvMutedLight"


android:text="@string/muted_light" />

<TextView

android:id="@+id/tvMutedDark"


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

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-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=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...

Documents