BAB 3 – Layout Manager
Pemrograman Perangkat Mobile Teknik Informatika-Program Teknologi Informasi dan Ilmu Komputer Universitas Brawijaya Modul Bahan Ajar UBDistanceLearning
Pemrograman Perangkat Mobile
Eriq Muhammad Adams J, ST., M.Kom; Widhy Hayuhardhika, S.Kom
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_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="@+id/Text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView ke-1"
/>
<TextView
android:id="@+id/Text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView ke-2"
android:layout_below="@+id/Text3"
/>
<TextView
android:id="@+id/Text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="TextView ke-1"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="TextView ke-2"
android:layout_x="30px"
android:layout_y="30px"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
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_width="fill_parent"
android:layout_height="fill_parent"
>
<TableRowandroid:id="@+id/tableRow1"android:layout_width="wrap_content"android:layout_height="
wrap_content">
<TextViewandroid:layout_height="wrap_content"android:layout_width="fill_parent"android:text="TextVi ew ke-1"></TextView>
</TableRow>
<TableRowandroid:id="@+id/tableRow2"android:layout_width="wrap_content"android:layout_height="
wrap_content">
<TextViewandroid:layout_height="wrap_content"android:layout_width="fill_parent"android:text="TextVi ew ke-2"></TextView>
</TableRow>
<TableRowandroid:id="@+id/tableRow3"android:layout_width="wrap_content"android:layout_height="
wrap_content">
<TextViewandroid:layout_height="wrap_content"android:layout_width="fill_parent"android:text
="TextView ke-3"></TextView>
</TableRow>
</TableLayout>
Penambahan baris pada table Layout menggunakan tag <TableRow> :
<TableRowandroid:id="@+id/tableRow1"android:layout_width="wrap_content"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_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Username">
</TextView>
<EditText
android:id="@+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<requestFocus>
</requestFocus>
</EditText>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Password">
</TextView>
<EditText
android:id="@+id/editText2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword">
</EditText>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button">
</Button>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button">
</Button>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button">
</Button>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button">
</Button>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button">
</Button>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button">
</Button>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button">
</Button>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button">
</Button>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button">
</Button>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button">
</Button>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button">
</Button>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button">
</Button>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
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_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 akanmenampilkanteks- teksnamanegaradalam absolute layout, sedangkan Sub Activity 2 akanmenampilkanteks- teksnamanamabenuadalam 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.
