Hai teman - teman semua! Pada tutorial android studio kali ini kita akan melanjutkan Pengenalan Layouting pada android studio [1]. Saya berharap setelah memahami penggunaan layout pada android dan dapat membuat tampilan semenarik mungkin aplikasi android yang sedang ingin dibangun.
Di pembahasan kali ini kita akan mengaplikasikan beberapa layout yaitu FrameLayout dan ListView pada Android Studio.
5. 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, android:layout_gravity digunakan untuk menemukan ViewChild.
Agar elemen UI di dalam FrameLayout terlihat rapih serta tata
telaknya bisa kalian atur sendri, dapat menggunakan beberapa attribut penting
khusus untuk FrameLayout seperti berikut ini :
Secara khusus, FrameLayout memiliki 9 area gravitasi yang diilustrasikan pada gambar dibawah ini. Perhatikan bahwa itu adalah area imajiner, jadi itu tidak berarti FrameLayout secara fisik dibagi menjadi 9 bagian.
Sekarang kita akan melakukan implementasikan dari FrameLayout untuk membuat aplikasi android, ikuti langkah - langkah berikut;
1. Pertama cari dan jalankan dahulu aplikasi Android Studio yang ada di PC kalian masing - masing.
- Pilih Start → Android Studio
- Pilih Create New Projects
- Pilih Empty Activity lalu klik Next
akan muncul Configure Your Project,
Keterangan :
- Beri nama project yang ada kerjakan, misal disini kita membuat project dengan mana → FrameLayout.
- Pilih lokasi penyimpanan (Save Location) → Disesuikan dengan keinginan kalian dimana project ini akan di simpan.
- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, jika tidak ada website bisa menggunakan default, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project FrameLayout.
- Untuk minimum API level kita pilih → API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).
- Untuk bahasa yang digunakan pilih Java.
- Jika Sudah selesai klik Finish.
2. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu buka file activity_main.xml dan ubah script dengan source code berikut :
maka akan terlihat seperti di bawah ini :
Pada contoh berikutnya, edit source code pada activity_main.xml kalian menjadi seperti source code berikut :
maka akan terlihat seperti ini :
3. Jalankan emulator maka akan tampil seperti di bawah ini :
4. Selanjutnya kita akan mencoba kembali membuat App menggunakan FrameLayout yang ke 2 (dua) dengan implementasi seluruh tata letak, seperti biasa buat project baru di Android Studio, jika sudah berada di halaman Android Studio maka langsung saja ikuti seperti langkah di bawah ini. Jika belum maka lakukan cara pembuatan file projects seperti langkah diatas (FrameLayout2).
- Klik File → New Projects
- Pilih Empty Activity lalu klik Next
akan muncul Configure Your Project,
Keterangan :
- Beri nama project yang ada kerjakan, misal disini kita membuat project dengan mana → FrameLayout2.
- Pilih lokasi penyimpanan (Save Location) → Disesuikan dengan keinginan kalian dimana project ini akan di simpan.
- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, jika tidak ada website bisa menggunakan default, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project FrameLayout2.
- Untuk minimum API level kita pilih → API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).
- Untuk bahasa yang digunakan pilih Java.
- Jika Sudah selesai klik Finish.
5. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu buka file activity_main.xml dan ubah script dengan source code berikut :
6. Jalankan emulator maka akan tampil seperti di bawah ini :
6. ListView
Catatan : Sebenarnya materi ListView sempat kita bahas di pembahasan sebelumnya tapi kali ini kita akan mengulas kembali karena materi ini masih berhubungan dengan materi Layouting yang sedang kita pelajari di Pengenalan Layouting 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 digunakan oleh programmer untuk membuat list/daftar item yang sederhana pada aplikasi mereka.
- Adapter merupakan class yang mengatur item - item pada ListView. Adapter mengatur resource view pada setiap item dari ListView. Resource view pada ListView yang ada pada sebuah tampilan layar sebuah aplikasi memiliki jumlah resource view yang tetap sesuai dengan item yang tampak pada layar. Pada ListView dengan tampilan scroll, Resource view akan digunakan secara berulang (reusable) dengan mengatur item yang tampak dan tersembunyi pada ListView. Adapter juga mengatur data model dari setiap item ListView. Sebuah data model akan diatur menjadi sebuah item dari ListView.
- Membuat ListView Sederhana
Pada implementasi dibawah ini kita akan membuat menggunakan ListView Custom, ikuti langkah - langkah berikut ini :
1. Pertama cari dan jalankan dahulu aplikasi Android Studio yang ada di PC kalian masing - masing.
- Pilih Start → Android Studio
- Pilih Create New Projects
- Pilih Empty Activity lalu klik Next
akan muncul Configure Your Project,
Keterangan :
- Beri nama project yang ada kerjakan, misal disini kita membuat project dengan mana → ListView.
- Pilih lokasi penyimpanan (Save Location) → Disesuikan dengan keinginan kalian dimana project ini akan di simpan.
- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, jika tidak ada website bisa menggunakan default, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project ListView.
- Untuk minimum API level kita pilih → API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).
- Untuk bahasa yang digunakan pilih Java.
- Jika Sudah selesai klik Finish.
2. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu buka file activity_main.xml dan ubah script dengan source code berikut :
3. Setelah mengetikan source code di activity_main.xml, kemudian buka dan ubah Source code MainAcivity.java menjadi seperti dibawah ini :
4. Jalankan emulator maka akan tampil seperti di bawah ini :
- Membuat Custom ListView Kompleks
Sekarang kita akan melakukan implementasikan dari Custom ListView Kompleks untuk membuat aplikasi android, ikuti langkah - langkah berikut;
1. Pertama cari dan jalankan dahulu aplikasi Android Studio yang ada di PC kalian masing - masing.
- Pilih Start → Android Studio
- Pilih Create New Projects
- Pilih Empty Activity lalu klik Next
akan muncul Configure Your Project,
Keterangan :
- Beri nama project yang ada kerjakan, misal disini kita membuat project dengan mana → CustomListViewKompleks.
- Pilih lokasi penyimpanan (Save Location) → Disesuikan dengan keinginan kalian dimana project ini akan di simpan.
- Untuk Package Name → ubah menjadi nama blog atau website kalian masing - masing, jika tidak ada website bisa menggunakan default, disini saya menggunakan url blog saya nofieanggraeni.blogspot.com lalu diikuti nama project CustomListViewKompleks.
- Untuk minimum API level kita pilih → API 16 (di sesuaikan dengan spesifikasi PC kalian, disarankan memilih yang paling minimum untuk API levelnya dan yang butuhkan).
- Untuk bahasa yang digunakan pilih Java.
- Jika Sudah selesai klik Finish.
2. Setelah melakukan Configure Project maka akan tampil halaman utama IDE Android Studio, setelah itu ubah nama file activity_main.xml dengan nama file layout.xml dengan cara berikut :
- Klik kanan, lalu pilih Refactor dan klik Rename.
Untuk membuat Custom ListView, kita buat terlebih dahulu layout - layoutnya. Kita membutuhkan 2 layout, yaitu layout halaman yang menampilkan ListView dan layout item untuk Adapter. Layout halaman kita buat dengan mengubah source code pada layout.xml menjadi seperti di bawah ini :
3. Setelah mengetikan source code diatas, selanjutnya kita buat layout item untuk Adapter dengan membuat file resource pada folder res/layout/ dengan nama item.xml lalu ketikan source code berikut :
4. Kemudian kita siapkan gambar yang menjadi icon dari item ListView. Disini saya memakai logo Sosial Media dan juga logo Sistem Operasi yang memiliki ukuran kecil. Kita simpan gambar tersebut pada folder res/drawable.
- Copy, lalu kembali ke Android Studio
5. Kemudian kita buat seuah class data model dari item ListView yang bernama class Menu. Object dari class ini akan menyimpan data - data yang akan ditampilkan pada item dari ListView. Sebuah Object dari class Menu akan ditampilkan pada sebuah item dari ListView. Kita buat class yang bernama Menu.java caranya :
dengan source code sebagai berikut :
6. Kemudian kuta buat class Adapter. Class Adapter adalah class yang akan membuat dan mengatur item - item dari ListView. Class ini mengkonversi data dari Object Menu menjadi item dari ListView. Kita buat class yang bernama ListAdapter.java dengan source code sebagai berikut :
7. Kemudian kita buat class MainActivity.java (class ini biasanya sudah dibuat otomatis pada project) sebagai class controller yang mengelola pembuatan Custom ListView. Ketikan Source code MainActivity.java sebagai berikut :
Pada class tersebut kita membuat ArrayList yang berisi object - object dari Menu. ArrayList ini menjadi kumpulan data yang akan ditampilkan pada ListView. Dibawahnya ada object dari class ListAdapter yang bernama Adapter. Object ini yang akan dimasukan pada object dari ListView pada fungsi setAdapter(adapter).
ListView dapat mengenali beberapa event, salah satunya adalah event click. Masing - masing item dari ListView dapat menangkap event click dan memberikan reaksi terhadap event tersebut. Kita akan menangkap event tersebut dan memberikan raksi sederhana dengan menampilkan sebuah kalimat. Jika project tadi dijalankan maka akan tampil seperti ini.
0 comments:
Posting Komentar