User interface & XML Layout
Oleh : Farah Zakiyah Rahmanti, M.T Diperbarui 2017
[email protected] / Universitas Dian Nuswantoro
Overview
View Class
UI Component
XML Layout
UI Hierarchy
Layout
Linear Layout
Relative Layout
Grid View
List View
[email protected] / Universitas Dian Nuswantoro
View Class
Menempati area persegi/rectangular pada layar.
Bertanggung jawab penanganan event.
Base class untuk semua widgets, seperti button, text field,check box, dll.
ViewGroup subclass merupakan base class untuk layout.
untuk
[email protected] / Universitas Dian Nuswantoro
menggambar
dan
Menggunakan Views
Semua views dalam jendela tersusun atas hierarki pohon.
Terdapat beberapa tipe operasi yang biasa dilakukan :
Set properties : contohnya melakukan seting text dari sebuah TextView.
Properti yang biasa dikenali pada saat build dapat di set ke file XML layout.
Set focus : Framework akan ditangani moving focus dalam menangani input user.
untuk melakukan force focus terhadap view tertentu, maka dapat memanggil requestFocus().
Set up listeners : View mengizinkan client untuk set listener dimana akan diberikan notifikasi ketika sesuatu terjadi.
Contohnya ketika sebuah button diklik, kemudian diberikan sebuah notifikasi bahwa button tersebut sudah diklik.
Set visibility : Kita dapat menyembunyikan atau memperlihatkan views yakni dengan menggunakan setVisibility(int).
[email protected] / Universitas Dian Nuswantoro
UI Component (1) ~ Widgets Date Picker
[email protected] / Universitas Dian Nuswantoro
Form Control : Image Button Text Fields Check Box Radio Button
UI Component (2) ~ Widgets AutoCompleteTextView ListView
[email protected] / Universitas Dian Nuswantoro
UI Component (3) ~ Layouts
[email protected] / Universitas Dian Nuswantoro
XML Layout
XML based format.
Spesifikasi dari berbagai komponen UI dan memiliki hubungan antara satu dengan yang lainnya dan terhadap container-nya.
Berada pada folder resource atau res.
Terletak di dalam android project, res/layout.
[email protected] / Universitas Dian Nuswantoro
XML Layout
[email protected] / Universitas Dian Nuswantoro
XML Layout
[email protected] / Universitas Dian Nuswantoro
XML Layout
Setiap file XML terdiri atas tree of elements yang menspesifikasikan sebuah layout dari widget dan container-nya yang membentuk sebuah View.
Atribut-atribut dari XML element adalah properti.
Contohnya :
Jika sebuah elemen Button memiliki nilai atribut dari android:textStyle = "bold"
artinya bahwa text yang muncul di button harus diberikan dalam gaya huruf tebal.
[email protected] / Universitas Dian Nuswantoro
[email protected] / Universitas Dian Nuswantoro
XML Layout Definition
Root element butuh mendeklarasikan Android XML namespace :
xmlns:android=http://schemas.android.com/apk/res/android
Karena akan mereferensikan button tersebut ke dalam code java, maka perlu memberikan nama id pada atribut android:id.
[email protected] / Universitas Dian Nuswantoro
XML Layout Definition
android:text
Menginisialisasi text yang ditampilkan pada button face, dalam hal ini string kosong.
android:layout_width dan layout_height
mendefinisikan width dan height dari sebuah button dengan fill parent container, dalam hal ini entire screen
[email protected] / Universitas Dian Nuswantoro
UI Hierarchy
[email protected] / Universitas Dian Nuswantoro
HierarchyViewer menampilkan semua elemen UI pada layar.
Caption teratas adalah TextView, berada pada FrameLayout-nya.
Sama halnya dengan button berada pada FrameLayout-nya.
FrameLayout merupakan bagian dari LinearLayout yang mana me-render semua elemen dari PhoneWindowView
Android Layout
The most common way to define your layout and express the view hierarchy is with an XML layout file.
XML offers a human-readable structure for the layout, much like HTML.
Each element in XML is either a View or ViewGroup object
[email protected] / Universitas Dian Nuswantoro
Menampilkan Application’s View
Android UI framework menggambar layar dengan cara menjalankan View tree dengan meminta setiap komponen menggambar dirinya sendiri dalam pre-order traversal way.
Dengan kata lain, setiap komponen menggambar dirinya sendiri kemudian bertanya kepada setiap anaknya untuk melakukan hal yang sama.
[email protected] / Universitas Dian Nuswantoro
[email protected] / Universitas Dian Nuswantoro
Display UI Hierarchy
[email protected] / Universitas Dian Nuswantoro
Layout Frame, Linear, Relative, List View, Grid View
[email protected] / Universitas Dian Nuswantoro
Frame Layout
Tipe layout objek yang paling seederhana.
Contohnya :
Pada dasarnya blank space on screen yang kemudian dapat diisi dengan single object. Seperti sebuah gambar yang dapat di-swap in dan swap out.
[email protected] / Universitas Dian Nuswantoro
Linear Layout
Layout yang menampilkan semua anaknya dalam satu arah.
Bisa vertikal saja atau horizontal saja.
[email protected] / Universitas Dian Nuswantoro
[email protected] / Universitas Dian Nuswantoro
Contoh Linear Layout
[email protected] / Universitas Dian Nuswantoro
Relative Layout
Layout yang menampilkan semua anaknya (child) dalam posisi relatif.
Bisa relatif terhadap saudaranya (sibling), bisa juga relatif terhadap orangtuanya (parent).
[email protected] / Universitas Dian Nuswantoro
Contoh Relative Layout
[email protected] / Universitas Dian Nuswantoro
Contoh Relative Layout
[email protected] / Universitas Dian Nuswantoro
List View Layout
Menampilkan semua list item ke bawah, sehingga bisa di scroll.
List item otomatis dimasukkan ke dalam list menggunakan Adapter.
[email protected] / Universitas Dian Nuswantoro
Contoh List View
[email protected] / Universitas Dian Nuswantoro
Grid View Layout
Menampilkan item-item dalam dua dimensi (terdiri dari baris dan kolom).
Gridnya dapat di-scroll ke bawah/ke atas.
Grid item biasanya otomatis dimasukkan ke dalam layout menggunakan ListAdapter.
[email protected] / Universitas Dian Nuswantoro
Contoh Grid View
[email protected] / Universitas Dian Nuswantoro
Daftar Pustaka
http://developer.android.com/reference/android/text/ Layout.html
http://developer.android.com/guide/topics/ui/layout/l inear.html
[email protected] / Universitas Dian Nuswantoro
Tugas Praktek
Membuat sebuah tampilan aplikasi dengan menggunakan salah satu layout :
Linear
Relative
List View
Grid View
[email protected] / Universitas Dian Nuswantoro
Contoh
[email protected] / Universitas Dian Nuswantoro
Terima Kasih
[email protected] / Universitas Dian Nuswantoro