BAB 3Android User Interface
Mahardeka Tri Ananta
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.)
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Courtesy: https://developer.android.com/guide/topics/ui/index.html
User Interface (cont.)
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Courtesy: https://developer.android.com/guide/topics/ui/index.html
ViewGroup
• Kelas ViewGroup adalah superclass yang merepresentasikanwadah (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 letakkomponen 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.
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Table 1. Width and height definition
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 arahsecara garis lurus (linier), secara vertical atau horizontal
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
*Tergantung padaandroid:orientation
LinearLayout
• Macam-macam attribute LinearLayout selengkapnya di http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
LinearLayout
<LinearLayout ...
android:orientation="horizontal"
tools:context=".MainActivity">
<Button ... android:text="Button 1" />
<Button ... android:text="Button 2 Hooray" />
<Button ... android:text="Button 3" />
<Button ... android:text="Button 4
Very Long Text" />
</LinearLayout>
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/RelativeLayout.LayoutParams.html
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
RelativeLayout<RelativeLayout
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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Comments"
android:id="@+id/labelComment"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"/>
<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"/>
<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"/>
</RelativeLayout>
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">
<!-- widget2 disini-->
</FrameLayout>
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
FrameLayout<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/ic_launcher"/>
<TextView
android:textSize="50px"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Frame Demo"
android:gravity="center"
android:id="@+id/txtDemo"/>
</FrameLayout>
</RelativeLayout>
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
<GridLayout ...
android:rowCount="2"
android:columnCount="3"
android:orientation="vertical">
<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" />
</ GridLayout >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
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
<?xml version="1.0" encoding="utf-8"?>
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<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"
/>
</LinearLayout>
</ScrollView>
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.
Change View Scenario
• Dealing With Data
• How to change view on a set of data?
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Courtesy: http://unitid.nl/androidpatterns/uap_pattern/change-view-options-menu
Options Menu
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Courtesy: http://unitid.nl/androidpatterns/uap_pattern/change-view-options-menu
Dedicated Button
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Courtesy: http://unitid.nl/androidpatterns/uap_pattern/change-view-options-menu
Tab Bar
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Courtesy: http://unitid.nl/androidpatterns/uap_pattern/change-view-options-menu
Tab Bar
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Courtesy: http://unitid.nl/androidpatterns/uap_pattern/change-view-options-menu
Google Material Design
Lab. Pemrograman Aplikasi Perangkat Bergerak FILKOM UB
Referensi:http://android-developers.blogspot.co.id/2014/10/appcompat-v21-material-design-for-pre.htmlhttps://developer.android.com/training/material/get-started.htmlhttps://developer.android.com/design/material/index.html
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