PERTEMUAN 3

Layout,dan Sumber Daya

Mata Kuliah : Pemrograman Aplikasi Mobile

Kelas :F
Prodi : Sistem Informasi
SKS :2
Semester :5
Dosen : Andi Asvin Mahersatillah Suradi, S.Kom., M.T.
Layout
Layout View adalah sebuah tipe kelas View dengan tujuan khusus untuk mengorganisir dan
memposisikan view-view lain di dalamnya (contohnya adalah LinearLayout, RelativeLayout, dll.)
Activity di Android menggunakan layout sebagai container untuk view lain di dalamnya, bahkan juga
bisa berisi layout lain. Container layout di hampir semua Activity Android bekerja dengan cara yang
mirip dengan elemen "div" di HTML.

Sistem Android menyediakan ratusan tampilan yang telah didefinisikan sebelumnya, termasuk yang
menampilkan:
1. Teks (TextView)
2. Bidang untuk memasukkan dan mengedit teks (EditText)
3. Pengguna tombol bisa mengetuk (Button) dan komponen interaktif lainnya
4. Teks yang bisa digulir (ScrollView) dan item yang bisa digulir (RecyclerView)
5. Gambar (ImageView)
View Group
Tampilan bisa dikelompokkan bersama di dalam grup tampilan (ViewGroup), yang
berfungsi sebagai kontainer tampilan. Hubungannya adalah induk-anak, dalam hal ini
induk adalah View Group, dan anak adalah View. Berikut ini adalah grup tampilan yang
umum:

1. ScrollView: Grup yang berisi satu tampilan anak lainnya dan memungkinkan
pengguliran tampilan anak.
2. RecyclerView: Grup yang berisi daftar tampilan atau grup tampilan lainnya dan
memungkinkan penggulirannya dengan menambahkan dan membuang tampilan secara
dinamis dari layar.
3. LinearLayout : Sesuai dengan namanya menampilkan dan memposisikan elemen di
dalamnya dalam satu arah, secara horizontal atau vertikal. Arahnya dapat diatur
melalui atribut android:orientation.
LinearLayout
Semua isi dari LinearLayout akan ditampilkan berdasarkan urutan penulisan mereka di
file layout. Beberapa atribut yang sering dipakai dalam suatu LinearLayout adalah:

• android:gravity - Mengontrol penjajaran konten dari suatu view (seperti text-align di

CSS)
• android:layout_gravity - Mengontrol penjajaran view di dalam suatu container
(seperti float di CSS)
• android:layout_weight - Menentukan berapa lebar atau tinggi ruang ekstra untuk
diberikan pada suatu view.
Contoh LinearLayout
Grup Tampilan Layout

1. Layout akar LinearLayout, yang berisi semua tampilan anak, disetel ke orientasi vertikal.
2. Button ( button_toast ) tampilan anak. Sebagai tampilan anak pertama, muncul di bagian atas di layout linear.
3. TextView ( show_count ) tampilan anak. Sebagai tampilan anak kedua, muncul di bawah tampilan anak
pertama di layout linear.
4. Button ( button_count ) tampilan anak. Sebagai tampilan anak ketiga, muncul di bawah tampilan anak kedua di
layout linear.
Menggunakan XML
Untuk menampilkan dan mengedit kode XML, buka file layout XML. Editor layout
muncul bersama tab Design di bagian bawah yang disorot. Klik tab Text untuk melihat
kode XML. Yang berikut ini menampilkan cuplikan kode XML untuk LinearLayout
dengan Button dan TextView:
Attribut XML
Saat mendefinisikan tampilan di XML, properti dirujuk sebagai atribut, Misalnya, dalam keterangan
XML TextView berikut, android:id , android:layout_width , android:layout_height ,
android:background , itu semua merupakan atribut XML yang diterjemahkan secara otomatis menjadi
properti TextView:
Memosisikan Tampilan

Padding adalah ruang antara tepi tampilan

(garis putus-putus) dan isi tampilan (garis
utuh). Padding tidak sama dengan margin, yang
merupakan ruang dari tepi tampilan ke
induknya.
File Sumber Daya

File sumber daya disimpan dalam folder yang berada di folder res, termasuk:
• drawable: Untuk gambar dan ikon
• layout: Untuk file sumber daya layout
• menu: Untuk item menu
• mipmap: Untuk kumpulan ikon aplikasi yang sudah dihitung dan dioptimalkan yang digunakan
oleh Peluncur
• values: Untuk warna, dimensi, string, dan gaya (atribut tema)
File Sumber Daya
Warna

Sumber daya warna berada di file colors.xml dalam folder values di dalam folder res saat
menggunakan Project: Tampilan Android. Anda bisa mengedit file ini secara langsung:
Contoh Layout

Pada Kasus ini kita akan membuat layout login menggunakan RelativeLayout dan
LinearLayout
Menggunakan Linear Layout

Kita buat terlebih dahulu container / wadahnya dengan orientasi elemen ke bersusun ke
bawah (vertikal)

Nantinya kita akan memasukkan elemen-elemen form login seperti TextView, Button dan
EditText
Menggunakan Linear Layout
Kita buat sebuah Teks dengan (rata tengah, jarak ke atas 30dp, teks tebal, bertuliskan
“Form Login”)
Menggunakan Linear Layout
Selanjutnya kita tambahkan sebuah inputan di bawah Teks Username margin kiri dan
kanan = 30dp, margin atas = 10dp dan menampilkan placeholder “Masukkan username
anda”
Menggunakan Linear Layout

Selanjutnya anda
dapat menyalin ke dua
elemen tadi untuk
bagian passwordnya,
kemudian sesuaikan
yang perlu disesuaikan
seperti pada tampilan
berikut.
Menggunakan Linear Layout

Selanjutnya kita akan menambahkan tombol dengan teks “LOGIN” dengan margin kiri
dan kanan 30dp, margin atas 20dp
Menggunakan Linear Layout

Untuk mengubah warna dari tombolnya tambahkan attribut xmlns:app di containernya

(LinearLayout) dan app:backgroundTint=“kode warna"
Menggunakan Relative Layout

Sesuai dengan Namanya, Layout ini relatif dengan elemen di sekitarnya.

Menggunakan Relative Layout

Sesuai dengan Namanya, Layout ini relatif dengan elemen di sekitarnya.

Kalau diperhatikan secara default penempatan

elemen di dalam relative layout yaitu sebelah kiri
atas (tanpa ada atribut pendukung)
Menggunakan Relative Layout
Selanjutnya kita tambahkan atribut lainnya agar hasilnya sama dengan Linear layout

Selanjutnya, lakukan konsep yang sama sampai

pada tombol Login
Menggunakan Relative Layout
Agar teks tersebut posisi awalnya berada di bawah teks “Form Login” maka perlu
ditambahkan atribut (below,above,left,right / bawah,atas,kiri,kanan)

Pada kasus ini kita menggunakan atribut “layout_below”

terhadap suatu elemen menggunakan ID, dalam hal ini
tulisan Form Login dengan ID “TeksJudul”.
Menggunakan Relative Layout
Menggunakan Relative Layout
INGAT !!

Ada banyak atribut dalam mendesain sebuah layout

sesuai dengan containernya. Silakan kalian explore agar

lebih paham dan familiar dengan atribut-atribut tersebut

Terima Kasih
Sampai Jumpa di Pertemuan Selanjutnya