Scribd
Unggah
88 tayangan

Modul Layout Android

Layout manager digunakan untuk mengatur posisi komponen pada layar. Terdapat empat jenis layout manager utama yaitu LinearLayout, RelativeLayout, TableLayout dan FrameLayout yang memiliki fungsi masing-masing untuk mengatur tata letak komponen secara vertikal, horizontal, tabel atau bertumpuk.

Diunggah oleh

dwija
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
88 tayangan

Modul Layout Android

Layout manager digunakan untuk mengatur posisi komponen pada layar. Terdapat empat jenis layout manager utama yaitu LinearLayout, RelativeLayout, TableLayout dan FrameLayout yang memiliki fungsi masing-masing untuk mengatur tata letak komponen secara vertikal, horizontal, tabel atau bertumpuk.

Diunggah oleh

dwija
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 20

Pertemuan

LAYOUT MANAGER

Untuk meletakan komponen (view) pada layar, android menggunakan layout


manager. Karena ukuran layar device Android sangat beragam, tidak ada
peletakan posisi widget secara eksak per pixel.

Terdapat empat jenis layout manager yang memiliki fungsi masing-masing.


LinearLayout,
TableLayout, RelativeLayout dan FrameLayout. Berikut akan dibahas lebih
rinci untuk setiap layout.

A. Relative Layout
RelativeLayout mengatur posisi secara relatif berdasarkan posisi widget
yang lain atau parentnya. Sebagai contoh, dua widget pada gambar di bawah.
EditText posisinya relatif terhadap textView nama.

Contoh deklarasinya adalah sebagai berikut:

Untuk layout_width dan layout_height ada dua pilihan: match_parent (view


berusaha sebesar parent) dan wrap_content (view hanya berusaha sebesar content
yang berada di dalamnya). Sedangkan padding menyatakan jarak antara pinggir
layar dengan komponen.

Perhatikan penggunaan atribut layout_toRightOf yang menyatakan bahwa


EditText berada disebelah kanan label. Sedangkan atribut layout_baseLine
digunakan agar TextView dan EditText aligned. Jika layout_baseLine dihapus
efeknya akan sebagai berikut (Text View terlalu tinggi posisinya):
Beberapa atribut lain yang mengatur posisi widget dibandingkan dengan widget
lain adalah:

android:layout_above
android:layout_below
android:layout_toLeftOf
android:layout_toRightOf.

Untuk mengatur posisi ada tambahan lima atribut: android: layout_alignTop,


android:layout_alignBottom, android:layout_alignLeft,
android:layout_alignBaseline

Contoh jika kita ingin menambahkan button sehingga posisinya sebagai berikut:

Maka deklarasi buttonnya adalah sebagai berikut:

Artinya button tersebut dibawah dan disebelah kanan EditText.


Widget juga dapat diatur berdasarkan gravity android:layout_gravity ada beberapa
pilihan untuk gravity ini: left, right, center_horizontal, center_vertical, bottom,
top. Gravity ini juga berlaku untuk layout manager yang lain. Berikut adalah
contohnya:

Hasilnya:

Silahkan bereksperimen dengan berbagai setting atribut layout.


B. Table Layout
Untuk memilih layout manager, selain dengan cara manual dapat juga
ditentukanmembuat layout (File New Other Android XML Layout File).
Saat muncul dialog berikut, pilih Root Element sebagai TableLayout.

Buatlah project :

TableLayout meletakan komponen dalam bentuk tabel (baris dan kolom), mirip
seperti Table yang digunakan di HTML. Pengguna mendefinisikan baris dengan
tag <TableRow> dan sistem secara otomatis mendefinisikan kolomnya. Contoh
deklarasi berikut:
Gantir New Layout Type dengan “TableLayout”
Ubahlah file activity_main.xml seperti gambar di bawah ini

Hasilnya adalah sebagai berikut. Bayangkan sebagai sebuah tabel dengan dua
kolom dan dua baris.

Kolom 0 Kolom 1

Misalnya kita ingin agar EditText sampai ke bagian belakang, maka tambahkan
android:stretchColumns="1" pada TableLayout. Maka kolom 1 akan terisi penuh.
Hasilnya:

Untuk menambahkan widget di kolom terntentu, gunakan


aandroid:layout_column. Misalnya kita akan menambahkan TextView di kolom 1
(ingat kolom dimulai dari 0). Ini bisa dilakukan dengan menggunakan atribut
android:layout_column. Tanpa atribut ini, TextView akan muncul di kolom 0
Hasilnya sebagai berikut:

C. Frame Layout

Framelayout digunakan untuk menampilkan satu komponen dalam satu


layar. Jika ada lebih dari satu widget, maka akan ditampilkan secara bertumpuk,
walaupun posisi widget dapat diatur dengan gravity. Kita bisa menambahkan
layout lain sebagai child di dalam frame layout.

Contoh untuk deklarasi berikut menampilkan dua ImageView (pastikan


file image telah disimpan di direktori [project]/res/drawable-hdpi,
[project]/res/drawable-ldpi dan [project]/res/drawable-mdpi )
Ubahlah layout dengan cara yang sama menjadi Framelayout
dan kemudian Ubahlah file activity_main.xml seperti gambar di bawah ini

Hasilnya gambar akan bertumpuk seperti ini


D. LinearLayout

Sesuai dengan namanya, linear layout menyimpan widget dalam satu baris
atau satu kolom (tergantung orientasinya).

Jika orientasinya vertical (android:orientation="vertical") maka hasilnya


akan seperti ini

Sedangkan jika orientasinya horizontal (android:orientation="horizontal"),


maka hasilnya akan seperti ini.
E. ScrollView

Dengan scrollview, layout seolah-olah memiliki layar yang lebih luas.


Pengguna dapat melakukan scroll. Scrollview hanya mempunyai satu child dan
umumnya adalah LinearLayout. Scrollview hanya dapat melakukan vertical
scrolling, gunakan HorizontalScrollView untuk layout yang dapat discroll secara
horizontal.

Jangan gunakan Listview bersama layout ini karena listview telah


memiliki mekanisme scrolling tersendiri.

Berikut adalah contoh scrollview yang menghasilkan layout seperti ini


yang dapat discroll. Dua button teratas menggunakan RelativeLayout yang
disisipkan dalam ScrollView. Ini adalah contoh penggabungan antara dua layout.
Latihan Menggabungkan beberapa layout

Ubahlah default layout RelativeLayout dengan ScrollView dengan cara yang


pernah di ajarkan .

Tambah kan layout LinearLayout(Vertical) didalam layout ScrollVew seperti


pada gambar, dibawah ini
Ganti layout_width = ”match_parent” layout_height = ”wrap_content”

Kemudian Tambah kan RelativeLayout di dalam LinearLayout. Setelah itu tambahkan Widget
dua buah Button di dalam Relative Layout. Dan tambahkan

beberapa Widget Button di dalam LinearLayout. Seperti code di bawah ini

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="110dp"
android:orientation="vertical" >

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<Button android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="24dp"
android:text="Button" />

<Button android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Button" />
</RelativeLayout>

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

<Button android:id="@+id/button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button android:id="@+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

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

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

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

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

<Button android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

android:text="Button" />

</LinearLayout>

</ScrollView>
Latihan Layout
Berdasarkan hasil latihan activity-intent, pada layar2 dan layar3, tambahkan
layout yang tepat agar tampilan widget rapi.

Tugas

Buatlah program untuk menghitung luas sebuah persegi panjang. Input adalah panjang dan lebar
(dua edit text). Output adalah luasnya (panjang kali lebar). Gunakan method berikut untuk
mengubah tipe string ke double.

Catatan: input dari method setText bertipe teks, sehingga nilai luas yang bertipe double harus
dikonversi terlebih dulu menjadi teks. Gunakan String.valueOf(dblLuas) untuk mengkoversi
double menjadi teks.

Anda mungkin juga menyukai