Belajar Cara Membuat TextInputLayout Android Material Design
Assalamualaikum Warahmatullahi Wabarakatuh.
Bagi kalian para developer, pastinya sudah tidak asing lagi dengan namanya EditText, yaitu sebuah view yang digunakan untuk menginputkan data berupa text, angka serta simbol lainnya.
Saat kita membuat sebuah EditText pada project aplikasi, biasanya kita memasang sebuah hint untuk memberitahu pengguna apa yang harus di inputkan, text tersebut berada didalam EditText, permasalahannya yaitu saat kita menginputkan suatu data berupa text ataupun angka, hint tersebut akan langsung menghilang, jika data yang harus di inputkan terlalu panjang, terkadang kita lupa data apa yang harus di inputkan tersebut, karena hint pada EditTextnya sudah mengilang.
Solusinya dengan menggunakan TextInputLayout, hint yang ada di dalam EditText tidak akan menghilang ketika user menginputkan data ke dalam EditText, melainkan akan berpindah ke bagian atas EditText.
Baca Juga:
3) Terakhir kalian jalankan project tersebut, maka lihat hasilnya, saat user ingin menginputkan data pada salah satu EditText, hint yang berada didalam EditText tersebut, secara otomatis akan berpindah keatas.
Semoga tutorial yang saya berikan bisa bermanfaat bagi kalian, jika ada yang ingin ditanyakan silakan isi komentar di bagian bawah.
Wassalamualaikum Warahmatullahi Wabarakatuh.
Bagi kalian para developer, pastinya sudah tidak asing lagi dengan namanya EditText, yaitu sebuah view yang digunakan untuk menginputkan data berupa text, angka serta simbol lainnya.
Saat kita membuat sebuah EditText pada project aplikasi, biasanya kita memasang sebuah hint untuk memberitahu pengguna apa yang harus di inputkan, text tersebut berada didalam EditText, permasalahannya yaitu saat kita menginputkan suatu data berupa text ataupun angka, hint tersebut akan langsung menghilang, jika data yang harus di inputkan terlalu panjang, terkadang kita lupa data apa yang harus di inputkan tersebut, karena hint pada EditTextnya sudah mengilang.
Tutorial Membuat TextInputLayout Material Design
1) Setelah kalian Membuat Project Baru pada Android Studio, buka file build.gradle (pada direktori app), lalu masukan dependencies berikut ini:
compile 'com.android.support:appcompat-v7:26.1.0'
compile 'com.android.support:support-v4:26.1.0'
compile 'com.android.support:design:26.1.0'
2) Selanjutnya buat dan buka activity_main.xml kalian, pada activity tersebut kita akan mengunakan TextInputLayout sebagai pembungkus dari EditText, pada contoh berikut ini, kita menggnakan 3 buah EditText, ketiga EditText tersebut di bungkus dengan view-wrapper TextInputLayout, serta jangan lupa untuk menambahkan hint pada masing masing EditText.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_margin="15dp"
android:orientation="vertical"
tools:context="android.cianjur.developer.net.materialdesignexample.MainActivity">
<android.support.design.widget.TextInputLayout
android:id="@+id/Layoutinput1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/input1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Masukan Nama" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/Layoutinput2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/input2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Alamat" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/Layoutinput3"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/input3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Pekerjaan" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
Baca Juga:
3) Terakhir kalian jalankan project tersebut, maka lihat hasilnya, saat user ingin menginputkan data pada salah satu EditText, hint yang berada didalam EditText tersebut, secara otomatis akan berpindah keatas.
Semoga tutorial yang saya berikan bisa bermanfaat bagi kalian, jika ada yang ingin ditanyakan silakan isi komentar di bagian bawah.
Wassalamualaikum Warahmatullahi Wabarakatuh.
