BAB 3 Android User Interface

BAB 3 Android User Interface Mahardeka Tri Ananta deka.kelas@gmail.com

Konten User Interface View/Widget ViewGroup (Layout) Dealing with data (supplement) Google Material Design (supplement)

User Interface (cont.) Elemen User Interface pada Android : View ViewGroup

User Interface (cont.) Courtesy: https://developer.android.com/guide/topics/ui/index.html

Widget/View (Not App. Widget)

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.

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

Layout

Layout dengan XML Memisahkan presentasi dari View dan Activity

Layout dengan code.java Tambahkan kode berikut di dalam method oncreate(bundle) di dalam class Activity.

LinearLayout Kumpulan view/widget (view group) yang diletakkan dalam satu arah secara garis lurus (linier), secara vertical atau horizontal *Tergantung pada android:orientation

LinearLayout Macam-macam attribute LinearLayout selengkapnya di http://developer.android.com/reference/android/widget/linearlayou t.layoutparams.html

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>

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

RelativeLayout Macam-macam attribute RelativeLayout selengkapnya di http://developer.android.com/reference/android/widget/relativelay out.layoutparams.html

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"/> <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> <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"/>

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">  </FrameLayout>

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>

GridLayout Tata letak widget/view pada Baris & Kolom Diperkenalkan pada Android 4, menggantikan TableLayout Grid 4 baris & 3 Kolom

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 >

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.

<?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" Scrollview 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" /> </LinearLayout> </ScrollView> <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.

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

Options Menu Courtesy: http://unitid.nl/androidpatterns/uap_pattern/change-view-options-menu

Dedicated Button

Dedicated Button Courtesy: http://unitid.nl/androidpatterns/uap_pattern/change-view-options-menu

Tab Bar Courtesy: http://unitid.nl/androidpatterns/uap_pattern/change-view-options-menu

Sliding Layer

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

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.

TERIMA KASIH SEMOGA BERMANFAAT