Friday, 15 July 2016

Membuat Desain Form Register, Validasi dan Re-type Password di Android

Disebagian besar aplikasi saat ini, baik itu Web, Desktop ataupun Mobile pasti memiliki form Register. Form register digunakan untuk membuat account baru agar si user dapat dengan mudah mengakses segala fitur yang dipunyai aplikasi (kalian pasti sudah taulah, ini cuma basa basi haha)


Namun bukan itu yang akan saya bahas, yang akan saya bahas adalah bagaimana membuat desain form register di Android. Seperti yang kalian
lihat sekarang ini di Android ada semacam tulisan di EditText yang naik turun ketika kalian akan mengisi formnya.

Ya itu adalah salah satu material design dari Android sendiri. Selain desain yang bagus, dalam satu form pengisian haruslah ada sebuah validasi, seperti contoh pada register harus ada validasi Email, Validasi Password dan Retype password.

Untuk itu, mari kita bahas satu persatu

A. TAMPILAN DESAIN FORM


Pertama - tama kalian harus memasang library desain support di build.gradle (Apps)   Apa fungsi dari library diatas, sebenarnya ada beberapa, tapi yang akan saya bahas disini fungsinya untuk menampilkan di EditText yang naik turun ketika kita akan mengisi EditText.

EDIT TEXT


Cara penggunaannya seperti ini :

Perhatikan android.support.design.widget.TextInputLayout, itu datangnya dari library yang kita compile sebelumnya, inilah yang akan membuat tampilan EditText menjadi kekinian.

Perhatikan atribut android:drawableLeft pada layout diatas, itu fugsinya untuk menampilkan image disebelah kiri didalam EditText. Biasanya kan ada gambar gembok pada field input password, nah di android ya seperti ini caranya, tinggal diganti left jadi right, sesuai keinginan saja. 

BUTTON


Selain tampilan EditText yang bagus, kalian juga harus seimbangkan dengan button yang bagus juga, setidaknya ada effek effect tertentu. disini saya akan bahas button dengan effect seperti ditekan (state pressed). Pertama kita buat dulu file xml yang akan menghandle bagaimana tampilan jika button di tekan dan bagaimana jika tidak di tekan. Buat file xml di res/drawable, beri nama state_pressed_button.xml, kodenya dibawah ini :

Pada kodingan diatas, terlihat ada atribut yang bernama android:state_pressed dan android:state_focus. State_pressed akan menghandle ketikan button ditekan akan seperti apa. State_focus akan menghandle ketika button diam tidak ditekan akan seperti apa tampilannya. Pehatikan juga atribut android:drawable, disinilah kalian tempatkan warna-warna sesuai keinginan

Cara penggunanaanya kalian tinggal tambahkan attribut android:background dibutton, seperti berikut ini :

Kode Lengkap untuk layout Register bisa lihat dibawah ini :

B. VALIDATION TIAP FIELD


Validasi diperlukan agar data yang masuk benar dan user tidak sembarangan dalam menginput data atau bisa juga sebagai reminding user apabila lupa terhadap sesuatu. Beberapa validasi yang akan saya tampilkan disini adalah Validasi Email, Validasi EditText Kosing, Validasi Password dan Re-type Password


VALIDASI EMAIL


Kita tidak perlu menggunakan regex secara manual, karena sudah disediakan cara untuk memvalidasi inputan email. Caranya seperti berikut ini :

VALIDASI EDITTEXT KOSONG


Validasi EditText kosong menandakan bahwa field tersebut wajib di isi oleh user, tidak boleh dikosongkan. Cara seperti berikut ini :

VALIDASI PASSWORD DAN RE-TYPE PASSWORD


Kadang kita juga melihat ketika melakukan register, kita diminta untuk memasukan kembali password kita. Ya fungsinya untuk memastikan bahwa password yang di input tersebut benar, sebelum dikirim oleh sistem. Caranya seperti berikut ini :


Lalu bagaimana cara menggunakan semua validasi tersebut? Mudah saja, kalian tinggal mainkan logic condition IF ELSE, bisa kalian lihat seperti dibawah ini :

Nah itulah beberapa hal yang kita perlukan saat membuat sebuat form register. Kalian bisa menambahkan dengan tampilan ataupun validasi lainnya. Tidak mutlak seperti yang saya buat. full kodingnya bisa kalian lihat dibawah ini :

1 komentar so far

Keren Gan, thanks infonya

Please post a polite comment and do not post a spam
EmoticonEmoticon