Beranda / Android / Android Material Design 2 : Floating Label pada EditText Tutorial

Android Material Design 2 : Floating Label pada EditText Tutorial

EditText umumnya digunakan untuk mengambil input teks dari pengguna. EditText merupakan salah satu widget UI dasar pada Android. Dalam Material Design terdapat konsep baru yaitu Floating Label pada EditText. Pada EditText awalnya menunjukkan label sebagai petunjuk/hints, ketika pengguna mengetikan teks dalam EditText, label berasal dari hints sedikit bergerak ke atas EditText sebagai Floating Label. Project berikut adalah tutorial cara menggunakannya dengan memanfaatkan TextInputLayout. Biar cepet ngerti ayo kita praktek saja.

Screen Shot 2016-03-16 at 3.19.05 PM

Screen Shot 2016-03-14 at 9.39.07 PM

Screen Shot 2016-03-14 at 9.39.42 PM

Screen Shot 2016-03-14 at 9.39.51 PM

Step 1 ) File build.gradle

Pastikan dependecies include libaray berikut.

Edit string.xml yang berada pada res => values => strings.xml seperti berikut.

Step 3) Edit dimens.xml .

Tambahkan nilai dimensi berikut pada file dimens.xml yang berada pada res => values => dimens.xml

Step 4) Edit activity_main.xml .

Edit activity_main.xml yang berada pada res => layout => activity_main.xml seperti kode dibawah ini. Kode ini akan membuat 4 Fields untuk ilustrasi form pendaftaran, fields meliputi Nama Lengkap , Email , Umur and Password dengan Button Daftar .

Buat class dan beri nama  ValidationHelper.java and add below code in it . The code will create validation methods for input field . Validation to check empty input and valid email .

Step 6) Edit MainActivity.java.

Sekarang buka MainActivity.java dan ubah koding sesuai dibawah ini. Dalam kode tersebut saya menambahkan kode untuk validasi input pada Nama Lengkap,Email,Umur and Password menggunakan ValidationHelper.java yang telah kita buat pada step 5.

device-2016-03-16-155604   device-2016-03-16-155632   device-2016-03-16-155722

Download View Github

Tentang gookkis

Cuma tukang ketik di Gookkis.com, semoga tulisan jelek ini bermanfaat.

Baca Juga

Android Programing – Migrasi ke Kotlin

Kotlin akhir — akhir ini sangat banyak di bicarakan oleh developer android, banyak yang bilang juga kotlin …

Android Studio – Gak lagi make “findViewById”

Halo salam pokoknya ngoding,,,, Eh lama Gookkis Studi lama ga update nih yah, maklum lagi …

Satu komentar

  1. pada step ke 3 edit dimens.xml, file tersebut tidak bisa saya edit, moon pencerahannya

    thanks

Leave a Reply

Your email address will not be published. Required fields are marked *