TUTORIAL MEMBUAT APLIKASI SEDERHANA DENGAN ANDROID STUDIO DENGAN BEBERAPA KOMPONEN LAYOUTING (LINEARLAYOUT, RELATIVELAYOUT, TABLELAYOUT, ABSOLUTE LAYOUT)
v 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 dengan membuat kelas yang diturunkan dari
ViewGroup. Gambar di bawah mengilustrasikan hierarki pewarisan antar tampilan
di Android
Gambar 1.1 View Class In Android
v Pengenalan Layout
v 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 dengan membuat kelas yang diturunkan dari ViewGroup. Gambar di bawah mengilustrasikan hierarki pewarisan antar tampilan di Android
|
| Gambar 1.1 View Class In Android |
Blok penyusun dasar untuk antarmuka pengguna adalah objek View yang dibuat
dari kelas View dan menempati area persegi panjang di layar dan bertanggung jawab
untuk menggambar dan menangani event. View adalah kelas dasar untuk widget, yang
digunakan untuk membuat komponen UI interaktif seperti tombol, bidang teks, dll.
ViewGroup adalah subkelas View dan menyediakan wadah tak terlihat yang
menampung Tampilan lain atau ViewGroup lain dan menentukan properti tata letaknya.
Pada tingkat ketiga kami memiliki tata letak berbeda yang merupakan subkelas dari
kelas ViewGroup dan tata letak tipikal mendefinisikan struktur visual untuk antarmuka
pengguna Android dan dapat dibuat baik pada waktu proses menggunakan View
 |
| Gambar 1.2 Struktur Hirarki Layout |
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
 |
Gambar 1.3 Macam-Macam Layout |
Ø 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.
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 1.4 LinearLayout Vertical / Horizontal |
 |
| Gambar 1.5 Contoh Hasil Run |
Okey, kita langsung saja ke Tutorialnya :
1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :
a. Pilih Start → Android Studio
b. Pilih → Start a new Android Studio Project
c. Pilih → Empty Activity → Next
d. Configure Your Project → Finish
Keterangan :
Name : modul6_LinearLayout
Package Name : rikiwahyudirw.blogspot.com
Save Location : D:\2021\semester6\ti1\Riki Wahyudi\
modul6_LinearLayout
Language : Java
Minimum SDK : API 14
2. Maka akan muncul tampilan IDE Android Studio, Setelah itu Ketikan script pada file
3. Kemudian Jalankan di emulator (RUN) Maka akan tampil seperti gambar
di bawah ini
|
| Gambar 1.6 Contoh Hasil Run |
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 1.7 Contoh Hasil Run |
Okey, kita langsung saja ke Tutorialnya :
1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :
a. Pilih Start → Android Studio
b. Pilih → Start a new Android Studio Project
c. Pilih → Empty Activity → Next
d. Configure Your Project → Finish
Keterangan :
Name : modul6_LinearLayout2
Package Name : rikiwahyudirw.blogspot.com
Save Location : D:\2021\semester6\ti1\Riki Wahyudi\
modul6_LinearLayout2
Language : Java
Minimum SDK : API 14
2. Maka akan muncul tampilan IDE Android Studio, Setelah itu Ketikan script pada file
3. Kemudian Jalankan di emulator (RUN) Maka akan tampil seperti gambar
di bawah ini
 |
| Gambar 1.8 Hasil Run |
v Menggunakan Relative Layout
Android RelativeLayout memungkinkan Anda menentukan bagaimana child views
di posisikan secara relatif satu sama lain. Posisi setiap tampilan dapat ditentukan sebagai
relatif terhadap elemen saudara atau relatif terhadap parent.
 |
| Gambar 2 Relative Layout |
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.
 |
| Gambar 2.1 Contoh Hasil Run |
Okey, kita langsung saja ke Tutorialnya :
1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :
a. Pilih Start → Android Studio
b. Pilih → Start a new Android Studio Project
2. Maka akan muncul tampilan IDE Android Studio, Setelah itu Ketikan script pada file
di bawah ini
 |
| Gambar 2.2 Hasil Run |
di posisikan secara relatif satu sama lain. Posisi setiap tampilan dapat ditentukan sebagai
relatif terhadap elemen saudara atau relatif terhadap parent.
RelativeLayout2
 |
| Gambar 2.3 Contoh Hasil Run |
Okey, kita langsung saja ke Tutorialnya :
1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :
a. Pilih Start → Android Studio
b. Pilih → Start a new Android Studio Project
c. Pilih → Empty Activity → Next
d. Configure Your Project → Finish
Keterangan :
Name : modul6_RelativeLayout2
Package Name : rikiwahyudirw.blogspot.com
Save Location : D:\2021\semester6\ti1\Riki Wahyudi\
modul6_RelativeLayout2
Language : Java
Minimum SDK : API 14
2. Maka akan muncul tampilan IDE Android Studio, Setelah itu Ketikan script pada file
di bawah ini
(tampilan antar muka )
aplikasi android dengan berdasarkan Baris dan Kolom. Layout ini
digunakan untuk keperluan
tertentu saja karena kebanyakan pembangunan tampilan antar
muka lebih sering
memanfaatkan Relative Layout dan Linear Layout.
 |
| Gambar 3 Table Layout |
menampilkan elemen View child dalam baris dan kolom
untuk mengatur semua elemen
child menjadi baris dan kolom dan tidak menampilkan
garis batas di antara baris, kolom
atau cells. Cara kerja TableLayout hampir mirip dengan
tabel HTML dan berisi kolom
sebanyak baris dengan cells terbanyak.
Table Layout terdiri dari:
1)
Row/ baris pada dasarnya digunakan untuk menyimpan satu jenis record, hanya
satu informasi yang dapat disimpan.
2) Kolom adalah sub
bagian terbagi dari setiap baris dan satu baris dapat menampung
beberapa jenis kolom.
Setiap kolom terdiri dari jenis informasi yang berbeda mengenai baris tersebut
.Beberapa tag pada Table Layout :
1) TableLayout : Tag
pembuka untuk menggunakan TableLayout
2) TableRow : Tag untuk
membuat Baris
Table Layout
1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :
a. Pilih Start → Android Studio
b. Pilih → Start a new Android Studio Project
di bawah ini
(tampilan antar muka ) aplikasi android dengan berdasarkan Baris dan Kolom. Layout ini
digunakan untuk keperluan tertentu saja karena kebanyakan pembangunan tampilan antar
muka lebih sering memanfaatkan Relative Layout dan Linear Layout.
Table Layout2
1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :
a. Pilih Start → Android Studio
b. Pilih → Start a new Android Studio Project
c. Pilih → Empty Activity → Next
d. Configure Your Project → Finis
Keterangan :
Name : modul6_TableLayout2
Package Name : rikiwahyudirw.blogspot.com
Save Location : D:\2021\semester6\ti1\Riki Wahyudi\
modul6_TableLayout2
Language : Java
Minimum SDK : API 14
di bawah ini
tersebut. Atribut yang digunakan adalah layout_x dan
layout_y. Android AbsoluteLayout
digunakan ketika komponen UI di layar diposisikan pada
posisi mereka mutlak sehubungan
dengan asal di sudut kiri atas layout. Kita perlu
menentukan x dan y koordinat posisi masing-
masing komponen pada layar. AbsoluteLayout sudaj tidak
direkomendasikan karena
membuat UI tidak fleksibel, sebenarnya AbsoluteLayout
sudah jarang digunakan.
Berikut ini adalah atribut yang paling penting yang
digunakan dalam layout ini:
➢ android: id : ini adalah ID yang unik
mengidentifikasi tata letak
➢ android: foreground : ini
mendefinisikan ditarik untuk menarik atas konten dan nilai yang mungkin dapat
menjadi nilai warna, dalam bentuk “#rgb”, “#argb”, “#rrggbb”, atau “#aarrggbb”
➢ android:
foregroundGravity : Mendefinisikan gravitasi untuk diterapkan pada ditarik latar
depan. Default gravitasi untuk mengisi. Nilai yang mungkin adalah atas, bawah, kiri,
kanan, tengah, center_vertical, center_horizontal dll
➢ android: measureAllChildren : Menentukan apakah untuk mengukur semua anak atau hanya orang-orang di negara terlihat atau tidak terlihat saat mengukur. Default ke false
Absolute Layout
 |
| Gambar 4.1 Contoh Hasil Run |
1. Pertama kita jalankan aplikasi IDE Android Studio, caranya :
a. Pilih Start → Android Studio
b. Pilih → Start a new Android Studio Project
0 Komentar