Pemobile - Pertemuan 8,9 Google Maps dan Tablayout.pptx

materi google maps pada matkul pemrograman mobile

1. Google Maps API Pemrograman mobile – 8,9

2. com.google.android.gms.maps Google Maps API adalah kumpulan antarmuka pemrograman aplikasi (API) yang disediakan oleh Google untuk mengintegrasikan layanan peta dan lokasi ke dalam aplikasi dan situs web. Google Maps API memungkinkan pengembang untuk mengakses fungsionalitas peta , mendapatkan informasi lokasi , menampilkan peta , menentukan arah , dan melakukan berbagai operasi terkait peta . Dependencies yang digunakan : implementation 'com.google.android.gms:play-services-maps:18.0.2’ Selain dependencies kita juga membutuhkan sebuah API KEY google maps untuk bisa menggunakan layanan tersebut .

3. API key google maps API key (Application Programming Interface key) adalah kunci yang digunakan untuk mengidentifikasi dan memberikan akses kepada aplikasi atau pengembang ketika mengakses atau menggunakan suatu API (Application Programming Interface). Ini adalah metode otentikasi yang umum digunakan untuk memastikan bahwa hanya aplikasi atau pengguna yang diizinkan yang dapat menggunakan layanan atau data yang disediakan oleh suatu API. Untuk mendapatkan API Key google maps, dapat mendaftar pada google cloud console Di link berikut ini : https://developers.google.com/maps/documentation/android-sdk/get-api-key

4. API API (Android Programming Interface) adalah seperangkat aturan dan protokol yang memungkinkan berbagai perangkat lunak atau aplikasi berkomunikasi satu sama lain. API menentukan cara berinteraksi antara komponen perangkat lunak yang berbeda . Analogi sederhana : kegiatan di restoran dapat dianalogikan tentang penggunaan API pada sebuah aplikasi Menu dianggap sebagai API yang menyediakan daftar item yang tersedia untuk dipesan Pelanggan dianggap sebagai API request Pelayan sebagai API gateway yang berfungsi sebagai perantara antara pelanggan dan dapur (backend) Dapur dianggap sebagai backend atau server Makanan yang dipesan adalah hasil request dari API

5. GENERATE API key google maps Masuk ke link berikut ini , lalu klik tombol “go to the credentials page”

6. 2. Jika diminta untuk login, silahkan masuk menggunakan akun google masing – masing, lalu ceklik term of service agreement. 3. Selanjutnya pada menu keys and kredential silahkan create project, google console memberikan kuota sebanyak 12 project untuk bisa menggunakan layanan google maps API secara gratis 4. Pada menu konfigurasi silahkan isi nama project disesuaikan dengan nama aplikasi yang mau dikerjakan . Yaitu MyMaps 5. Lalu klik tombol create

7. 6. Pada menu key & credentials, pilih create credentials lalu pilih API key

8. 7. Setelah selesai , silahkan copy API key, 8. API key ini yang selanjutnya digunakan untuk memberikan akses penggunaan Google Maps API di aplikasi MyMaps 9. Selanjutnya enable API key, masuk ke menu enabled Api & service

9. 10. Klik tombol enable apis and services > lalu pilih maps SDk for Android > lalu enable

10. Widget < com.google.android.gms.maps.MapView > MapView adalah salah satu komponen yang disediakan oleh Google Maps Android API untuk menampilkan peta di dalam aplikasi Android. Ini adalah alternatif dari menggunakan Fragment ( seperti SupportMapFragment atau MapFragment ) untuk menanamkan peta di dalam tata letak aplikasi .

11. interface OnMapsReadyCallback Adalah sebuah antarmuka (interface) dalam Google Maps Android API yang digunakan untuk memberikan callback ( panggilan balik ) ketika peta telah selesai dimuat dan siap untuk digunakan . Antarmuka ini menyediakan satu metode utama yang perlu diimplementasikan , yaitu onMapReady ( GoogleMap googleMap ).

12. Menambahkan Gmaps api ke project android 1. Buatlah project baru dan pilih template Google Maps Activity > finish

13. Menambahkan Gmaps api ke project android 2. Simpan dengan konfigurasi berikut ini , silahkan disesuaikan dengan package masing – masing :

14. Menambahkan Gmaps api ke project android 3. Buka file androidmanifext.xml perhatikan ada baris meta data yang berisi API_KEY, silahkan paste API key yang telah di- generate sebelumnya 4. Tambahkan permission Internet di atas elemen application pada file androidmanifest.xml

15. 6. Jika sudah silahkan running, aplikasi pada device / smartphone masing – masing, jika ingin running di emulator pastikan SDK Tools telah terinstall google play services 7. Hasilnya seperti gambar disamping Menambahkan Gmaps api ke project android

16. TabLayout Salah satu layout dari Android Material Design yang digunakan untuk menyediakan tata letak tab secara horizontal. Widget yang digunakan yaitu < com.google.android.material.tabs.TabLayout > Selain itu kita juga dapat menambahkan item tab didalam tablayout yang digunakan menggunakan < com.google.android.material.tabs.TabItem >

17. Contoh

18. XML Atribut Atribut Function tabBackground Digunakan untuk memberikan warna pada background tablayout tabIndicatorColor Digunakan untuk merubah warna indicator pada tablayout tabTextColor Digunakan untuk merubah warna text pada tablayout tabSelectedTextColor Digunakan untuk merubah warna pada tab yang aktif Lebih lengkap dapat dilihat pada dokumentasi berikut ini : https://developer.android.com/reference/com/google/android/material/tabs/TabLayout#xml-attributes

19. View Pager Integration Untuk menggunakan TabLayout secara utuh , biasanya widget ini dipasangkan dengan sebuah View Pager, yang berfungsi sebagai container untuk menampung content ( biasanya dalam bentuk fragment) dalam satu aktivitas . Artinya ViewPager biasanya digunakan untuk mengaitkan fragment untuk mengatur tata letak , memungkinkan agar tampilan pada konten yang berbeda dapat digeser baik secara horizontal maupun vertical Pada android x view pager disediakan pada widget < androidx.viewpager2.widget.ViewPager2> Pada java untuk dapat mengaitkan viewpager dan fragment dapat diatur dalam sebuah adapter dengan turunan kelas : PagerAdapter , ataupun FragmentStateAdapter

20. Contoh penggunaan TabLayout dan ViewPager

21. FragmentStateAdapter Adapter sering dikaitkan dengan komponen yang digunakan untuk menghubungkan data dengan antarmuka aplikasi , pada praktik tablayout dan viewpager , adapter yang sering digunakan yaitu : 1. FragmentStateAdapter , merupakan bagian dari ViewPager2 digunakan untuk menyediakan fragment yang akan ditampilkan dalam ViewPager2 Ketika meng-extends FragmentStateAdapter ada beberapa method dan constractor yang harus diimplement pada kelas tersebut

22. FragmentStateAdapter Public constractor yang digunakan :

23. FragmentStateAdapter Public method yang digunakan :

24. TabLayoutMediator Satu lagi yang diperlukan untuk menghubungkan TabLayout dan ViewPager , TabLayoutMediator merupakan kelas yang berfungsi untuk menyinkronkan posisi tab dengan posisi halaman yang terkait di ViewPager2 dan sebaliknya . TabLayoutMediator akan melakukan perubahan terhadap viewpager ketika user melakukan sliding ( menggulir ) ataupun selected ( memilih ) tab dan menyesuaikan perubahan pada viewpager .

25. Membuat Tablayout 1. Tambahkan kode program berikut ini pada activity main,

26. Membuat Tablayout 2. Buatlah 2 fragment baru , dengan cara klik kanan pada folder layout > fragment > blank fragment masing – masing fragment beri nama : “ DestinasiFragment ” dan “ KulinerFragment ”

27. Membuat Tablayout 3. Buka file MainActivity.java dan tambahkan kode berikut ini : Deklarasikan 2 widget yang digunakan , lalu inisialisasi id dari masing – masing widget tersebut pada method OnCreate 4. Tambahkan sebuah inner class didalam MainActivity yang digunakan sebagai Adapter dengan meng- extends kelas FragmentStateAdapter , tambahkan constractor dan method yang dibutuhkan , tekan shortcut alt+enter untuk implement constractor dan method

28. Membuat Tablayout 5. Secara lengkap isi class MyAdapter adalah sebagai berikut : Lanjutan

29. Membuat Tablayout 5. Secara lengkap isi class MyAdapter adalah sebagai berikut :

30. Membuat Tablayout 6. Lalu pada method onCreate , lengkapi kode programnya seperti berikut ini :

31. Membuat Tablayout 7. Ketika dirunning hasilnya akan seperti berikut ini , Isi dari fragment dapat disesuaikan dengan kebutuhan , bisa di kolaborasikan untuk menampilkan listview ataupun yang lainnya

32. Code lab Tab layout with Google maps api Code lab kali ini kita akan menambahkan tablayout untuk menampilkan daftar lokasi dan lokasi favorit Buka Kembali project MyRecyclerview 2. Buka file build.gradle lalu tambahkan dependencies berikut ini : implementation 'com.google.android.gms:play-services-maps:18.0.2’ Lalu sync now

33. Code lab Tab layout with Google maps api 3. Buka file android manifest, tambahkan API_KEY dan internet permission, silahkan ambil API_KEY yang telah di generate sebelumnya Paste API_KEY di atribut value

34. Code lab Tab layout with Google maps api Buka file activity_main.xml , tambahkan 2 tablayout untuk lokasi dan kuliner ,

35. Code lab Tab layout with Google maps api Jangan lupa create fragment baru untuk tab Lokasi dan Favorit , buka file HomeActivity.java , lengkapi kodenya menjadi seperti dibawah ini

36. Code lab Tab layout with Google maps api Lanjutan HomeActivity.java

37. Code lab Tab layout with Google maps api Lanjutan HomeActivity.java

38. Code lab Tab layout with Google maps api 4. Tambahkan activity baru simpan dengan nama DetailActivity , Buka fila activity_detail.xml lengkapi kodenya menjadi berikut ini :

39. Code lab Tab layout with Google maps api Lanjutan activity_detail.xml Hasilnya seperti berikut ini

40. Code lab Tab layout with Google maps api Buatlah sebuah layout baru , caranya klik kanan pada folder layout lalu pilih layout resource file , simpan dengan nama item_card_destinasi.xml Tambahkan library berikut ini pada file gradle , dependencies ini digunakan untuk membuat widget circle image, dan glide digunakan untuk memuat gambar dari internet. implementation 'de.hdodenhof:circleimageview:3.1.0' implementation 'com.github.bumptech.glide:glide:4.15.1'

41. Code lab Tab layout with Google maps api Buka file item_card_destinasi.xml , tambahkan script xml berikut ini :

42. Code lab Tab layout with Google maps api Buka file destinasi_fragment.xml tambahkan sebuah recyclerview berikut :

43. Code lab Tab layout with Google maps api 5. Buka file DataLokasi.java yang digunakan pada code lab 2 materi fragment, tambahkan data latitude dan longitude pada index ke 4 dan 5, silahkan dapatkan nilai lat dan long berdasarkan koordinat dari google maps. Contohnya menjadi seperti ini silahkan sesuaikan untuk data yang lain Data longitude, dan latitude

44. Code lab Tab layout with Google maps api 5. Pada arraylist getlistdata dibawah nya sesuaikan menjadi seperti ini :

45. Code lab Tab layout with Google maps api 7. Lengkapi variable latitude dan longitude pada kelas Lokasi.java , generate Kembali getter dan setter serta parcelable untuk kedua latitude dan longitude berikut ini :

46. Code lab Tab layout with Google maps api Buka file DestinasiFragment.xml , lengkapi kodenya menjadi berikut ini :

47. Code lab Tab layout with Google maps api Lanjutan DestinasiFragment.java

48. Code lab Tab layout with Google maps api Buka file DetailActivity.java , lengkapi kodenya menjadi berikut ini :

49. Code lab Tab layout with Google maps api Lanjutan DetailActivity.java ,

50. Code lab Tab layout with Google maps api Lanjutan DetailActivity.java ,

51. Code lab Tab layout with Google maps api Silahkan running program pada device masing – masing. Hasilnya akan seperti berikut ini