Kata Hati: Belajar Membuat TextInputLayout di Android Material Design

Minggu, 08 April 2018

Belajar Membuat TextInputLayout di Android Material Design

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 :

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 hintpada 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>