Hai sobat, pada
artikel sebelumnya tentang perbedaan UI dan UX saya telah menjelaskan
pengertian UI dan UX, perbedaan UI dan UX, penerapan dan pengaruhnya. Dan pada
kesempatan kali ini saya akan menjelaskan tentang Layout pada Android.
Menurut website official Android, Layout dalam android
mendefinisikan struktur visual untuk antarmuka pengguna seperti UI sebuah
aktivitas atau widget aplikasi. Layout adalah class yang menampung komponen
yang ada pada layar, mengatur komonen dan membuatnya menjadi satu.
Layout
android memiliki bermacam macam tipe seperti linear layout, reative layout, dan
scrollview layout. Berikut penjelasan masing-masing tipe :
Linear Layout
Linear layout adalah view group yang menyusun komponen di
dalamnya di satu tata letak secara garis lurus, horizontal maupun vertical.
Untuk mengaturnya, sobat bisa menggunakan atribut android:orientation. Komponen
yang ada di dalamnya akan tersusun satu demi satu secara horizontal maupun
vertical. Berikut adalah contoh kode untuk membuat linear layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.blogsetyaaji.linearlayout.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Baris Pertama"
android:textSize="20sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Baris Kedua"
android:textSize="20sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Baris Pertama"
android:textSize="20sp"
android:paddingRight="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Baris Kedua"
android:textSize="20sp"/>
</LinearLayout>
</LinearLayout>
Dalam linear layout, terdapat konfigurasi atau atribut di
dalamnya seperti berikut ini :
- Orientation; untuk mengonfigurasi tampilan layout berdasarkan baris atau kolom atau horizontal atau vertical. Contoh sintaksnya yaitu : android:orientation=”vertical”
- Weight; atribut ini mengatur seberapa pentig komponen untuk berapa banyak ruang yang dibutuhkan untuk tampil di layar. Komponen yang memiliki kepentingan paling banyak dapat mengisi ruang yang tersisa.
Relative layout
Dengan relative layout, kita bisa mengatur objek sesuai atau
mengikuti objek lain, berbeda dengan linear layout yang objeknya saling
berurutan, relative layout bersifat lebih bebas. Berikut contoh sintaks untuk
relative layout :
<?xml version="1.0" encoding="utf-8"?>
<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"
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="com.blogsetyaaji.relativelayout.MainActivity">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="ATAS" />
<Button
android:id="@+id/btnbawah"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="BAWAH" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/btnbawah"
android:layout_alignParentRight="true"
android:text="KANAN" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/btnbawah"
android:layout_alignParentLeft="true"
android:text="KIRI" />
</RelativeLayout>
Untuk objek yang berada di linear layout, sobat bisa
menggunakan atribut layout sesuai kebutuhan seperti atribut
android:layout_alignParentLeft, android:layout_above, android:layout_toLeftOf
dan sebagainya.
Frame Layout
Frame layout biasanya digunakan untuk menampilkan satu
komponen, apabila sobat ingin menampilkan satu komponen lebih, maka frame
layout akan menampilkannya secara tumpang tindih. Berikut contoh sintaksnya :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
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="com.blogsetyaaji.framelayout.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="I am in here"
android:gravity="center"
android:textSize="24sp" />
</FrameLayout>
Absolute layout
Absolute layout digunakan untuk mengatur objek berdasarkan
koordinat x dan y, x untuk ke samping dan y untuk ke bawah. Contoh sintaksnya
seperti berikut ini :
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout 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"
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="com.blogsetyaaji.absolutelayout.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 1"
android:textSize="20sp"
android:layout_x="30dp"
android:layout_y="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 2"
android:textSize="20sp"
android:layout_x="50dp"
android:layout_y="50dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 3"
android:textSize="20sp"
android:layout_x="70dp"
android:layout_y="100dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tombol"
android:layout_x="100dp"
android:layout_y="150dp" />
</AbsoluteLayout>
Scrollview layout
Scrollview layout digunakan untuk mengatur atau menampikan
kumpulan objek yang banyak dan detail serta objek yang melebihi ukuran layar.
Dengan menggunakan scrollview, sobat bisa menggeser layar ke bawah atau ke
samping tergantung atribut orientasi yang digunakan, vertcal atau horizontal. Berikut
contoh sintaksnya :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
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="com.blogsetyaaji.scrollviewlayout.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Baris Satu" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Baris Dua" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Baris Tiga" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tombol"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Baris Lima" />
</LinearLayout>
</ScrollView>
Dari beberapa layout di atas, maka sobat juga bisa
menggabungkannya menjadi satu tampilan sesuai kebutuhan sobat. Sebagai contoh
yang saya buat di bawah ini :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
tools:context="com.blogsetyaaji.layout.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="KIRI" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="KANAN" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:text="TENGAH" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="250dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#03A9F4"
android:gravity="center_horizontal"
android:text="Baris Kesatu"
android:textColor="#ffffff"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#00BCD4"
android:gravity="center_horizontal"
android:text="Baris Kedua"
android:textColor="#ffffff"
android:textSize="30sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/Linear2"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#F48FB1"
android:gravity="center_horizontal"
android:text="Baris Pertama"
android:textColor="#ffffff"
android:textSize="30sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#F06292"
android:gravity="center_horizontal"
android:text="Baris Kedua"
android:textColor="#ffffff"
android:textSize="30sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#EC407A"
android:gravity="center_horizontal"
android:text="Baris Ketiga"
android:textColor="#ffffff"
android:textSize="30sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#E91E63"
android:gravity="center_horizontal"
android:text="Baris Keempat"
android:textColor="#ffffff"
android:textSize="30sp" />
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#FFEB3B"
android:gravity="center"
android:text="Farame Layout"
android:textColor="#212121"
android:textSize="30sp" />
</FrameLayout>
<AbsoluteLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#009688">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="10dp"
android:layout_y="20dp"
android:text="Text Absolut 1"
android:textColor="#ffffff"
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="95dp"
android:layout_y="100dp"
android:text="Text Absolut 2"
android:textColor="#ffffff"
android:textSize="30sp" />
</AbsoluteLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>
Hasil dari contoh kode di atas akan seperti gambar berikut
ini :
Pada intinya semua jenis layout memiliki fungsi dan bagian masing-masing, tergantung kebutuhan kita. Sekian penjelasan singkat saya tentang tutorial dan macam layout pada android, semoga membantu sobat yang sedang belajar seperti saya.
Pada intinya semua jenis layout memiliki fungsi dan bagian masing-masing, tergantung kebutuhan kita. Sekian penjelasan singkat saya tentang tutorial dan macam layout pada android, semoga membantu sobat yang sedang belajar seperti saya.