PENGENALAN KOMPONEN UI LANJUTAN PART V

April 29, 2021

PENGENALAN KOMPONEN UI LANJUTAN PART V

Pada lanjutan part V kita kembali mengenal komponen UI yaitu FrameLayout, ListView, GridView, ConstrainLayout . serta kita akan belajar penggunaan aplikasi resource pada android studio

❖ FrameLayout

FrameLayout adalah layout sederhana. layout ini bisa berisi satu atau lebih View child, dan mereka bisa tumpang tindih satu sama lain. Oleh karena itu, atribut android: layout_gravity digunakan untuk menemukan ViewChild. Untuk membuat FrameLayout pada layout.xml tersebut, kalian perlu menambahkan tag dan di akhri dengan tag , pada contoh berikut ini, kita akan membuat 2 buah Button, button kedua akan kita sisipkan pada button pertama, seperti berikut ini: Agar elemen UI didalam FrameLayout terlihat rapih serta tataletaknya bisa kalian atur sendiri, kalian dapat menggunakan beberapa atribut Berikut adalah atribut penting khusus untuk FrameLayout :

➢ android:layout_marginLeft: Untuk mengatur jarak (batasan) sudut kiri elemen UI pada elemen UI lainnya.

➢ android:layout_marginRight: Untuk mengatur jarak (batasan) sudut kanan elemen UI pada elemen UI lainnya.

➢ android:layout_marginTop: Untuk mengatur jarak (batasan) atas elemen UI pada elemen UI lainnya.

➢ android:layout_marginBottom: Untuk mengatur jarak (batasan) bawah elemen UI pada elemen UI lainnya.

➢ android:layout_gravity: Untuk mengatur posisi rata kanan, kiri, atas, bawah, center, center horizontal dan center vertical.

Seperti yang telah dijelaskan di atas FrameLayout merupakan jenis layout yang elemen UI didalamnya saling bertumpuk dengan elemen UI lain, urutan elemen UI menentukan urutan tampilan. pada contoh berikut ini, kita akan membuat 2 buah Button, button kedua akan kita sisipkan pada button pertama, seperti berikut ini:

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

Configure Your Project

'Name → FrameLayout

Package Name → ubah menjadi nama blog kalian masing-masing, di sini saya menggunakan url blog saya searchpediaa.blogspot.com lalu di ikuti nama project FrameLayout

Save Location → D:\Data\Kuliah\Semester6\PAB\Pertemuan7\ FrameLayout

Language → Java Minimum API Level → API 16 → Klik Finish

2. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml menjadi seperti gambar di bawah ini :

Maka akan terlihat seperti ini :

Agar elemen UI didalam FrameLayout terlihat rapih serta tata letaknya bisa kalian atur sendiri, kalian dapat menggunakan beberapa atribut berikut ini:

➢ android:layout_marginLeft : Untuk mengatur jarak (batasan) sudut kiri elemen UI pada elemen UI lainnya.

➢ android:layout_marginRight : Untuk mengatur jarak (batasan) sudut kanan elemen UI pada elemen UI lainnya.

➢ android:layout_marginTop : Untuk mengatur jarak (batasan) atas elemen UI pada elemen UI lainnya. ➢ android:layout_marginBottom : Untuk mengatur jarak (batasan) bawah elemen UI pada elemen UI lainnya.

➢ android:layout_gravity : Untuk mengatur posisi rata kanan, kiri, atas, bawah, center, center horizontal dan center vertical. Pada contoh berikutnya, edit kode pada layout.xml kalian menjadi seperti berikut :

maka akan terlihat seperti ini:

3. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini :

4. Kita akan mencoba Kembali membuat App menggunakan FrameLayout yang kedua (2) Pertama jalankan aplikasi IDE Android Studio, caranya seperti cara pada diatas

Selanjutnya : Configure Project Dan Finish

5. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml menjadi seperti gambar di bawah ini :

Lanjutan Syntax

6.Jalankan di emulator Maka akan tampil seperti gambar di bawah ini :

❖ ListView

Sebenarnya materi ini sudah sempat kita bahas di modul 5 tp tak mengapa kita bahas lagi karena materi ini masih berhubungan dengan materi Layouting yang sedang kita palajari di modul 6 & 7 ini:

ListView adalah salah satu widget yang digunakan untuk menampilkan data atau nilai dalam bentuk daftar/list, nilai atau data yang ditampilkan pada ListView tersebut didapat dari sebuah Array atau Database yang sudah ditentukan. ListView pada saat ini sudah tergantikan dengan RecyclerView yang memiliki konsep Material Design, karena lebih custom dan juga dapat mengatur tampilan layoutnya. Walaupun begitu, ListView masih banyak digunakan oleh programmer untuk membuat list/daftar item yang sederhana pada aplikasi mereka,

Membuat ListView Sederhana

ListView dikatakan sederhana atau komplek ditentukan oleh kompleksitas item dari ListView tersebut. Jika masing-masing item dari ListView menampilkan sebuah kata atau kalimat saja, maka ListView tersebut sederhana. Jika masing-masing item dari ListView memiliki isi yang komplek seperti item dari sebuah status jejaring sosial dimana pada masing-masing item memiliki foto profil, nama, waktu, status dan komentar, maka ListView tersebut adalah ListView komplek. Pembuatan ListView komplek dilakukan dengan Custom ListView

Pada contoh dibawah ini, kita akan membuat layout menggunakan listview Custom, Langkahnya seperti berikut ini:

1. Masih Sama seperti cara diatas kita membuat project baru :

2. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml menjadi seperti gambar di bawah ini :

3. Buka dan ubah script MainActivity.java menjadi seperti gambar di bawah ini :

Lanjutan script main.activity :

4. Jalankan di emulator Maka akan tampil seperti gambar di bawah ini :

❖ GridView

GridView adalah salah satu container, yang digunakan untuk menampilkan konten View, konten View dalam GridView akan tersusun bentuk kotak-kotak seperti sebuah rak lemari, yang dimana kita dapat menyimpan barang-barang. Penulisan coding beserta struktur datanya, hampir sama dengan ListViw, hanya saja data yang ditampilkan secara Grid atau Kotak-kotak.

Penjelasan pada atribut-atribut yang digunakan:

➢ android:columnWidth : Menentukan lebar tetap pada masing-masing kolom.

➢ android:gravity : Menentukan gravitasi di dalam setiap sel.

➢ android:verticalSpacing : Mendefinisikan default jarak vertikal antar baris.

➢ android:stretchMode : Mendefinisikan bagaimana kolom harus meregang untuk mengisi tersedia ruang kosong, jika ada.

➢ android:horizontalSpacing : Mendefinisikan default jarak horisontal antara kolom.

➢ android:numColumns : Menentukan berapa kolom yang akan ditampilkan. Pada contoh dibawah ini, kita akan membuat layout menggunakan GridView, Langkahnya seperti berikut ini:

1. Membuat project baru :

2. Maka akan Tampil IDE Android Studio, setelah itu Buka dan ubah script activity_main.xml menjadi seperti gambar di bawah ini :

3. Jika sudah kita copy gambar dari komputer ke folder res/drawable pada android studio :

Lalu paste pada res/drawable nya :

4. Selanjutnya kita akan buat file custom _grid.xml caranya pada tab project, klik kanan folder res/layout > New > Layout Resource File :

5. Selanjutnya mengedit custom_grid.xml. silahkan ikut script berikut :

6. Membuat file activity_zoom.xml, caranya sama seperti membuat custom_grid.xml, lalu ikuti syntx ini:

7. Selanjutnya kita buat lagi file ZoomActivity.java caranya pada tab project klik kanan folder java/(namapackage) lalu klik New>java Class

8. Selanjutnya buat lagi file GridAdapter.Java dengan cara yang sama seperti membuat ZoomActivity.java kita kembali membuat scrip ZoomActivity.java. silahkan ikuti syntax ini :

9. Kita membuat script pada GridAdapter.java . silahkan ikuti dibawah ini :

10. Berikutnya kita buat script mainactivity.java . silahkan ikuti dibawah ini :

11. Finnaly kita jalankan programnya . dan liat hasilnya :

Dan saat kita mengklik logonya , maka logo tersebut akan melakukan zooming :

❖ ConstrainLayout

Constraint layout merupakan layout terbaru dari android. Layout ini berbasis relative layout, namun mempunyai tingkat kemudahan yang lebih baik dalam penggunaannya. Hal ini dikarenakan, contraint layout dapat digunakan dengan baik pada design mode didalam Android Studio. Setiap item pada constraint layout memiliki 4 arah constraint yaitu top, left, right, dan bottom. Ke empat arah ini memiliki sebuah connection source yang dapat ditarik ke parent atau ke objek lain

Berbeda ceritanya dengan RelativeLayout. Saat kita ingin menentukan posisi atau menghubungkan dua buah view, kita bisa menggunakan attribute seperti layout_below atau layout_abovem nah untuk ConstraintLayout kita akan menggunakan constraint sebagai dasar dalam menentukan posisi agar sebuah view dapat terhubung dengan view lainnya sesuai harapan kita.

Langsung saja kita buat contoh programnya :

1. sama seperti cara diatas kita membuat project baru lagi :