Pemrograman Perangkat Mobile

Modul Bahan Ajar UBDistanceLearning Pemrograman Perangkat Mobile Eriq Muhammad Adams J, ST., M.Kom; Widhy Hayuhardhika, S.Kom BAB 3 Layout Manager Pemrograman Perangkat Mobile Teknik Informatika-Program Universitas Brawijaya

PemrogramanPerangkat Mobile - BAB 3 Layout Manager Pendahuluan Dalampembuatan user interface di android adafitur layout manager yang digunakanuntukmengaturjenis layout dariaplikasi yang kitakembangkan. Padababiniakandibahasmengenaijenis-jenis layout yang disediakanoleh Android SDK. TujuanInstruksionalKhusus Perancanganmodulpadababinibertujuan agar mahasiswamampu : 1. MemahamiJenis-Jenis Layout. 2. Membuataplikasimenggunakan layout. DaftarMateri 1. PENGENALANLAYOUT 1.1 Layout 1.2 Jenis Layout 2. LAYOUT MANAGER 2.1 Relative Layout 2.2 Absolute Layout 2.3 Table Layout 2.4 Scroll View 3. SOAL DAN PROJECT

1. PENGENALAN 1.1 Layout GUI (Graphical User Interface) pada aplikasi android terdiri dari activity dan file layout XML yang terletak di dalam direktori res/layout. Untuk memanggil file layout XML yang disimpan tersebut menggunakan referensi R.layout.nama_file_layout. 1.2 Jenis Layout Ada beberapa macam layout yang disediakan oleh Android SDK, yaitu: a. Relative Layout b. Absolute Layout c. Table Layout d. Scroll View 2. LAYOUT MANAGER 2.1 Relative Layout PadaRelative layoutposisielemen yang ditempatkanmengikutiposisi relative elemensebelumnya.: Buat project android dengan ketentuan sebagai berikut : Project name : RelativeLayout Build Target : Android 2.1 Application Name : relativelayout Package name : id.ac.ub.ptiik.relativelayout Activity : RelativeLayoutActivity Min SDK : 7 RelativeLayoutActivity.java package id.ac.ub.ptiik.relativelayout; import android.app.activity; import android.os.bundle; public class RelativeLayoutActivity extends Activity { /** Called when the activity is first created. */ @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main);

main.xml (layout berubah menjadi RelativeLayout) main.xml <?xmlversion="1.0"encoding="utf-8"?> <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="fill_parent" > android:id="@+id/text1" android:text="textview ke-1" /> android:id="@+id/text2" android:text="textview ke-2" android:layout_below="@+id/text3" /> android:id="@+id/text3" android:text="textview ke-3" android:layout_torightof="@+id/text1" /> </RelativeLayout>

Dalam main.xml posisikomponentextviewdengan id text3 ditempatkandisebelahkanankomponentextviewdengan id text3menggunakan attribute tag android:layout_torightof="@+id/text1". Berikutmerupakantag attribute yang dapatdigunakanuntukmeletakkankomponenmenggunakanrelativelayout. Android:layout_above Android:layout_alignBaseline Android:layout_alignbottom Android:layout_alignLeft Android:layout_alignParentBottom Android:layout_alignParentLeft Android:layout_alignParentRight Android:layout_alignParentTop Android:layout_alignRight Android:layout_alignTop Android:layout_alignWithParentIfMissing Android:layout_centerHorizontal Android:layout_centerInParent Android:layout_centerVertical Android:layout_toLeftOf Apabila aplikasi relativelayout dijalankan, tampilannya sepertiditunjukkangambar 2.1. Gambar 2.1Tampilan Relative Layout

2.2 Absolute Layout Absolute Layout digunakanmeletakkankomponenpadaposisitetapatauabsolutmenggunakansatuan pixel. Buat project android dengan ketentuan sebagai berikut : Project name : AbsoluteLayout Build Target : Android 2.1 Application Name : absolutelayout Package name : id.ac.ub.ptiik.absolutelayout Activity : AbsoluteLayoutActivity Min SDK : 7 AbsoluteLayoutActivity.java package id.ac.ub.ptiik.absolutelayout; import android.app.activity; import android.os.bundle; public class AbsoluteLayoutActivity extends Activity { /** Called when the activity is first created. */ @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); main.xml main.xml <?xmlversion="1.0"encoding="utf-8"?> <AbsoluteLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="fill_parent"

> android:text="textview ke-1" /> android:text="textview ke-2" android:layout_x="30px" android:layout_y="30px" /> android:text="textview ke-3" android:layout_x="50px" android:layout_y="50px" /> </AbsoluteLayout> TextView ke-2 dantextview ke-3ditempatkansecaraabsolutmenggunakan tag attribut : android:layout_x="30px" android:layout_y="30px" Jika dijalankan, aplikasi absolutelayout tampilannya akan tampak sepertipadagambar 2.2.

Gambar 2.2Tampilan Absolute Layout 2.3 Table Layout Table Layout digunakan untuk komponendalamstruktur layout tabel. Buat project android dengan ketentuan sebagai berikut : Project name : TableLayout Build Target : Android 2.1 Application Name : tablelayout Package name : id.ac.ub.ptiik.tablelayout Activity : TableLayoutActivity Min SDK : 7 TableLayoutActivity.java package id.ac.ub.ptiik.tablelayout; import android.app.activity; import android.os.bundle; public class TableLayoutActivity extends Activity {

/** Called when the activity is first created. */ @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); main.xml main.xml <?xmlversion="1.0"encoding="utf-8"?> <TableLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="fill_parent" > <TableRowandroid:id="@+id/tableRow1"android:layout_height=" wrap_content"> android:text="textvi ew ke-1"></textview> </TableRow> <TableRowandroid:id="@+id/tableRow2"android:layout_height=" wrap_content"> android:text="textvi ew ke-2"></textview> </TableRow> <TableRowandroid:id="@+id/tableRow3"android:layout_height=" wrap_content"> android:text ="TextView ke-3"></textview> </TableRow> </TableLayout>

Penambahan baris pada table Layout menggunakan tag <TableRow> : <TableRowandroid:id="@+id/tableRow1"android:layout_height="wrap _content"> </TableRow> Jika dijalankan, aplikasi tablelayouttampilannya akan sepertipadagambar 2.3. Gambar 2.3Tampilan Table Layout 2.4 Project 4 : Scroll View Scroll View digunakan untuk memberikan fasilitas scroll untukkonten yang melebihi area device. Buat project android dengan ketentuan sebagai berikut : Project name : ScrollView Build Target : Android 2.1 Application Name : scrollview Package name : id.ac.ub.ptiik.scrollview Activity : ScrollViewActivity Min SDK : 7 ScrollViewActivity.java package id.ac.ub.ptiik.scrollview; import android.app.activity;

import android.os.bundle; public class ScrollViewActivity extends Activity { /** Called when the activity is first created. */ @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); main.xml main.xml <?xmlversion="1.0"encoding="utf-8"?> <ScrollViewxmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:orientation="vertical"> <LinearLayout android:layout_height="fill_parent" android:orientation="vertical"> android:text="username"> </TextView> <EditText android:id="@+id/edittext1" > <requestfocus> </requestfocus> </EditText> android:text="password"> </TextView> <EditText android:id="@+id/edittext2"

android:inputtype="textpassword"> </EditText>

android:text="masukkan Username dan Password"> </TextView> </LinearLayout> </ScrollView> Penambahanfitur scroll menggunakan tag <ScrollView> : <ScrollViewxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="fill_parent"> Jika dijalankan, aplikasi ScrollView tampilannya akan sebagai sepertipadagambar 2.4.

Gambar 2.4Tampilan Scroll View 3. SOALDAN PROJECT Soal 1. Jelaskanapa yang dimaksuddengan Layout Manager! 2. SebutkandanJelaskanmacam-macam layout di Android! Project Buatlahsebuahaplikasisederhanadengan 3 buah activity. Activity utama yang menampilkan 2 tombolmenggunakan relative layout, ketikaditekantombol 1 akanmasukke Sub Activity 1 danjikaditekantombol 2 akanmasukke Sub Activity 2. Sub Activity 1 akanmenampilkanteksteksnamanegaradalam absolute layout, sedangkan Sub Activity 2 akanmenampilkanteksteksnamanamabenuadalam table layout. REFERENSI Yudhi,Wibisono.2011. Pengantar Mobile Programming dengan Android, UPI. Safaat, H. Nazruddin. 2011. ANDROID PemrogramanAplikasi Mobile Smartphone dan Tablet PC Berbasis Android, PenerbitInformatika.