Bekerja dengan EditText di Android

Pendahuluan

EditText adalah cara standar untuk memasukkan teks diaplikasi Android. Jika pengguna diminta untuk memasukkan suatu teks, maka View ini lah yang menjadi sarana utama untuk melakukannya.

Ada banyak properti penting yang dapat kita pakai untuk mengatur EditText. Artikel ini membahas properti-properti paling umum.

Cara Penggunaan

EditText dapat kita tambahkan ke dalam layout dengan kode XML berikut:

<EditText
    android:id="@+id/et_simple"
    android:layout_height="wrap_content"
    android:layout_width="match_parent">
</EditText>

Perlu diketahui EditText memiliki properti yang sama dengan TextView.

Mengambil Teks dari EditText

Mengambil teks yang dimasukkan lewat EditText dapat kita lakukan di Java dengan kode:

EditText simpleEditText = (EditText) findViewById(R.id.et_simple);
String strValue = simpleEditText.getText().toString();

Penyesuaian Input Type

Kita dapat menentukan aturan-aturan khusus untuk mendapatkan masukan dari pengguna dengan mengatur atribut android:inputType. Dengan atribut ini kita bisa meminta informasi nomor telepon, password, angka, dll.

Berikut input type paling umum:

Tipe	Deskripsi
textUri	Teks yang akan dipakai sebagai URI
textEmailAddress	Teks yang akan dipakai sebagai alamat email
textPersonName	Teks yang akan sebagai nama orang
textPassword	Teks yang akan dipakai sebagai password dan dirahasiakan
number	Pengguna hanya dapat memasukkan angka
phone	Untuk memasukkan nomor telepon
date	Untuk mengisi tanggal
time	Untuk mengisi waktu (jam)
textMultiline	Untuk mengisi data teks yang terdiri dari beberapa baris

Kita bisa mengaplikasikan beberapa inputType sekaligus dengan "|".

<EditText
  android:inputType="textCapSentences|textMultiline"
/>

Berikut daftar lengkap inputType.

Penyesuaian Lanjutan

Kita dapat memaksa pengguna hanya memasukkan satu baris teks:

<EditText
  android:maxLines="1"
  android:lines="1"
/>

Kita dapat membatasi jumlah karakter yang dapat dimasukkan dengan atribut digits. Kode berikut akan membatasi pengguna hanya memasukkan "0" atau "1":

<EditText
  android:inputType="number"
  android:digits="01"
/>

JKita dapat mebatasi jumlah karakter dengan:

<EditText
  android:maxLength="5"
/>

Menyesuaikan Warna

Kita dapt menyesuaikan warna background dari teks terpilih di EditText dengan atribut android:textColorHighlight:

<EditText
    android:textColorHighlight="#7cff88"
/>

Kode di atas akan menghasilkan:

Menampilkan Placeholder/Hint

Kita mungkin perlu memberitahu pengguna apa yang harus mereka masukkan:

<EditText
    ...
    android:hint="@string/my_hint">
</EditText>

Mengganti Warna Garis Bawah

Dengan asumsi sudah menggunakan pustaka AppCompat, kita dapat menimpa colorControlNormal, colorControlActivated, dan colorControlHighlight di style.xml:

<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorControlNormal">#d32f2f</item>
    <item name="colorControlActivated">#ff5722</item>
    <item name="colorControlHighlight">#f44336</item>
</style>

Menampilkan Feedback Melayang

EditText akan menghilangkan pesan di hint saat pengguna mulai memasukkan data, pesan error harus ditampilkan secara manual oleh developer.

Sejak Android Marshmallow, TextInputLayout dapat dipakai untuk memberikan sebuah label melayang yang menampilkan hint dan pesan error. Yang perlu kita lakukan adalah membungkus EditText di TextInputLayout:

<android.support.design.widget.TextInputLayout
    android:id="@+id/username_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/etUsername"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:ems="10"
        android:hint="Username" />

</android.support.design.widget.TextInputLayout>

Sekarang pesan hint akan melayang saat EditText mendapatkan fokus seperti pada gambar:

Untuk menampilkan pesan error kita dapat gunakan method setError dan setErrorEnabled.

private void setupFloatingLabelError() {
    final TextInputLayout floatingUsernameLabel = (TextInputLayout) findViewById(R.id.username_text_input_layout);
    floatingUsernameLabel.getEditText().addTextChangedListener(new TextWatcher() {
        // ...
        @Override
        public void onTextChanged(CharSequence text, int start, int count, int after) {
            if (text.length() > 0 && text.length() <= 4) {
                floatingUsernameLabel.setError(getString(R.string.username_required));
                floatingUsernameLabel.setErrorEnabled(true);
            } else {
                floatingUsernameLabel.setErrorEnabled(false);
            }
        }
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, 
                                      int after) {
            // TODO Auto-generated method stub
        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });
}

Menghitung Jumlah Karakter

Sejak versi v23.1 design support library dapat menampilkan jumlah karakter yang dimasukkan ke EditText.

Kita cukup menambahkan atribut app:counterEnabled dan app:counterMaxLength ke TextInputLayout.

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:counterEnabled="true"
    app:counterMaxLength="10"
    app:counterTextAppearance="@style/counterText"
    app:counterOverflowTextAppearance="@style/counterOverride">
    <EditText
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:hint="Username"
       android:layout_centerHorizontal="true"
       android:layout_centerVertical="true"
       android:ems="10"
       android:hint="Username" />
</android.support.design.widget.TextInputLayout>

Menggunakan Tombol Lihat Password

Untuk EditText jenis password, kita mungkin ingin menambahkan fitur lihat password dengan sebuah tombol mata. Fitur ini bisa digunakan dengan atribut passwordToggleEnabled. Ikon mata juga dapat diganti dengan gambar lain lewat passwordToggleDrawable dan warna hint dapat diganti dengan passwordToggleTint.

<android.support.design.widget.TextInputLayout
        android:id="@+id/username_text_input_layout"
        app:passwordToggleEnabled="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/etUsername"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:ems="10"
            android:inputType="textPassword"
            android:hint="Username" />

    </android.support.design.widget.TextInputLayout>

Sumber: Codepath