Bagus Budi Prakoso, S.
Pemograman perangkat Bergerak (Mengenal Layout di Pemograman Android)
Kompetensi Dasar
3.26. Memahami teknik desain aplikasi mobile
4.26. Menyajikan desain aplikasi berbasis mobile
Materi pokok
Layout adalah komponen dasar dalam pembentukan UI dan merupakan container utama untuk
komponen-komponen lain pada tampilan aplikasi Android. Dalam satu tampilan aplikasi Android
bisa terdapat lebih dari satu Layout dengan adanya sebuah file XML layout sebagai parent, dan
dimungkinkan adanya nested layout dalam satu file UI XML. Layout menentukan struktur untuk
antarmuka pengguna di aplikasi Anda, seperti dalam suatu aktivitas. Semua elemen dalam layout
dibuat menggunakan hierarki objek View dan ViewGroup. Tampilan biasanya mengga mbar
sesuatu yang dapat dilihat dan berinteraksi dengan pengguna. Sedangkan ViewGroup adalah
wadah tak terlihat yang mendefinisikan struktur layout untuk View dan objek ViewGroup lainnya,
seperti yang ditunjukkan pada gambar 1.
Gambar 1. Ilustrasi hierarki tampilan, yang mendefinisikan layout UI
Objek View biasanya disebut "widget" dan bisa menjadi salah satu dari banyak subclass, seperti
Button atau TextView. Objek ViewGroup yang biasanya disebut "layouts" bisa menjadi salah satu
dari banyak jenis yang menyediakan struktur layout yang berbeda, seperti LinearLayout atau
Constraint Layout.
Bagus Budi Prakoso, S.T
Terdapat 2 cara untuk mendeklarasikan layout:
Deklarasikan elemen UI dalam XML. Android menyediakan kosakata XML langsung yang sesuai
dengan kelas dan subkelas View, seperti untuk widget dan layout. Bisa juga menggunakan Layout
Editor Android Studio untuk membangun layout XML Anda menggunakan antarmuka drag-and-
drop. Membuat instance elemen layout pada waktu proses, membuat objek View dan ViewGroup
(dan memanipulasi propertinya) secara terprogram. Mendeklarasikan UI dalam XML
memungkinkan untuk memisahkan presentasi aplikasi dari kode yang mengontrol method.
Menggunakan file XML juga memudahkan untuk memberikan layout yang berbeda untuk
berbagai ukuran dan orientasi layar (dibahas lebih lanjut dalam Mendukung Ukuran Layar yang
Berbeda). Kerangka Android memberikan fleksibilitas untuk menggunakan salah satu atau kedua
metode ini untuk membangun User Interface. Misalnya, bisa mendeklarasikan layout default
aplikasi dalam XML, lalu memodifikasi layout pada waktu proses.
Terdapat empat jenis Layout utama di Android :
Linear Layout
Relative Layout
Frame Layout
Grid Layout
dari 4 macam layout ini Perbedaanya adalah pada penempatan komponen-komponen (child view)
di dalamya, sebelum melanjutkan penjelasan mengenai Layout ini ada baikannya kita belajar
terlebih dahulu mengenai pengelolaan Tampilan di dalam Android, di dalam Android tampila n
(Views) secara garis besar menggunakan beberapa komponen tampilan yaitu
TextView = digunakan untuk menampilkan text
ImageView = digunakan untuk menampilkan image (gambar)
Button = diunkan untuk menampilkan tombol
CheckBok = digunakan untuk meampilkan cek bok/pilihan
EditText = digunakan untuk menginfutkan text kepada sistem
ProgressBar
ImageButton
DatePicker
WebView
Macam-macam View tersebut dapat kita kelompokkan menjadi satu wadah, yaitu dengan
menggunakanViewGroup.
sebelum ke pembahasan ViewGrup bagai mana cara membedakan tampilan pada Android coba
perhatikan gambar di bawah ini
Bagus Budi Prakoso, S.T
Coba kalian tebak ada berapa type tampilan pada halaman di atas?
oke pada gambar di bawah ini saya akan menjelaskanya
pada gambar di atas terdapat 5 type view yakni 1 ImageView 3 TextView dan 1 Button
cukup mudah kan menebaknya.
Bagus Budi Prakoso, S.T
oke lanjut kepada pembelajaran berikutnya.
pertanyaanya bagaimana cara menampilkan seperti gambar tampilan di atas, ?
tampilan android biasanya di kelola oleh bahasa XML, apa itu XML? XML kepanjangan dari
Extensible Markup Language, XML termasuk bahasa markup ,yang diprakarsai oleh W3C ,selaku
Konsorsium World Wide Web, yang dimana XML , merupakan versi lanjutan dari
HTML(Hypertext Markup Language). Jika HTML ,hanya menampilkan informasi ,XML
memproses dan mengolah informasi. Informasi ini bisa kita sebut sebagai element. Setiap awalan
element ,akan di awali dengan tag pembuka seperti < dan harus di akhiri dengan tag penutup />.
Setiap element mempunyai detail-detail informasi ,yang biasa di sebut atribut. Masing-mas ing
atribut , mempunyai nama dan value atau nilai. Sebagai contoh ,penerapan XML pada Aplikasi
Android, untuk lebih jelasnya bisa dilihat,
oke kembali ke bahasan utama kita yakni tampilan xml di android yang populer di gunakan di
setiap aplikasi
contoh format pengkodean XML
Name of view / component = TextView
Opened using <, and closed using />; self-closing tag or separate-closing tag
Attribute name → interface characteristic, position, etc. in Android Smartphone
Actual values → using quotation marks (“)
Use exact command
Bagus Budi Prakoso, S.T
ViewGroup merupakan SubClass dari View yang bertugas sebagai wadah dari semua instance dari
View. Contohnya antara lain :
LinearLayout
RelativeLayout
ListView
GridView
Contoh Penggunaan Lainya
TABLE LAYOUT
ABSOLUTE LAYOUT
FRAME LAYOUT
SCROLL VIEW
Daftar diatas merupakan ViewGroup yang sering dipergunakan saja. Dari pengertian di atas kita
bisa simpulkan bahwa activity_main.xml mempunyai ViewGroup RelativeLayout yang berisikan
TextView.
Gambar 1. Ilustrasi hierarki tampilan, yang mendefinisikan tata letak UI
1. Linear Layout
Contoh Tampilan Dari Linier Layout
Contoh penggunaan Kode
Linear Layout Horizontal
Bagus Budi Prakoso, S.T
<?xml version="1.0" encoding="utf-8"?>
<!-Setting the linear layout with horizontal orientation-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<!-- Button1 -->
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Simple" />
<!-- Button2 -->
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Codestuffs" />
<!-- Button3 -->
<Button
android:id="@+id/button3"
android:layout_width="0dip"
android:layout_height="0dip"
android:text=".com"
android:layout_weight="1"/>
</LinearLayout>
Linear Layout Vertical
<?xml version="1.0" encoding="utf-8"?>
<!-Setting the linear layout with vertical orientation-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- Button1 -->
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Simple" />
<!-- Button2 -->
Bagus Budi Prakoso, S.T
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Codestuffs" />
<!-- Button3 -->
<Button
android:id="@+id/button3"
android:layout_width="0dip"
android:layout_height="0dip"
android:text=".com"
android:layout_weight="1"/>
</LinearLayout>
Coba Kalian Uji Coba Kode Di atas di android Studio atau bisa di Android Visualizer
Klik Di Sini untuk menuju ke Android Visualizer
2. Relative Layout
Gambaran Relative Layout
Bagus Budi Prakoso, S.T
Contoh Tampilan
<?xml version="1.0" encoding="utf-8"?>
<!-Setting the relative layout with horizontal orientation--><RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<!-- Button1 -->
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Simple"/>
<!-- Button2 -->
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Codestuffs"<!-- Use of rightof to place button2 to right of button 1 -->
android:layout_toRightOf="@+id/button1"/>
Bagus Budi Prakoso, S.T
<!-- Button3 -->
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=".com"<!-- Use of below to place button3 below button 2 -->
android:layout_below="@+id/button2"/>
</RelativeLayout>
Coba Kalian Uji Coba Kode Di atas di android Studio atau bisa di Android Visualizer
Klik Di Sini untuk menuju ke Android Visualizer
untuk gambaran Layout yang lainya
