Teori Singkat Tata letak Android adalah kelas yang menangani pengaturan cara anaknya muncul di layar. Apa pun yang merupakan View (atau mewarisi dari View) bisa menjadi turunan dari sebuah layout. Semua tata letak mewarisi dari ViewGroup (yang diwarisi dari View) sehingga Anda bisa menumpuk tata letak. Anda juga dapat membuat tata letak kustom Anda sendiri dengan membuat kelas yang diturunkan dari ViewGroup. Gambar di bawah mengilustrasikan hierarki pewarisan antar tampilan di Android.
Gambar Android View Class
- Pengenalan Layout
Gambar Struktur Hirarki Layout
ViewGroup dapat juga disebut dengan layout karena ViewGroup mengelola tampilan child
dengan cara khusus dan umumnya digunakan sebagai root view. Berikut jenis-jenis layout
yang dapat kita gunakan dalam android :
A. LinearLayout : Viewgroup yang childnya diposisikan dan disejajarkan secara horizontal
atau secara vertikal
B. RelativeLayout : Viewgroup yang childnya diposisikan dan disejajarkan relatif terhadap
tampilan komponen dalam lainnya.
C. ConstrainLayout : Viewgroup yang childnya menggunakan titik jangkar, tepi, dan
panduan untuk mengontrol posisi tampilan relatif terhadap komponen lain di layout.
ConstrainLayout didesain untuk mempermudah saat menyeret dan melepaskan
tampilan di editor layout.
D. AbsoluteLayout : ViewGroup yang childnya disusun ke dalam baris dan kolom
E. FrameLayout : Viewgroup childnya bertumpuk.
F. GridLayout : Viewgroup childnya ditempatkan dalam kotak persegi panjang yang bisa
digulir.
Gambar macam-macam Layout
➢Atribut umum Viewgroup
➢ layout_height : untuk mengatur tinggi dari View
➢ layout_width : untuk mengatur lebar dari View
➢ layout_margin : untuk mengatur extra space di semua sisi luar View.
➢ layout_marginTop : mengatur extra space sisi atas layout.
➢ layout_marginBottom :mengatur extra space sisi bawah layout.
➢ layout_marginLeft : mengatur extra space sisi kiri layout.
➢ layout_marginRight : mengatur extra space sisi kanan layout.
➢ layout_gravity : menentukan posisi child View.
➢ layout_weight : menentukan seberapa banyak extra space dialokasikan.
➢ layout_x : menentukan koordinat x layout.
➢ layout_y : menentukan koordinat y layout.
➢ paddingLeft : mengisi padding kiri layout.
➢ paddingRight : mengisi padding kanan layout.
➢ paddingTop : mengisi padding atas layout.
➢ paddingBottom : mengisi padding bawah layout.
Menggunakan LinearLayout
Android LinearLayout adalah grup tampilan yang meratakan semua Child view baik
secara vertikal maupun horizontal. LinearLayout mengelompokkan child view-nya dengan
menampilkan dalam satu baris atau kolom (vertikal atau horizontal). Viewgroup biasa
digunakan untuk membuat form.
Gambar LinearLayout vertikal / horizontal
|
NO |
Attribute & Description |
|
1 |
android:id |
|
Ini adalah ID yang secara unik mengidentifikasi layout. |
|
|
2 |
android:baselineAligned |
|
Ini harus berupa nilai boolean, baik "true" atau
"false" dan mencegah tata letak agar tidak menyelaraskan baseline anak-anaknya |
|
|
3 |
android:baselineAlignedChildIndex |
|
baseline
linier layout adalah bagian
dari tata letak lain yang
diratakan garis dasar, ia dapat
menentukan turunannya
mana yang akan diratakan garis dasar. |
|
|
4 |
android:divider |
|
Ini dapat digambar untuk digunakan sebagai pembatas vertikal antar tombol. Anda menggunakan nilai warna, dalam bentuk "#rgb", "#argb",
"#rrggbb", or "#aarrggbb". |
|
|
5 |
android:gravity |
|
Ini menentukan bagaimana sebuah objek harus memposisikan isinya, pada sumbu X dan Y.
Nilai yang memungkinkan adalah
top, bottom, left, right, center, center_vertical, center_horizontal dll. |
|
|
NO |
Attribute & Description |
|
6 |
android:orientation |
|
Ini menentukan arah pengaturan dan Anda akan menggunakan "horizontal" untuk
baris, "vertikal"
untuk kolom. Standarnya horizontal. |
|
|
7 |
android:weightSum |
|
jumlah dari child weight |
Jadi di dalam setiap baris/kolom hanya ada 1 objek (widget) yang kita tempatkan. di Linear
Layout ini ada dua jenis, yaitu :
1. Vertical Linear Layout : Apabila user menempatkan 1 widget (objek) per baris
2. Horizontal Linear Layout : Apabila user menempatkan 1 objek per kolom.
Semua isi dari Linear Layout akan ditampilkan berdasarkan urutan penulisan mereka di file
layout. Contoh ini akan memandu Anda melalui langkah-langkah sederhana untuk
menunjukkan cara membuat aplikasi Android Anda sendiri menggunakan LinearLayout.
Ikuti langkah-langkah berikut
1. Pertama jalankan aplikasi IDE Android Studio, caranya :
a. Pilih Start → Android Studio
b. Pilih → Start a new Android Studio Project
c. Pilih → Empty Activity → Next
Configure Your Project
<?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="wrap_content" android:orientation="vertical" tools:context=".MainActivity"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#6645C0" android:padding="16dp" android:text="@string/vertical_1" android:textColor="@android:color/white" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#26A96C" android:padding="16dp" android:text="@string/vertical_2" android:textColor="#3E2723" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#6645C0" android:padding="16dp" android:text="@string/horizontal_1" android:textColor="@android:color/white" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00ffff" android:padding="16dp" android:text="@string/horizontal_2" android:textColor="#616161" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#3322aa" android:padding="16dp" android:text="@string/horizontal_3" android:textColor="@android:color/white" /> </LinearLayout> </LinearLayout>
3. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini
4. Kita akan mencoba Kembali membuat App menggunakan LinearLayout yang kedua dengan menggunakan button (2) Pertama jalankan aplikasi IDE Android Studio, caranya :
a. Pilih Start → Android Studio
b. Pilih → Start a new Android Studio Project
c. Pilih → Empty Activity → Next
Configure Your Project
5. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script
activity_main.xml menjadi seperti gambar di bawah ini.
<?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:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
tools:context=".MainActivity">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/to"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="subject"/>
<EditText
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:hint="message"/>
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:hint="send"/>
</LinearLayout>
6. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini
B. Menggunakan RelativeLayout
Android RelativeLayout memungkinkan Anda menentukan bagaimana child views
diposisikan secara relatif satu sama lain. Posisi setiap tampilan dapat ditentukan sebagai
relatif terhadap elemen saudara atau relatif terhadap parent
Gambar RelativeLayout Design
Relative Layout adalah layout yang penataannya ini adalah penataan yang
menempatkan widget-widget didalamnya seperti layer, sehingga sebuah widget dapat
berada di atas/di bawah widget lainnya atau dengan kata lain Relative merupakan layout
yang penataannya lebih bebas (Relative) sehingga bisa di tata di mana saja. Dalam sebuah
Relative Layout, kita memposisikan view di dalamnya relatif terhadap view lain atau si
parent view-nya. Atribut yang bisa dipakai untuk memposisikan suatu View di dalam
RelativeLayout adalah :
✓ Posisi berdasarkan View lain yang satu level: layout_above, layout_below,
layout_toLeftOf, layout_toRightOf
✓ Posisi berdasarkan parent: android:layout_centerHorizontal,
android:layout_centerVertical
✓ Posisi penjajaran berdasarkan View lain yang satu level: layout_alignTop,
layout_alignBottom, layout_alignLeft, layout_alignRight, layout_alignBaseline
✓Posisi penjajaran berdasarkan parent: layout_alignParentTop,
layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight.
Jadi intinya kita dapat secara bebas mengatur objek objek yang kita tempatkan
apabila kita menggunakan Relative Layout.
Contoh Program dibawah ini akan memandu Anda melalui langkah-langkah sederhana
untuk menunjukkan cara membuat aplikasi Android Anda sendiri menggunakan
RelativeLayout. Ikuti langkah-langkah berikut
1. Pertama jalankan aplikasi IDE Android Studio, caranya :
a. Pilih Start → Android Studio
b. Pilih → Start a new Android Studio Project
c. Pilih → Empty Activity → Next
Configure Your Project
2. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script
activity_main.xml menjadi seperti gambar di bawah ini
<?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"
tools:context=".MainActivity">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Tengah"
android:textSize="18sp"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerHorizontal="true"
android:text="K Atas"
android:textSize="18sp"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="T Atas"
android:textSize="18sp"/>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="true"
android:text="K Atas"
android:textSize="18sp"/>
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="K Tengah"
android:textSize="18sp"/>
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="K Tengah"
android:textSize="18sp"/>
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:text="K Bawah"
android:textSize="18sp"/>
<Button
android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="T Bawah"
android:textSize="18sp"/>
<Button
android:id="@+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:text="K Bawah"
android:textSize="18sp"/>
</RelativeLayout>
3. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini
Tidak ada komentar:
Posting Komentar