Membuat Tampilan Aplikasi Android Dengan Lebih Efektif Menggunakan Style

Tampilan atribut aplikasi android seperti TextView, EditText dan Button dengan lebih efektif, mudah dan dapat digunakan kembali.

Introduction

Style adalah kumpulan atribut yang menentukan tampilan untuk View tunggal. Style dapat menentukan atribut seperti warna font, ukuran font, warna background, dan banyak lagi.

Style menentukan atribut untuk jenis tampilan tertentu. Misalnya, satu style dapat menentukan atribut tombol. Setiap atribut yang Anda tentukan dalam style adalah atribut yang dapat disetel dalam file tata letak. Dengan mengekstrak semua atribut ke suatu style, mudah untuk digunakan dan memeliharanya di beberapa widget.

Dengan menerapkan style menjadikan kode lebih ringkas dan fleksibel ketika ada perubahan.

Contoh Project

Agar lebih mudah dalam mempelajari tentang style kita perlu membuat sebuah contoh desain. Sebagai contoh kita membuat sebuah tampilan aplikasi untuk memudahkan pengguna dalam mencari tempat tinggal yang nyaman.

Membuat TextView

Textview adalah atribut yang berfungsi untuk menampilkan output berupa text. Dalam tutorial ini menggunakan font, untuk tutorial cara memasukkan font silahkan ikut tutorial disini.

Berikut langkah membuat TextView :

Membuat Style Untuk TextView

Untuk membuat style yang baru, buka file res/values/styles.xml project Anda. Untuk setiap style yang ingin Anda buat, ikuti langkah-langkah berikut:

1. Tambahkan elemen <style> dengan nama yang mengidentifikasi style secara unik sebagai contoh “textBody4”.
2. Tambahkan elemen <item> untuk setiap atribut style yang ingin Anda tetapkan.name di setiap item menentukan atribut yang biasanya digunakan sebagai atribut XML dalam tata letak Anda. Nilai dalam elemen <item> adalah nilai untuk atribut tersebut.

Berikut source code contoh untuk membuat style TextView:

Menerapkan Style TextView

Anda dapat menerapkan style ke atribut TextView dengan cara menambahkan style=”@style/textH1” kedalam TextView. Tampilan Atribut yang memiliki style akan mewarisi tampilan item yang sudah diatur sebelumnya.

Berikut source code contoh penerapan style di TextView:

Membuat EditText

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

Berikut contoh membuat EditText :

Membuat Style Untuk EditText

Untuk membuat style yang baru, buka file res/values/styles.xml project Anda. Untuk setiap style yang ingin Anda buat, ikuti langkah-langkah berikut:

1. Tambahkan elemen <style> dengan nama yang mengidentifikasi style secara unik sebagai contoh “editTextPrimary”.
2. Tambahkan elemen <item> untuk setiap atribut style yang ingin Anda tetapkan.name di setiap item menentukan atribut yang biasanya digunakan sebagai atribut XML dalam tata letak Anda. Nilai dalam elemen <item> adalah nilai untuk atribut tersebut.

Berikut source code contoh untuk membuat style EditText:

Menerapkan Style EditText

Anda dapat menerapkan style ke atribut EditText dengan cara menambahkan style=”@style/editTextPrimary” kedalam EditText. Tampilan Atribut yang memiliki style akan mewarisi tampilan item yang sudah diatur sebelumnya.

Berikut source code contoh penerapan style di EditText:

Membuat Button

Button adalah atribut yang berfungsi sebagai tombol untuk melakukan aksi saat pengguna mengklik.

Berikut source code contoh membuat Button :

Membuat Style Untuk Button

Untuk membuat style yang baru, buka file res/values/styles.xml project Anda. Untuk setiap style yang ingin Anda buat, ikuti langkah-langkah berikut:

1. Tambahkan elemen <style> dengan nama yang mengidentifikasi style secara unik sebagai contoh “btnPrimary”.
2. Tambahkan elemen <item> untuk setiap atribut style yang ingin Anda tetapkan.name di setiap item menentukan atribut yang biasanya digunakan sebagai atribut XML dalam tata letak Anda. Nilai dalam elemen <item> adalah nilai untuk atribut tersebut.

Berikut source code contoh untuk membuat style Button:

Menerapkan Style Button

Anda dapat menerapkan style ke atribut Button dengan cara menambahkan style=”@style/btnPrimary” kedalam Button. Tampilan Atribut yang memiliki style akan mewarisi tampilan item yang sudah diatur sebelumnya.

Berikut source code contoh penerapan style di Button:

Terima kasih sudah membaca, beritahu saya jika memiliki pertanyaan dengan komentar dibawah.