STYLES & THEMES. Farah Zakiyah Rahmanti, M.T. Diperbarui Universitas Dian Nuswantoro

Transkripsi

1 STYLES & THEMES Farah Zakiyah Rahmanti, M.T Diperbarui 2016

2 Overview Style Mendefinisikan Style Pewarisan Theme Menerapkan Style & Theme pada UI

3 Style (1) Style adalah sekumpulan properti yang menentukan tampilan dan format untuk view/window. Style dapat menspesifikasikan properti-properti seperti height, padding, font color, font size, background color, dll. Style didefinisikan dalam resource XML yang terpisah dengan XML layout. Style di dalam Android memliki filosofi yang serupa dengan cascading style sheets (CSS) pada desain web memperbolehkan untuk memisahkan desain dari konten.

4 Style (2) Contoh menggunakan style : pada layout XML Ubahlah menjadi seperti ini :

5 Style (3) Semua atribut yang berhubungan dengan style telah dihapus dari layout XML dan dimasukkan ke dalam definisi style yang disebut CodeFont, kemudian diterapkan dengan atribut style.

6 Mendefinisikan Style (1) Untuk membuat style, simpanlah file XML pada direktori proyekmu di res/values/. Penamaan file-nya terserah, yang pasti harus dengan format.xml dan tersimpan pada folder res/values. Root node-nya harus di dalamnya <resource>.

7 Mendefinisikan Style (2) Untuk setiap style yang mau dibuat, tambahkan elemen <style> pada file dengan nama yang unik sehingga dapat mengidentifikasi style tersebut. (bila atribut ini diperlukan). Kemudian tambahkan elemen <item> pada setiap properti style, dengan nama yang menyatakan properti style dan nilai di dalamnya. (bila atribut ini diperlukan). Nilai untuk <item> dapat menjadi string kata kunci, warna, referensi untuk tipe resource lain, atau nilai lainnya tergantung pada properti style.

8 Mendefinisikan Style (3) Contoh mendefinisikan single style :

9 Mendefinisikan Style (4) Setiap child dari elemen <resource> diubah menjadi application resource object pada saat kompilasi, yang dapat direferensikan nilai dalam atribut nama elemen <style>. Contoh style dapat direferensikan dari XML layout (sesuai contoh sebelumnya). Atribut parent dalam elemen <style> merupakan pilihan/opsional dan menentukan resource ID dari style lain yang mana style tersebut harus mewarisi propertipropertinya. Kemudian dapat menimpa properti style pewarisan sesuai yang diinginkan.

10 Pewarisan / Inheritance (1) Atribut parent dalam elemen <style> memungkinkan Anda menentukan style dari properti pewarisan style. Anda dapat menggunakannya untuk mewarisi properti dari style yang sudah ada dan kemudian menentukan properti yang diinginkan untuk diubah/ditambahkan. Anda dapat mewarisi dari style yang sudah Anda buat sendiri atau dari style yang di-build ke platform.

11 Pewarisan / Inheritance (2) Contohnya, Anda dapat mewarisi Android platform's default text dan memodifikasinya : Jika Anda ingin mewarisi style yang sudah Anda buat, Anda tidak harus menggunakan atribut parent. Sebaliknya, hanya awalan/prefix nama style yang ingin mewarisi nama style baru, dipisahkan oleh titik. Contohnya, untuk membuat style baru yang mewarisi style CodeFont, tetapi merubah warnanya menjadi merah.

12 Pewarisan / Inheritance (3) Perhatikan bahwa tidak ada atribut parent dalam tag <style>, tetapi karena atribut nama dimulai dengan nama style CodeFont (style yang Anda buat), style ini mewarisi semua properti style dari style tersebut. Style ini menimpa properti android:textcolor dan merubahnya menjadi warna merah. Anda dapat memberikan nama style baru

13 Pewarisan / Inheritance (4) Contoh lainnya, style CodeFont.Red dibuat agar ukuran tulisannya menjadi lebih besar dengan cara :

14 Properti Style (1) Ada banyak sekali properti style, dari contohcontoh sebelumnya seperti layout_width dan textcolor. Atribut android:inputtype diletakkan di dalam elemen <EditText>.

15 Style Properties (2)

16 Theme (1) Theme merupakan sebuah style yang diterapkan pada seluruh activity atau aplikasi. Ketika sebuah style diterapkan sebagai theme, maka setiap tampilan yang ada dalam activity atau aplikasi akan menerapkan setiap properti style. Contohnya, menerapkan style CodeFont yang sama sebagai theme untuk setiap activity, dimana nantinya semua activity akan memiliki green monospace font.

17 Theme (2) Theme adalah mekanisme android untuk menerapkan style yang konsisten pada activity atau aplikasi. Style menerapkan properti visual elemen yang membentuk UI, seperti color, height, padding, dan font size. Android menyediakan dua theme sistem yang bisa dipilih : Holo Light Holo Dark

18 Theme (3)

19 Theme (4) It would go in an XML file under res/values (typically res/values/styles.xml) To have this theme use the newer holographic theme when the application is running on Android 3.0 (API Level 11) or higher, you can place an alternative declaration for the theme in an XML file in res/values-v11, but make the parent theme the holographic theme.

20 Menerapkan Style dan Theme pada UI (1) Terdapat dua cara untuk menerapkan style : Individual View; dengan menambahkan atribut style pada elemen View pada XML layout. Untuk seluruh activity atau aplikasi dengan menambahkan atribut android:theme ke dalam elemen <activity> atau <application> di dalam Android manifest.

21 Menerapkan Style dan Theme pada UI (2) Ketika menerapkan style ke dalam single View layout, properti didefinisikan oleh style hanya diterapkan untuk View tersebut. Jika style diterapkan padaviewgroup, child dari elemen View tidak akan mewarisi properti style. Hanya elemen yang secara langsung menerapkan style tersebut yang mewarisi properti-propertinya. Namun, style dapat diterapkan pada semua elemen View, dengan menerapkan style tersebut sebagai theme.

22 Referensi