3

Android Layout
Layout xml merupakan kumpulan perintah program xml yang meng-
hasilkan suatu tampilan pada layar Android. Jenis penampilan layout ada
beberapa tipe, antara lain:

Linier Layout

Relative Layout

Table Layout

3.1 Atribut Layout

Dalam layout xml dapat memiliki objek-objek, seperti TextView,
EditText, Button, atau yang lainnya, dengan masing-masing atribut
mengenai objek tersebut. Atribut-atribut tersebut memiliki makna
masing-masing tergantung jenis objeknya. Namun, secara umum banyak
kesamaan arti kegunaan atribut tersebut. Berikut penjelasan mengenai
atribut-atribut tersebut.

android:orientation
Orientatation merupakan atribut layout xml yang berisikan orientasi
objek vertikal atau horizontal. Berikut contoh layout xml dari objek yang
tersusun secara vertikal.

45
android:orientation="vertical"

Konstanta Keterangan

horizontal Orientasilayoutaplikasihorizontal

vertical Orientasilayoutaplikasivertikal

Tabel 3.1 Tabel android:orientation.

android:layout_width dan android:layout_height

layout_width dan layout_height merupakan atribut yang berisikan lebar
dan tinggi dari objek. Nilai isi dapat ditentukan dengan ukuran konstanta
ataupun angka.
android:layout_width="wrap_content"
android:layout_height="100 dp"

Konstanta Keterangan

wrap_content Ukuranobjekakanmengikutibesarnyaisiobjek

match_parent Ukuran objek akan menyesuaikan dengan ukuran layout

yangmelingkupinya(parent)

diisiangka dp,dip,atausp

Tabel 3.2 Tabel android:layout_width dan height.

android:id
Setiap objek dalam Android harus memiliki id yang unik. Id ini
bermanfaat sebagai identitas objek yang akan digunakan dalam program.
android:id="@+id/button1"

android:text dan android:textSize

Untuk objek seperti Button, TextView, EditText, ataupun yang lainnya
berupa tulisan memiliki atribut text dan textSize. Atribut text berisikan
jenis huruf, sedangkan textSize berisikan ukuran huruf yang digunakan.

46
Atribut text dapat diisi langsung dengan tulisan ataupun dengan variabel
resource string.
android:text="@string/my_button_text"
android:textSize="18sp"

android:layout_gravity
Atribut layout_grafity merupakan penata-letakan dari objek anak
terhadap layout yang melingkupinya (parent). Atribut layout_grafity
dapat diisikan konstanta seperti pada tabel.
android:layout_gravity="left"

Konstanta Nilai Keterangan

top 0x30 Objek akan diurutkan ke atas dan tidak

mengubahukuran

bottom 0x50 Objek akan diurutkan ke bawah dan tidak

mengubahukuran

left 0x03 Objek akan diurutkan ke kiri dan tidak

mengubahukuran

right 0x05 Objek akan diurutkan ke kanan dan tidak

mengubahukuran

center_vertical 0x10 Objek ditempatkan di pusat layout secara

verticaltanpamengubahukuran

fill_vertical 0x70 Memperbesarobjeksesuaidenganukuran

verticallayar

center_horizontal 0x01 Objek ditempatkan di pusat layout secara

horizontaltanpamengubahukuran

fill_horizontal 0x07 Memperbesarobjeksesuaidenganukuran

horizontallayar

center 0x11 Objek ditempatkan di pusat layout secara

horizontal dan vertical tanpa mengubah
ukuran

fill 0x77 Memperbesarobjeksesuaidenganukuran

horizontaldanverticallayout

47
 start 0x008 Objek ditempatkan ke awal layout tanpa
00003 mengubahukuran

end 0x008 Objek ditempatkan ke akhir layout tanpa

00005 mengubahukuran

Tabel 3.3 Tabel android:layout_gravity.

android:layout_ weight
Dalam linier layout ada atribut layout_weight yang digunakan untuk
menentukan besaran area layout sesuai perbandingan bobot dalam
layout.
android:layout_weight="2"

android:padding
Atribut padding merupakan margin dari objek dari batasan sebelah kiri,
kanan, atau atas dan bawah.
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
android:paddingBottomt="16dp"

3.2 Linier Layout

Linier Layout akan menghasilkan tampilan secara berurutan. Objek-objek
yang ada akan tersusun, baik secara horizontal ataupun vertikal. Sebagai
contoh, untuk menjelaskan hal tersebut maka bukalah program
LinierLayoutActivity.java dan activity_linier_layout.xml.

Source Code LinierLayoutActivity.java

package belajar.android.linierlayout;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class LinierLayoutActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

48
 setContentView(R.layout.activity_linier_layout);
}
}

Source Code activity_linier_layout.xml

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical" >

<Button
android:id="@+id/button1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button 2" />
<Button
android:id="@+id/button3"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="2"
android:text="Button 3" />
<Button
android:id="@+id/button4"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Button 4" />
</LinearLayout>

49
Hasil Project LinierLayout

Gambar 3.1 Tampilan hasil LinierLayout.

Penjelasan Project LinierLayout

Pada klas LinierLayoutActivity subrutin onCreate, perintah setContentView
menetapkan layout pada activity_ linier_layout.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_linier_layout);
}

Dalam activity_linier_layout.xml menggunakan LinearLayout dengan

orientasi vertikal, lebar dan tinggi layout akan memenuhi seluruh layar
pada margin, baik sebelah kiri dan kanan sebesar 16dp.
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical"

Pada objek Button, atribut yang digunakan untuk menentukan lebar

100dp dan tinggi akan menyesuaikan dengan perbandingan bobot objek
yang ditentukan android:layout_weight.

50
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"

3.3 Relative Layout

RelativeLayout akan menghasilkan tampilan objek-objek yang relatif satu
sama lain. Artinya, objek yang satu dapat ditentukan letaknya terhadap
objek yang lain. Ada beberapa parameter tambahan dalam RelativeLayout
seperti terlihat pada Tabel 3.4.

RelativeLayout Keterangan

layout_alignParentTop Jikanilainyatruemaka
layout_alignParentBottom object akan ditempatkan pada tepi atas/
layout_alignParentLeft bawah/kiri/kananlayoutparent
layout_alignParentRight

layout_centerVertical Jikanilainyatruemaka
layout_centerHorisontal objectakanditempatkanpadatengahlayout
secaravertical/horizontalobjekparent

layout_below Object akan ditempatkan pada sebelah

layout_above bawahdariobjekidtertentu

layout_toLeftOf Objectakanditempatkanpadasebelahkanan
layout_toRightOf /kiridariobjekidtertentu

layout_alignLeft Object akan ditempatkan pada sebelah kiri/

layout_alignRight kanan/atas/bawahdariobjekidtertentu
layout_alignTop
layout_alignBottom

Tabel 3.4 Tabel android:layout_gravity.

Sebagai contoh, untuk menjelaskan relative layout maka bukalah program

RelativeLayoutActivity.java dan activity_ relative _layout.xml.

Source Code RelativeLayoutActivity.java

package belajar.android.relativelayout;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

51
public class RelativeLayoutActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_relative_layout);
}
}

Source Code activity_relative_layout.xml

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

<TextView
android:id="@+id/lblKomentar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Komentar"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />

<EditText
android:id="@+id/txtKomentar"
android:layout_width="fill_parent"
android:layout_height="170dp"
android:textSize="18sp"
android:layout_alignLeft="@+id/lblKomentar"
android:layout_below="@+id/lblKomentar"
android:layout_centerHorizontal="true" />

<Button
android:id="@+id/btnSatu"
android:layout_width="125dp"
android:layout_height="wrap_content"
android:text="Satu"
android:layout_below="@+id/txtKomentar"
android:layout_alignRight="@+id/txtKomentar" />

<Button
android:id="@+id/btnDua"
android:layout_width="124dp"
android:layout_height="wrap_content"
android:text="Dua"
android:layout_below="@+id/txtKomentar"
android:layout_alignLeft="@+id/txtKomentar" />

</RelativeLayout>

52
Hasil Project relativelayout

Gambar 3.2 Tampilan hasil RelativeLayoot.

Penjelasan Project RelativeLayout

Pada klas RelativeLayoutActivity subrutin onCreate, perintah
setContentView menetapkan layout pada activity_relative_layout.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_relative_layout);
}

Dalam activity_relative_layout.xml menggunakan RelativeLayout dengan

lebar dan tinggi layout akan memenuhi seluruh area yang tersedia.
android:layout_width="match_parent"
android:layout_height="match_parent" >

TextView dengan id lblKomentar berisikan tulisan "Komentar" ditem-

patkan menempel pada sisi atas dan tepi kiri dari layout.
<TextView
android:id="@+id/lblKomentar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Komentar"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />

EditText dengan id TxtKomentar dengan lebar sesuai lebar layout. Tinggi

170dp dan ukuran huruf 18sp. Letaknya rata kiri dengan lblKomentar dan
di bawah lblKomentar, dan berada di tengah-tengah.

53
<EditText
android:id="@+id/txtKomentar"
android:layout_width="fill_parent"
android:layout_height="170dp"
android:textSize="18sp"
android:layout_alignLeft="@+id/lblKomentar"
android:layout_below="@+id/lblKomentar"
android:layout_centerHorizontal="true" />

Button dengan id btnSatu dengan lebar 125dp dan tinggi menyesuaikan

tulisan "Satu". Letaknya ditempatkan di bawah txtKomentar dan rata
kanan dengan txtKomentar.
<Button
android:id="@+id/btnSatu"
android:layout_width="125dp"
android:layout_height="wrap_content"
android:text="Satu"
android:layout_below="@+id/txtKomentar"
android:layout_alignRight="@+id/txtKomentar" />

Button dengan id btnDua terletak di bawah dan sebelah kiri txtKomentar.

<Button
android:id="@+id/btnDua"
android:layout_width="124dp"
android:layout_height="wrap_content"
android:text="Dua"
android:layout_below="@+id/txtKomentar"
android:layout_alignLeft="@+id/txtKomentar" />

3.4 Table Layout

TableLayout akan menghasilkan tampilan dengan objek-objek yang akan
membentuk menyerupai tabel.

Sebagai contoh, untuk menjelaskan table layout maka bukalah program

TableLayoutActivity.java dan activity_ table _layout.xml.

Source Code TableLayoutActivity.java

package belajar.android.tablelayout;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class TableLayoutActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {

54
 super.onCreate(savedInstanceState);
setContentView(R.layout.activity_table_layout);
}
}

Source Code activity_table_layout.xml

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TableRow>
<TextView
android:text="Nama Lengkap:"
android:width ="120dp" />
<EditText
android:id="@+id/txtNamaLengkap"
android:width="200dp" />
</TableRow>
<TableRow>
<TextView
android:text="Password:"/>
<EditText
android:id="@+id/txtPassword"
android:password="true" />
</TableRow>
<TableRow>
<TextView />
<CheckBox android:id="@+id/chkSimpanPassword"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Simpan Password" />
</TableRow>
<TableRow>
<Button
android:id="@+id/buttonMasuk"
android:text="Masuk" />
</TableRow>
</TableLayout>

Hasil Project TableLayout

Gambar 3.3 Tampilan hasil TableLayout.

55
Penjelasan Project TableLayout
Pada klas TableLayoutActivity subrutin onCreate, perintah setContentView
menetapkan layout pada activity_table_layout.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_table_layout);
}

Dalam activity_table_layout.xml menggunakan TableLayout dengan lebar

dan tinggi layout akan memenuhi seluruh area yang tersedia.
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">

Dalam pembuatan table layout, beberapa aturan yang perlu diketahui

adalah:

Dibuka dengan <TableLayout dan pada akhir ditutup dengan

</TableLayout>.

Untuk membuat satu baris pada tabel dengan perintah <TableRow>

dan pada akhir baris diakhiri </TableRow>.

Baris pertama tabel berisi:

TextView dengan tulisan "Nama Lengkap" lebar 120dp.

EditText dengan id txtNamaLengkap dan lebar 200dp.

<TableRow>
<TextView
android:text="Nama Lengkap:"
android:width ="120dp" />
<EditText
android:id="@+id/txtNamaLengkap"
android:width="200dp" />
</TableRow>

Baris kedua tabel berisi:

TextView dengan tulisan "Password".

56
 EditText dengan id txtPassword dan merupakan password.
<TableRow>
<TextView
android:text="Password:"/>
<EditText
android:id="@+id/txtPassword"
android:password="true" />
</TableRow>

Baris ketiga berisikan CheckBox dengan id chkSimpanPassword, lebar

memenuhi area, dan tinggi menyesuaikan tulisan "Simpan Password".
<TableRow>
<CheckBox android:id="@+id/chkSimpanPassword"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Simpan Password" />
</TableRow>

Baris terakhir berisikan Button dengan Id buttonMasuk dan tulisan

"Masuk".
<TableRow>
<Button
android:id="@+id/buttonMasuk"
android:text="Masuk" />
</TableRow>

3.5 Pembuatan Layout secara Programming

Layout pada Android dapat menggunakan file layout xml, atau dapat
dibuat menggunakan program pada file java. Pembuatan layout melalui
programming dapat menghasilkan layout yang dinamis. Contoh project
LayoutProgrammingXml akan menjelaskan mengenai pembuatan layout
dengan programming.

Source Code ProgramminglayoutxmlActivity.java.

package belajar.android.layoutprogrammingxml;

import android.os.Bundle;
import android.app.Activity;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;

57
import android.widget.LinearLayout;
import android.widget.RadioGroup;
import android.widget.Toast;

public class ProgramminglayoutxmlActivity extends Activity

implements OnClickListener {

LinearLayout llMain;
RadioGroup rgGravity;
EditText etName;
Button btnCreate;
Button btnClear;

int wrapContent =
LinearLayout.LayoutParams.WRAP_CONTENT;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_programminglayoutxml);

llMain = (LinearLayout) findViewById(R.id.llMain);

rgGravity = (RadioGroup)
findViewById(R.id.rgGravity);
etName = (EditText) findViewById(R.id.etName);

btnCreate = (Button) findViewById(R.id.btnCreate);

btnCreate.setOnClickListener(this);

btnClear = (Button) findViewById(R.id.btnClear);

btnClear.setOnClickListener(this);
}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btnCreate:

LinearLayout.LayoutParams lParams = new

LinearLayout.LayoutParams(
wrapContent, wrapContent);

int btnGravity = Gravity.LEFT;

switch (rgGravity.getCheckedRadioButtonId()) {
case R.id.rbLeft:
btnGravity = Gravity.LEFT;
break;
case R.id.rbCenter:
btnGravity = Gravity.CENTER_HORIZONTAL;
break;
case R.id.rbRight:
btnGravity = Gravity.RIGHT;
break;
}

lParams.gravity = btnGravity;

58
 Button btnNew = new Button(this);
btnNew.setText(etName.getText().toString());
llMain.addView(btnNew, lParams);
break;

case R.id.btnClear:
llMain.removeAllViews();
Toast.makeText(this, "Di Hapus",
Toast.LENGTH_SHORT).show();
break;

}
}
}

Source Code activity_layoutprogrammingxml.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RadioGroup
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
android:id="@+id/rgGravity">

<RadioButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:checked="true"
android:text="Left"
android:id="@+id/rbLeft">
</RadioButton>

<RadioButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Center"
android:id="@+id/rbCenter">
</RadioButton>

<RadioButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Right"
android:id="@+id/rbRight">
</RadioButton>
</RadioGroup>
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">

59
 <EditText
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:id="@+id/etName"
android:fadeScrollbars="true">
</EditText>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Create"
android:id="@+id/btnCreate">
</Button>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Clear"
android:id="@+id/btnClear">
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/llMain"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>

Hasil Project LayoutProgrammingXML

Gambar 3.4 Tampilan hasil TableLayout.

Penjelasan Project LayoutProgrammingXML

Dalam program pertama harus dideklarasi variabel-variabel yang akan
digunakan:

60
LinearLayout llMain;
RadioGroup rgGravity;
EditText etName;
Button btnCreate;

Variabel-variabel yang telah dideklarasi akan dikoneksikan dengan objek-

objek pada layout activity_layoutprogrammingxml.xml.
llMain = (LinearLayout) findViewById(R.id.llMain);
rgGravity = (RadioGroup) findViewById(R.id.rgGravity);
etName = (EditText) findViewById(R.id.etName);

btnCreate = (Button) findViewById(R.id.btnCreate);

btnCreate.setOnClickListener(this);

btnClear = (Button) findViewById(R.id.btnClear);

btnClear.setOnClickListener(this);

Button btnCreate dan btnClear dibuatkan listener dengan

setOnClickListener yang akan mengarah ke prosedur onClick.

Tombol klik btnCreate akan membuat tombol baru, dan tombol klik
btnClear akan menghapus seluruh tombol yang sudah dibuat.

Untuk pembuatan tombol baru melalui programming maka langkah

pertama harus membuat layout baru. Dalam contoh, akan dibuat
linierlayout yang nantinya akan ditempatkan tombol baru.
LinearLayout.LayoutParams lParams = new
LinearLayout.LayoutParams(wrapContent, wrapContent);

Button btnNew dibuat dulu dengan tulisan yang diambil dari EditText
dengan id etName. Setiap kali btnCreate diklik akan terjadi ditambah satu
tombol btnNew dengan perintah addView.
lParams.gravity = btnGravity;
Button btnNew = new Button(this);
btnNew.setText(etName.getText().toString());
llMain.addView(btnNew, lParams);

Penghapusan semua tombol btnNew yang sudah dibuat dilakukan dengan

perintah removeAllViews.
llMain.removeAllViews();

61