Hai guys, kali ini kita akan belajar bagaimana membuat tampilan EditText kita menjadi lebih indah menggunakan design support library yaitu menggunakan elemen TextInputLayout. Hasilnya seperti ini.
Dalam tips ini menggunakan asset berupa icon. Jika kamu ingin tahu cara mudah import icon di Android Studio kamu dapat menuju ke tips Cara Mudah Import Icon di Android Studio.
💻 Mulai Belajar Pemrograman
Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.
Daftar SekarangLangkah – langkah:
Di Android Studio, buat project baru File => New Project. Buka gradle module dan tambahkan design support library di bagian dependency seperti dibawah ini.
|
1 2 3 4 |
dependencies { compile 'com.android.support:appcompat-v7:25.1.0' compile 'com.android.support:design:25.1.0' } |
Buka layout layout Main Activity kalian (Activity_Main.xml) dan tambahkan kode dibawah ini kedalam layout tersebut. Di code ini dapat kamu lihat perbedaannya dengan menggunakan EdditText biasa adalah EdditText pada code ini di wrap dengan elemen TextInputLayout.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<?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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:orientation="vertical" tools:context="com.dicoding.edittextmaterial.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="10dp" android:layout_marginTop="30dp" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_face_black_24dp"/> <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <android.support.design.widget.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Nama" android:inputType="textPersonName" android:padding="16dp" android:singleLine="true"/> </android.support.design.widget.TextInputLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="10dp" android:layout_marginTop="30dp" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_date_range_black_24dp"/> <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <android.support.design.widget.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Tanggal lahir" android:padding="16dp" android:singleLine="true"/> </android.support.design.widget.TextInputLayout> </LinearLayout> </LinearLayout> |
Selesai. Sekarang coba kamu Run dan lihat hasilnya.
Voilla! Mudah bukan?
Semoga bermanfaat ya, learners. Ingin belajar lebih banyak? Yuk langsung cek Dicoding Academy Belajar Membangun Aplikasi Android Native (www.dicoding.com/academies/26), materi yang dibuat oleh Google Developer Expert Indonesia.
Tunggu tips kami selanjutnya !
