BAB 3 Android User Interface

Transkripsi

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

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

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

4 User Interface (cont.) Courtesy:

5 User Interface (cont.) Courtesy:

6 Widget/View (Not App. Widget)

7 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.

8 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

9 Layout

10 Layout dengan XML Memisahkan presentasi dari View dan Activity

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

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

13 LinearLayout Macam-macam attribute LinearLayout selengkapnya di t.layoutparams.html

14 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>

15 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

16 RelativeLayout Macam-macam attribute RelativeLayout selengkapnya di out.layoutparams.html

17 RelativeLayout <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="comments" android:layout_alignparenttop="true" android:layout_alignparentleft="true"/> <Button android:layout_width="125dp" android:layout_height="wrap_content" android:text="cancel" /> <Button android:layout_width="125px" android:layout_height="wrap_content" android:text="save" </RelativeLayout> <EditText android:layout_width="fill_parent" android:layout_height="170dp" android:textsize="18sp" android:layout_centerhorizontal="true"/>

18 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>

19 FrameLayout <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" 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" <TextView android:textsize="50px" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="frame Demo" android:gravity="center" </FrameLayout> </RelativeLayout>

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

21 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 >

22 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.

23 <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android=" xmlns: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.

24 Change View Scenario Dealing With Data How to change view on a set of data? Courtesy:

25 Options Menu Courtesy:

26 Dedicated Button

27 Dedicated Button Courtesy:

28 Tab Bar Courtesy:

29 Tab Bar Courtesy:

30 Sliding Layer

31 Sliding Layer

32 Google Material Design Referensi:

33 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.

34 TERIMA KASIH SEMOGA BERMANFAAT