Android UI - Resource dan Custom Button

Android UI

Resource, Custom Button

Ketemu lagi sama ane di warung eh di sini maksudnyaa :v, kali ini ane mau share tentang resourse sama custom button, gak mungkin kita terus menggunakan design standard dari sebuah aplikasi, karena desain berpengaruh terhadap identitas aplikasi itu sendiri, lihat saja facebook, twitter dan google mereka memiliki ciri khas masing – masing.

 

Sekilas tampilan profile facebook dan twitter, masing-masing memiliki ciri desain yang khas,

Nah sekarang kita langsung saja mempraktikkan membuat tampilan yang menarik.

ita akan membuat tampilan seperti ini nantinya, gimana? Lumayan keren kan?.

Nah sekarang kita mulai bikin, silahkan bikin projek ¬
Baru di android studio anda, mari kita analisa sejenak, kita butuh background dan logo. Resource dan source code bisa di download di github saya.

 

Resource nya, ini nih resource nya, background dan logo.

 

 ini logo nya

Disini saya menggunakan background berupa gambar, dan logo juga berupa gambar, keduanya berformat png. Sekarang masukkan komponen komponennya, imageView dan 3 button.

Nah kalau sudah sekarang kita modifikasi. Pertama kita buat folder drawable terlebih dahulu,

Drawable berada di dalam folder res, fungsinya untuk menampung resource kita nantinya, cara buat folder drawable sebagai berikut :

Nah kemudian kita buat resource file nya

Klik kanan pada folder drawable > new > Drawable resource file, beri nama background_button

 Root element : kita gunakan selector
Sebelum itu kita copy logo dan background kemudian paste di folder drawable.
Untuk penjelasan code saya tulis di bagian bawah kita fokus pada code terlebih dahulu.

ini Code nya

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/flat2"> <Button android:id="@+id/btninfo" android:layout_width="300dp" android:layout_height="30dp" android:layout_above="@+id/proses" android:layout_alignLeft="@+id/proses" android:layout_marginBottom="19dp" android:background="@drawable/background_button" android:text="@string/Kalkulator" /> <Button android:id="@+id/proses" android:layout_width="300dp" android:layout_height="30dp" android:layout_above="@+id/btnabout" android:layout_centerHorizontal="true" android:layout_marginBottom="20dp" android:text="@string/inputan" android:background="@drawable/background_button" /> <ImageView android:id="@+id/imageView1" android:layout_width="250dp" android:layout_height="250dp" android:layout_above="@+id/btninfo" android:layout_centerHorizontal="true" android:layout_marginBottom="46dp" android:background="@drawable/circle" android:contentDescription="@string/app_name" android:src="@drawable/app" /> <Button android:id="@+id/btnabout" android:layout_width="300dp" android:layout_height="30dp" android:layout_alignLeft="@+id/proses" android:layout_alignParentBottom="true" android:layout_marginBottom="40dp" android:text="@string/login" android:background="@drawable/background_button" /> </RelativeLayout  

 

Oh iya, kita copy dulu resorce strings.xml nya, code strings.xml

or name="ungu">#9C27B0</color> <color name="silver">#9E9E9E</color> <color name="putih">#ffffff</color> <!-- Recource untuk layout Uts --> <string name="button">OK</string> <string name="var1">variable one</string> <string name="var2">variable two</string> <string name="Kalkulator">Kalkulator</string> <string name="inputan">Proses Input</string> <string name="about">Tentang Ane</string> <string name="persamaan">Persamaan Kuadrat</string> <string name="inputApp">Input Output App</string> <string name="btnPrint">Print Bro!!!</string> <string name="title_activity_contoh">ContohActivity</string> <string name="title_activity_uts">UtsActivity</string>

Sekarang buka file background_button.xml, isikan code ini

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape android:shape="rectangle"> <corners android:topLeftRadius="15dip" android:topRightRadius="15dip" android:bottomLeftRadius="15dip" android:bottomRightRadius="15dip"/> <solid android:color="#33CCFF"/> <stroke android:width="2px" android:color="#60fdcf" /> </shape> </item> <item> <shape android:shape="rectangle"> <corners android:topLeftRadius="15dip" android:topRightRadius="15dip" android:bottomLeftRadius="15dip" android:bottomRightRadius="15dip"/> <solid android:color="#9e9e9e"/> </shape> </item> </selector

Penjelasan singkat

kegunaan selector di atas adalah untuk menghubungkan tiap-tiap state dengan tampilan yang sesuai.

-          Item : Mendefinisikan drawable untuk digunakan sebagai bagian dari transisi drawable.

Di contoh saya menggunakan android:state_pressed="true"

Saya mengaktifkan fungsi tekan pada button, jadi jika button di tekan aka nada perubahan

-          Shape : utk mendifinisikan pola, di contoh saya gunakan rectangle atau persegi panjang, kita juga bisa gunakan bentuk yang lain yaitu line, oval, ring tinggal kita sesuaikan dengan kebutuhan.

-          Corners : Menciptakan sudut bulat untuk bentuk. Berlaku hanya ketika bentuknya persegi panjang. Lalu membulatkan setiap sudut.

-          Solid : warna solid untuk mengisi bentuk.

-          Stroke : garis stroke pada bentuk (jika kita pernah bermain dengan corel atau photoshop saya jamin mengerti…. :D)

Disitu ada dua buah modifikasi satu untuk keadaan tidak ada interaksi, kemudian yang kedua saat ada interaksi, artinya jika button di tekan maka ada perubahan. Sampai sini kita sudah selesai melakukan modifikasi pada button.

Sekarang waktunya memodifikasi logo, pertama kita buat resource dulu yaitu bikin xml baru

Buat xml baru di bagian drawable seperti yang sudah kita lakukan di awal, beri nama circle.xml

Isi code berikut

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <corners android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp" android:topLeftRadius="20dp" android:topRightRadius="20dp" /> <stroke android:width="5dp" android:color="#ffffff" > </stroke> </shape

Disini kita langsung menggunakan shape, karena saya hanya butuh membuat sebuah garis lingkaran.
Yup kita cek main layut kita dulu, apakah ada error atau tidak. Jika benar Hasilnya akan seperti gambar dibawah.

Jika ada error atau pertannyaan langsung aja komen,.Selamat Mencoba.