Breaking News
Home / 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

About gookkis

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

Baca Juga

Ahmad Rosid – Cara Mengatasi Custom Request Dengan Retrofit

Kadang kala dalam urusan dengan API kita akan mendapati request yang tidak biasa kita jumpai …

One comment

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

    thanks

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: