BAB 3 Android User Interface

(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: https://developer.android.com/guide/topics/ui/index.html

(5)

User Interface (cont.)

(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

http://developer.android.com/reference/android/widget/LinearLayou

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

http://developer.android.com/reference/android/widget/RelativeLay

out.LayoutParams.html

(17)

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"

<Button

android:layout_width="125dp"

android:text="cancel"

android:id="@+id/btnCancel"

android:layout_below="@+id/txtComment"

/>

<Button

android:layout_width="125px"

android:text="Save"

android:id="@+id/btnSave"

android:layout_below="@+id/txtComment"

android:layout_alignRight="@+id/txtComment"/>

</RelativeLayout>

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

</FrameLayout>

(19)

FrameLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

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_height="match_parent">

<ImageView

android:layout_height="fill_parent"

android:src="@drawable/ic_launcher"/>

<TextView

android:textSize="50px"

android:layout_height="fill_parent"

android:text="Frame Demo"

android:gravity="center"

android:id="@+id/txtDemo"/>

(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 5"

android:layout_row="1"

android:layout_column="2" />

<Button ... android:text="Button Six"

android:layout_row="0"

android:layout_column="2" />

(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)

Scrollview

<?xml version="1.0" encoding="utf-8"?>

<ScrollView

xmlns:android="http://schemas.android.com/apk/res/android"

android:fillViewport="true"

android:orientation="vertical"

tools:context="com.alamanda.kelasmalam.MainActivity">

<LinearLayout

android:orientation="vertical">

<Button

android:layout_height="400dp"

android:text="ini button"

android:textSize="30dp"

/>

<Button

/>

<Button

/>

<Button

/>

<Button

/>

</LinearLayout>

</ScrollView>

(24)

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

(25)

Options Menu

(26)

Dedicated Button

(27)

Dedicated Button

(28)

Tab Bar

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

(29)

Tab Bar

(30)

Sliding Layer

(31)

Sliding Layer

(32)

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