Tutorial Android Text Input Layout

Android TextInputLayout memungkinkan untuk menampilkan petunjuk sebagai label mengambang untuk bidang EditText ketika mendapat fokus.

Android TextInputLayout adalah tata letak dan dapat berisi widget EditText atau turunannya seperti AppCompatEditText, AutoCompleteTextView, EmojiEditText, ExtractEditText, GuidedActionEditText, dan SearchEditText.

TextInputLayout menunjukkan petunjuk anak sebagai label ketika petunjuk disembunyikan. Selain dukungan untuk label, TextInputLayout juga mendukung menampilkan pesan kesalahan, kata sandi keterlacakan toggling untuk bidang kata sandi, dan penghitung karakter.

Ketergantungan TextInputLayout

Untuk menggunakan TextInputLayout dalam aplikasi Anda, Anda harus terlebih dahulu menambahkan ketergantungan pada proyek Anda seperti yang ditunjukkan di bawah ini. TextInputLayout adalah bagian dari pustaka desain android.

 dependencies {
    . . .
    implementation 'com.android.support:design:26.1.0'
} 

TextInputEditText dengan TextInputLayout

TextInputEditText adalah subkelas dari EditText. Ini telah dibuat untuk digunakan dengan TextInpputLayout sehingga tata letak dapat mengontrol gaya bidang input.

Contoh TextInputLayout TextInputEditText

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android.support.design="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="zoftino.com.uicontrols.MainActivity">
    <android.support.design.widget.TextInputLayout
        android:id="@+id/name_til"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <android.support.design.widget.TextInputEditText
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Name" />
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/password_til"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android.support.design:passwordToggleEnabled="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/name_til">
        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPassword" />
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/address_til"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android.support.design:counterEnabled="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/password_til">
        <android.support.design.widget.TextInputEditText
            android:id="@+id/address"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Address" />
    </android.support.design.widget.TextInputLayout>
    <Button
        android:id="@+id/submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:text="Submit"
        android:onClick="submitForm"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/address_til" />
</android.support.constraint.ConstraintLayout>

Gaya Materi TextInputLayout

Di bawah layar adalah output dari tata letak di atas ketika tema aplikasi diatur ke salah satu tema materi aplikasi ringkas. Gambar-gambar menunjukkan petunjuk ketika TextInputEditText tidak fokus dan label ketika TextInputEditText foucused dan setelah nilai telah dimasukkan.

Kesalahan TextInputLayout

TextInputLayout mendukung pesan kesalahan. Dengan menggunakan fitur ini, Anda dapat memberi tahu pengguna tentang masukan yang salah untuk mengedit bidang teks dengan mengatur pesan kesalahan pada TextInputLayout dan tampilan di UI.

Ketika kesalahan perlu ditampilkan untuk EditText tertentu, Anda perlu mendapatkan objek induk TextInputLayout dan memanggil metode setError di atasnya menyampaikan pesan kesalahan sebagai argumen untuk itu.

Kesalahan set TextInputLayout

 TextInputLayout til = (TextInputLayout) findViewById(R.id.address_til);
TextInputEditText tiet = (TextInputEditText) findViewById(R.id.address);
   if(tiet.getText().toString().isEmpty()){
    til.setError("Please enter valid address.");
}else{
    til.setError(null);
} 

TextInputLayout menghapus kesalahan

Setelah pesan kesalahan diatur pada objek TextInputLayout, itu tetap sampai dihapus. Untuk menghapus atau menghapus pesan kesalahan TextInputLayout, Anda perlu memanggil metode setError lewat pesan null atau kosong, dalam kondisi kode di atas lain menghilangkan pesan kesalahan.

Keluaran kesalahan TextInputLayout

Konter Karakter Android TextInputLayout

TextInputLayout mendukung fitur counter dengan mana ia dapat menampilkan sejumlah karakter yang dimasukkan ke dalam kolom input. Untuk mengaktifkan penghitung, Anda perlu memanggil metode setCounterEnabled dengan mengirimkan nilai boolean yang benar ke dalam kode atau menyetel atribut xml counterEnabled.

Catatan, untuk menggunakan atribut TextInputLayout dalam tata letak xml, Anda perlu menentukan ruang nama untuk android.support.design dengan menyetelnya ke url skema res-auto Android seperti yang ditunjukkan di bawah ini.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android.support.design="http://schemas.android.com/apk/res-auto"
   
    . . .
    <android.support.design.widget.TextInputLayout

        android.support.design:counterEnabled="true">
	. . .
    </android.support.design.widget.TextInputLayout>
</android.support.constraint.ConstraintLayout> 

Output counter karakter TextInputLayout

Android TextInputLayout Password Visibility Beralih

TextInputLayout mendukung fitur pengalih visibilitas kata sandi dengan mana pengguna dapat mengalihkan keterlihatan kata sandi. Fitur ini berlaku untuk bidang EditText kata sandi. Untuk mengaktifkan sakelar pengaktifan kata sandi, Anda perlu memanggil metode setPasswordVisibilityToggleEnabled meneruskan nilai boolean yang benar ke dalam kode atau menyetel atribut xml sandiToggleEnabled.

Pengguna dapat mengeklik tombol pengalih visibilitas kata sandi untuk melihat kata sandi dalam teks biasa atau formulir terselubung.

Anda dapat menyesuaikan tombol pengalih visibilitas kata sandi dengan menyetel atribut setPasswordVisibilityToggleDrawable ke gambar kustom Anda.

TextInputLayout Custom Material Style

Anda dapat menentukan gaya materi kustom dan mengubah warna petunjuk dan mengedit teks menggarisbawahi warna dengan mengatur colorControlActivated, warna counter dengan mengatur textColorSecondary, warna pesan kesalahan dengan mengatur colorControlNormal dan kata kunci tombol visibilitas kata sandi dengan mengatur colorForeground.

<style name="MyAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorControlActivated">#e91e63</item>
    <item name="android:colorForeground">#33691e</item>
    <item name="colorControlNormal">#f57f17</item>
    <item name="android:textColorSecondary">#673ab7</item>
</style>
 

Keep Coding ~

Share this post