Android User Interface - adamhendrabrata.files.wordpress.com · •Layout dapat berupa nested layout sebagai kombinasi beberapa fitur ... •Macam-macam attribute RelativeLayoutselengkapnya

BAB 3Android 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)


User Interface (cont.)

• Elemen User Interface pada Android :• View

• ViewGroup




Courtesy: https://developer.android.com/guide/topics/ui/index.html

https://developer.android.com/guide/topics/ui/index.html



Courtesy: https://developer.android.com/guide/topics/ui/index.html

https://developer.android.com/guide/topics/ui/index.html

Widget/View (Not App. Widget)


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.


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 arahsecara garis lurus (linier), secara vertical atau horizontal


*Tergantung padaandroid:orientation

LinearLayout

• Macam-macam attribute LinearLayout selengkapnya di http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html


http://developer.android.com/reference/android/widget/LinearLayout.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 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/RelativeLayout.LayoutParams.html


http://developer.android.com/reference/android/widget/RelativeLayout.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"/>

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


FrameLayout

• tampilan dimana widget-widget di dalamnya akan saling menumpuk(sumbu Z)satu sama lain.

FrameLayout

xmlns:android=“……."


android:layout_height="fill_parent">



</FrameLayout>


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

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


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


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>

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

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

Options Menu




Dedicated Button


Dedicated Button




Tab Bar




Tab Bar




Sliding Layer


Sliding Layer


Google Material Design


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

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

Documents

Android User Interface - adamhendrabrata.files.wordpress.com · •Layout dapat berupa nested layout sebagai kombinasi beberapa fitur ... •Macam-macam attribute RelativeLayoutselengkapnya