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 Teknologi Informasi dan Ilmu Komputer 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

Pemrograman Perangkat Mobile- BAB 3 – Layout Manager

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); } }

Eriq Muhammad Adams J, ST., M.Kom; Widhy Hayuhardhika, S.Kom - Teknik Informatika-Program Teknologi Informasi dan Ilmu Komputer


main.xml (layout berubah menjadi RelativeLayout) main.xml


Pemrograman Perangkat Mobile- BAB 3 – Layout Manager Dalam main.xml posisikomponenTextViewdengan id text3 ditempatkandisebelahkanankomponenTextViewdengan id text3menggunakan attribute tag android:layout_toRightOf="@+id/Text1". Berikutmerupakantag dapatdigunakanuntukmeletakkankomponenmenggunakanRelativeLayout.

              

attribute

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 Eriq Muhammad Adams J, ST., M.Kom; Widhy Hayuhardhika, S.Kom - Teknik Informatika-Program Teknologi Informasi dan Ilmu Komputer

yang


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;


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

Pemrograman Perangkat Mobile- BAB 3 – Layout Manager > 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;


public class TableLayoutActivity extends Activity {


Pemrograman Perangkat Mobile- BAB 3 – Layout Manager /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }

main.xml main.xml


Pemrograman Perangkat Mobile- BAB 3 – Layout Manager Penambahan baris pada table Layout menggunakan tag :

…

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;


Pemrograman Perangkat Mobile- BAB 3 – Layout Manager 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 <ScrollViewxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <EditText android:id="@+id/editText1" android:layout_width="fill_parent" android:layout_height="wrap_content"> <requestFocus> <EditText android:id="@+id/editText2" android:layout_width="fill_parent"


Pemrograman Perangkat Mobile- BAB 3 – Layout Manager android:layout_height="wrap_content" android:inputType="textPassword"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button">


Pemrograman Perangkat Mobile- BAB 3 – Layout Manager <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button">

Penambahanfitur scroll menggunakan tag <ScrollView> : <ScrollViewxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" 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.


Pemrograman Perangkat Mobile

Recommend Documents