Jetpack Compose - View - View Group - ListView - GridView - RecyclerView

1. Jetpack Compose

Jetpack Compose merupakan sebuah library UI baru dari Google yang pertama kali diperkenalkan pada event I/O 2019. Library ini bertujuan untuk mempermudah developer dalam membuat UI yang cantik dan responsif dengan kode yang lebih ringkas. Pada bulan Februari 2021 yang lalu, Jetpack Compose masuk ke tahap Beta. Ini artinya, Compose sudah API complete alias tidak akan ada perubahan atau penghapusan API yang berarti. Google menargetkan Compose untuk mencapai versi stabil 1.0 di akhir tahun.

Jetpack Compose adalah sebuah toolkit modern untuk membangun antarmuka pengguna (UI) dalam aplikasi Android menggunakan paradigma pemrograman deklaratif. Dalam Jetpack Compose, UI didefinisikan sebagai fungsi-fungsi yang menggambarkan tampilan aplikasi berdasarkan state atau data yang diberikan. Fitur - fitur yang ditawarkan oleh jetpack compose, diantaranya:

1.    Deklaratif

Dalam Jetpack Compose, Anda mendefinisikan tampilan UI sebagai fungsi-fungsi yang menggambarkan tampilan berdasarkan state atau data yang diberikan. Anda tidak perlu lagi mengelola view hierarki manual atau mengubah state secara langsung.

2.    Reaktif

Jetpack Compose secara otomatis melakukan pembaruan tampilan ketika state atau data yang digunakan dalam UI berubah. Ini memungkinkan pembuatan antarmuka yang responsif dan mudah dijaga konsistensinya.

3.    Komponen Terpisah

Jetpack Compose memisahkan UI menjadi komponen-komponen yang dapat digunakan kembali. Anda dapat membangun komponen UI yang terisolasi dengan fungsionalitas dan tampilan sendiri, dan menggabungkannya menjadi tampilan yang lebih kompleks.

4.    Live Preview

Jetpack Compose dilengkapi dengan fitur Live Preview yang memungkinkan Anda melihat tampilan UI secara real-time saat Anda mengedit kode. Ini membantu dalam pengembangan iteratif dan eksplorasi desain UI.

5.    Pendekatan Modern

Jetpack Compose menggunakan konsep dan bahasa pemrograman modern Kotlin, termasuk lambdas, ekstensi fungsi, nullable types, dan fitur-fitur Kotlin lainnya. Hal ini membantu dalam penulisan kode yang lebih ringkas, ekspresif, dan aman.

Langkah - langkah dalam pengimplementasian dari jetpack compose, diantaranya:

1.    Buat proyek baru dengan memilih template proyek yang mendukung Jetpack Compose. Misalnya, Anda dapat memilih "Empty Compose Activity" atau "Basic Compose Activity".

 

 

 

 

 

 

 

 

2.    Buka file MainActivity.kt

3.    Definisikan fungsi @Composable untuk mendefinisikan tampilan UI menggunakan komponen Jetpack Compose. Anda dapat menggunakan komponen-komponen seperti Text, Button, Column, Row, dan lainnya untuk membangun tampilan yang diinginkan.

(Referensi: https://developer.android.com/jetpack/compose)

2. View

View merupakan bagian dari hierarki tampilan (view hierarchy) yang terdiri dari berbagai jenis view yang saling berhubungan. Hierarki tampilan digunakan untuk mengatur dan mengelola tampilan dan interaksi antarmuka pengguna aplikasi Android. Dalam Android Studio, "View" merujuk pada komponen antarmuka pengguna (UI) yang dapat ditambahkan ke tata letak (layout) aplikasi Android Anda. View dapat berupa elemen seperti tombol, teks, gambar, kotak input, atau elemen lain yang memungkinkan pengguna berinteraksi dengan aplikasi. View dalam Android Studio dapat dibuat melalui kode Kotlin atau dengan file XML. Contoh pembuatan view dengan kode kotlin dan juga dengan file XML, diantaranya:

1.    Kotlin

2.    XML

3. ViewGroup

ViewGroup adalah class yang merupakan subclass dari class View di Android. ViewGroup ini berfungsi sebagai wadah untuk menampung beberapa View lainnya. ViewGroup mengatur tata letak dan perilaku tampilan anak-anaknya. Penggunaan ViewGroup memungkinkan kalian untuk mengorganisir tampilan dalam hierarki yang terstruktur, mengatur tata letak dengan fleksibilitas, dan memperluas fungsionalitas UI aplikasi Anda.

Contoh kelas ViewGroup yang umum digunakan di Android adalah LinearLayout, RelativeLayout, FrameLayout, dan ConstraintLayout. Setiap kelas ViewGroup memiliki karakteristik dan aturan tata letaknya sendiri.

1.    LinearLayout

LinearLayout merupakan salah satu class ViewGroup yang digunakan untuk mengatur tampilan anak secara sejajar atau berurutan dalam satu arah, baik secara vertikal atau horizontal sesuai dengan . LinearLayout memungkinkan kalian mengatur tampilan anak dalam urutan linier, satu diikuti yang lain, tanpa adanya tumpukan atau overlay.

2.    RelativeLayout

RelativeLayout merupakan salah satu class ViewGroup yang digunakan untuk mengatur tampilan anak secara relatif terhadap posisi dan hubungan antara tampilan anak dan tampilan induk. Dalam RelativeLayout, kalian dapat menentukan posisi dan hubungan antara tampilan anak menggunakan aturan dan properti tertentu.

3.    FrameLayout

FrameLayout merupakan salah satu kelas ViewGroup yang digunakan untuk menempatkan tampilan anak dalam susunan tumpang tindih (overlay) di atas satu sama lain. Dalam FrameLayout, tampilan anak ditumpuk secara vertikal sehingga hanya tampilan anak teratas yang terlihat.

4.    ConstraintLayout

ConstraintLayout merupakan salah satu jenis ViewGroup yang tersedia di Android yang dirancang untuk membuat tata letak yang responsif dan fleksibel. Dalam ConstraintLayout, kita menentukan hubungan (constraint) antara tampilan anak (view) berdasarkan aturan dan kendala tertentu. Dengan menggunakan constraint, kita dapat mengatur posisi, ukuran, dan tata letak tampilan secara presisi.

4. ListView

ListView merupakan salah satu komponen tampilan yang digunakan dalam pengembangan aplikasi Android untuk menampilkan daftar item dalam tampilan scrollable. Dalam ListView, daftar item ditampilkan secara vertikal dalam bentuk daftar. Kelebihan penggunaan ListView adalah sebagai berikut:

1.    Menampilkan daftar item

ListView memungkinkan kita untuk menampilkan daftar item yang dapat di-scroll, sehingga cocok untuk menampilkan data dalam jumlah banyak.

2.    Tampilan yang sederhana

ListView menyediakan tampilan yang sederhana dan umum digunakan dalam pengembangan aplikasi Android.

3.    Kustomisasi tampilan

ListView dapat dikustomisasi dengan menggunakan adapter untuk menampilkan data dalam format yang diinginkan.

Langkah - langkah dalam pengimplementasian dari listview untuk menampilkan data scrollable, seperti berikut:

1.    Buatlah file layout XML untuk tampilan item individu

2.    Buat layout XML untuk tampilan Activity atau Fragment yang akan menampilkan ListView.

3.    buat variabel ListView dan inisialisasi objek ListView di MainActivity

5. GridView

GridView adalah salah satu komponen view yang digunakan untuk menampilkan data dalam bentuk grid, di mana setiap item data ditempatkan dalam sel-sel yang teratur dan berbentuk kotak. Grid dapat memiliki beberapa kolom dan baris, dan item-item data dapat diatur dalam susunan yang rapi.

GridView biasanya digunakan untuk menampilkan koleksi data yang berjumlah banyak, seperti gambar, teks, atau kombinasi keduanya. Setiap item data dalam GridView dapat berisi elemen-elemen tampilan yang berbeda, seperti ImageView, TextView, atau kombinasi lainnya. Langkah - langkah dalam pengimplementasian dari gridview untuk menampilkan data grid, seperti berikut:

1.    Buatlah layout XML untuk item di dalam grid

2.    Buat layout XML untuk aktivitas yang berisi GridView

3.    Lakukan inisialisasi GridView di MainActivity dan atur adapter untuk mengisi data

 

6. RecyclerView

RecyclerView adalah komponen view yang digunakan dalam pengembangan aplikasi Android untuk menampilkan daftar item secara efisien, terutama ketika jumlah itemnya bisa berubah-ubah atau sangat besar. RecyclerView adalah pengganti dari ListView dan GridView dalam Android, dan memiliki banyak fitur tambahan serta fleksibilitas yang lebih tinggi.

RecyclerView bekerja dengan menggunakan konsep ViewHolder dan Adapter. ViewHolder bertanggung jawab untuk menyimpan referensi ke elemen tampilan (View) di setiap item data dalam RecyclerView, sedangkan Adapter bertanggung jawab untuk menghubungkan data dengan tampilan ViewHolder. Kelebihan dari penggunaan RecyclerView antara lain:

1.    Efisiensi

RecyclerView menggunakan konsep ViewHolder dan teknik pemetaan ulang (view recycling) untuk menghindari pembuatan elemen tampilan yang tidak terlihat, sehingga menghemat penggunaan memori dan meningkatkan performa aplikasi.

2.    Fleksibilitas

RecyclerView memungkinkan tampilan yang lebih kompleks dan fleksibel daripada ListView atau GridView. Anda dapat mengatur tata letak (layout) item secara horizontal atau vertikal, dengan tampilan item yang berbeda-beda, termasuk gambar, teks, tombol, atau kombinasi lainnya.

3.    Dukungan untuk tampilan berbasis Grid

Selain tampilan berbasis daftar (list), RecyclerView juga mendukung tampilan berbasis grid dengan pengaturan jumlah kolom yang dapat disesuaikan.

Langkah - langkah dalam pengimplementasian dari recyclerView untuk menampilkan data yang fleksibel, seperti berikut:

1.    Tambahkan dependency RecyclerView

2.    Buat layout XML untuk item di dalam RecyclerView

3.    Buat layout XML untuk activity yang berisi RecyclerView

4.    Buat kelas adapter yang melakukan extends RecyclerView.Adapter dan ViewHolder yang mengextends RecyclerView.ViewHolder.

5.    lakukan inisialisasi RecyclerView, adapter, dan atur layout manager di dalam MainActivity.