BAB 3 Android User Interface Mahardeka Tri Ananta
[email protected]
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Konten • User Interface • View/Widget • ViewGroup (Layout) • Dealing with data (supplement) • Google Material Design (supplement)
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
User Interface (cont.) • Elemen User Interface pada Android : • View • ViewGroup
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
User Interface (cont.)
Courtesy: https://developer.android.com/guide/topics/ui/index.html Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
User Interface (cont.)
Courtesy: https://developer.android.com/guide/topics/ui/index.html Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Widget/View (Not App. Widget)
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
ViewGroup • Kelas ViewGroup adalah superclass yang merepresentasikan wadah (containers) dari View atau Widget. • Dijelaskan dalam XML dan tercermin dalam kode JAVA • Layout dapat berupa nested layout sebagai kombinasi beberapa fitur • kumpulan View/Widget di mana kita dapat menetukan tata letak komponen view secara berbeda, seperti : • • • •
LinearLayout RelativeLayout FrameLayout GridView, dll. Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Layout • All layouts allow the developer to define attributes. Children can also define attributes which may be evaluated by their parent layout. • Children can specify their desired width and height via the following attributes. Table 1. Width and height definition
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Layout
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Layout dengan XML • Memisahkan presentasi dari View dan Activity
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Layout dengan code .java • Tambahkan kode berikut di dalam method onCreate(Bundle) di dalam class Activity.
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
LinearLayout • Kumpulan view/widget (view group) yang diletakkan dalam satu arah secara garis lurus (linier), secara vertical atau horizontal
*Tergantung pada android:orientation Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
LinearLayout
• Macam-macam attribute LinearLayout selengkapnya di http://developer.android.com/reference/android/widget/LinearLayou t.LayoutParams.html Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
LinearLayout
<Button ... android:text="Button <Button ... android:text="Button <Button ... android:text="Button <Button ... android:text="Button Very Long Text" />
1" /> 2 Hooray" /> 3" /> 4
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
RelativeLayout • Kumpulan view/widget (view group) yang menampilkan view child dalam posisi relatif. • • • •
relative to "parent" (the activity itself) relative to other widgets/views x-positions of reference: left, right, center y-positions of reference: top, bottom, center
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
RelativeLayout
• Macam-macam attribute RelativeLayout selengkapnya di http://developer.android.com/reference/android/widget/RelativeLay out.LayoutParams.html Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
RelativeLayout
<Button android:layout_width="125dp" android:layout_height="wrap_content" android:text="cancel" android:id="@+id/btnCancel" android:layout_below="@+id/txtComment" /> <Button android:layout_width="125px" android:layout_height="wrap_content" android:text="Save" android:id="@+id/btnSave" android:layout_below="@+id/txtComment" android:layout_alignRight="@+id/txtComment"/>
<EditText android:layout_width="fill_parent" android:layout_height="170dp" android:textSize="18sp" android:layout_alignLeft="@+id/labelComment" android:layout_below="@+id/labelComment" android:id="@+id/txtComment" android:layout_centerHorizontal="true"/> Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
FrameLayout • tampilan dimana widget-widget di dalamnya akan saling menumpuk (sumbu Z)satu sama lain. FrameLayout xmlns:android=“……." android:layout_width="fill_parent" android:layout_height="fill_parent">
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
FrameLayout
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
GridLayout • Tata letak widget/view pada Baris & Kolom • Diperkenalkan pada Android 4, menggantikan TableLayout
• Grid 4 baris & 3 Kolom Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
GridLayout
<Button ... android:text="Button 1" /> <Button ... android:text="Button Two" /> <Button ... android:text="Button 3" /> <Button ... android:text="Button Four" /> <Button ... android:text="Button 5" android:layout_row="1" android:layout_column="2" /> <Button ... android:text="Button Six" android:layout_row="0" android:layout_column="2" /> Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
ScrollView • The ScrollView class can be used to contain one View that might be to big to fit on one screen. • In this case ScrollView will display a scroll bar to scroll the context.
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
<ScrollView 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:fillViewport="true" android:orientation="vertical" tools:context="com.alamanda.kelasmalam.MainActivity">
Scrollview
<Button android:layout_width="match_parent" android:layout_height="400dp" android:text="ini button" android:textSize="30dp" />
<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="ini button" android:textSize="30dp" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="ini button" android:textSize="30dp" />
<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="ini button" android:textSize="30dp" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="ini button" android:textSize="30dp" />
The android:fillViewport="true" attribute ensures that the scroll view is set to the full screen even if the elements are smaller than one screen. Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Change View Scenario • Dealing With Data • How to change view on a set of data?
Courtesy: http://unitid.nl/androidpatterns/uap_pattern/change-view-options-menu Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Options Menu
Courtesy: http://unitid.nl/androidpatterns/uap_pattern/change-view-options-menu Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Dedicated Button
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Dedicated Button
Courtesy: http://unitid.nl/androidpatterns/uap_pattern/change-view-options-menu Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Tab Bar
Courtesy: http://unitid.nl/androidpatterns/uap_pattern/change-view-options-menu Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Tab Bar
Courtesy: http://unitid.nl/androidpatterns/uap_pattern/change-view-options-menu Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Sliding Layer
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Sliding Layer
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Google Material Design
Referensi: http://android-developers.blogspot.co.id/2014/10/appcompat-v21-material-design-for-pre.html https://developer.android.com/training/material/get-started.html https://developer.android.com/design/material/index.html Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Tugas Kelompok • Buat Layout Aplikasi semacam ini (tidak harus seperti ini) • Folder Tugas Berisi: 1. Dokumentasi (langkah2) pembuatan layout 2. layout XML file
• Format Folder : PAPB-G-T2-Kelompok99
• Deadline: 6 OKTOBER 2015 • Dikumpulkan secara kolektif di coordinator kelas.
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
TERIMA KASIH SEMOGA BERMANFAAT
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB