Oke guyss pada materi lanjutan ini kita akan membahas materi Pengenalan Layouting Pada Android IDE Studio .
❖ Pengenalan Layout
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.
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.
Belum afdhal rasanya kalau kita tidak mempraktekkan jenis2 layout yang diatas , mari kita praktekkan
A. LinearLayout
Langkah - langkahnya :
1. Silahkan buka aplikasi android studio yang sudah di install:Create new project > EmptyActivity
2. Configure new project
Name → LinearLayout
Package Name →disini saya menggunakan url blog saya searchpediaa.blogspot.com lalu di ikuti
nama project LinearLayout
Save Location → C:\Data\Kuliah\Semester6\PAB\Pertemuan6\LinearLayout
Language → Java
Minimum API Level → API 16 → Klik Finish
3. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml
menjadi seperti gambar di bawah ini :
4. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini :
5. Kita akan mencoba Kembali membuat App menggunakan LinearLayout yang kedua
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
Kemudian Configure your project
Name → LinearLayout2
Package Name →disini saya menggunakan url blog saya searchpediaa.blogspot.com lalu di ikuti
nama project LinearLayout2
Save Location → C:\Data\Kuliah\Semester6\PAB\Pertemuan6\LinearLayout2
Language → Java
Minimum API Level → API 16 → Klik Finish
6. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml
menjadi seperti gambar di bawah ini :
7. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini :
B. RelativeLayout
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.
berikut adalah tutorialnya :
1. Hampir sama dengan seperti cara diatas kita membuat project baru lagi dengan memberi nama
RelativeLayout
2. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml
menjadi seperti gambar di bawah ini :
3. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini :
4. Kita akan mencoba Kembali membuat App menggunakan RelativeLayout yang kedua
5. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml
menjadi seperti gambar di bawah ini :
6. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini :
Jadi intinya kita dapat secara bebas mengatur objek objek yang kita tempatkan
apabila kita menggunakan Relative Layout.
C. Table Layout
Table Layout adalah Layout yang digunakan untuk membangun user interface (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.
Berikut adalah langkah-langkahnya :
1. Hampir sama dengan seperti cara diatas kita membuat project baru lagi dengan memberi nama
TableLayout
2. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml menjadi seperti gambar di bawah ini :
3. Jika di lihat menggunakan View Design + Blueprint akan tampil seperti gambar di bawah
ini. Setelah itu coba di run menggunakan emulator :
4. Kita akan mencoba Kembali membuat App menggunakan TableLayout yang kedua :
5. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml
menjadi seperti gambar di bawah ini :
6. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini :
D. Absolute Layout
Absolute Layout menggunakan angka/koordinat untuk mengatur si widget 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
Beberapa poin penting untuk dicatat:
*FrameLayout bisa menjadi lebih berguna bila unsur-unsur tersembunyi dan ditampilkan pemrograman Jika gravitasi tidak diatur maka teks akan muncul di kiri atas layer
*Kelas ini tidak berlaku lagi di tingkat API 3. Gunakan FrameLayout,
RelativeLayout atau custom layout lain sebagai gantinya.
Contoh Program dibawah ini akan memandu Anda melalui langkah-langkah sederhana untuk menunjukkan cara membuat aplikasi Android Anda sendiri menggunakan AbsoulteLayout. Ikuti langkah-langkah berikut :
1. Hampir sama dengan seperti cara diatas kita membuat project baru lagi dengan memberi nama
AbsoluteLayout
2.Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml menjadi seperti gambar di bawah ini :
3. Jika di lihat menggunakan View Design + Blueprint akan tampil seperti gambar di bawah
ini. Setelah itu coba di run menggunakan emulator
Coba kalian perhatikan, atribut layout_x digunakan untuk mengatur koordinat x,
yaitu jarak sebuah objek yang bisa kita geser ke kiri dan ke kanan, sedangkan atribut
layout_y digunakan untuk mengatur koordinat y, yaitu jarak sebuah objek yang bisa kita
geser ke atas dan ke bawah.
Demikianlah materi lanjutan part IV kali ini semoga dapat bermanfaat
Komentar
Posting Komentar