Belajar Membuat TextInputLayout di Android Material Design

Last Updated on 9 years by Mas Herdi

Jika kalian pernah membuat aplikasi Android, kalian pasti sudah akrab dengan yang namanya EditText. Sebuah view yang biasa digunakan untuk menginputkan suatu text di Android. EditText biasanya mempunyai hint, yaitu sebuah text yang ada di dalam EditText yang berfungsi untuk memberitahu pengguna apa yang harus diinputkan pada EditText tersebut. Ketika kita mulai mengketikkan sesuatu pada EditText, maka hint tersebut akan menghilang. Dan kadang di tengah jalan kita menjadi lupa, apa yang seharusnya kita ketikkan, karena kita tidak bisa lagi melihat hint yang telah hilang tersebut.

Walaupun begitu, dengan view-wrapper bernama TextInputLayout, hint yang ada di dalam EditText tidak akan menghilang ketika kita menginputkan sesuatu ke dalam EditText, melainkan akan terbang dan berpindah ke bagian atas EditText. Text Input Layout adalah bagian dari Android Design Support Library.

Membuat TextInputLayout di Android

Sebelum mulai membuat TextInputLayout di Android, ada baiknya kalian membaca beberapa pre-requisites di bawah ini :

• Membuat Aplikasi Hello World Menggunakan Android Studio
• Tutorial Membuat FloatingActionButton di Android

Oke, setelah membuat project baru, pertama-tama untuk membuat TextInputLayout kalian harus mengimport dependencies berikut ke file build.gradle pada project Android Studio kalian.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:support-v4:22.2.0'
}

Setelah itu, kalian tinggal menambahkan TextInputLayout pada file xml layout dari activity kalian. TextInputLayout nantinya akan membungkus EditText (sebagai wrapper), dan untuk menggunakan TextInputLayout ini atribut hint pada EditText kalian tidak boleh kosong (harus ada hint).

Contoh penempatan TextInputLayout pada xml adalah seperti di bawah ini :

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin" >

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/textDialog"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="Nama Depan"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/til">

        <EditText
            android:id="@+id/textDialog2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="Nama Belakang"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/til2">

        <EditText
            android:id="@+id/textDialog3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="Pekerjaan"/>
    </android.support.design.widget.TextInputLayout>

</RelativeLayout>

Jika sudah, ketika dijalankan akan nampak EditText yang mempunyai next level hint berkat TextInputLayout seperti demo di bawah.

Demo

Ketika kita mulai mengetikkan sesuatu pada EditText, maka hint akan berpindah ke bagian atas

TextInputLayout Android | (c) jeffach.deviantart.com

Apabila EditText sudah berisi suatu text, hint akan tetap stay di atas :

Android TextInputLayout | (c) Snow White by Jeff Chapman jeffach.deviantart.com

Source code ada di GitHub saya, jangan lupa untuk follow dan star projectnya ya 😀 Bagi yang kurang jelas silahkan tanya di bagian komentar.

Gambar didapat dari Jeff Chapman, jeffach.deviantart.com, seorang talented artis yang membuat amazing art dari stock photos.