Membuat Place Picker Android Seperti Aplikasi Gojek

Pernah kepikiran membuat aplikasi seperti gojek, mungkin tutorial kali ini akan sedikit membantumu membuat salah satu fitur yang ada didalamnya. Sesuai yang tertera pada judul di atas, kali ini kita akan belajar membuat sebuah place picker yang bisa di gunakan untuk mempickup lokasi pada google map.

advertisement

Sebenarnya, place picker ada di android Sdk android versi lama namun pada Sdk yang terbaru fungsi tersebut sudah di gantikan dengan PlaceAutocomplete. 

Tapi tenang saja ada sebuah library class pihak ketiga yang bisa kita gunakan untuk membuat place picker dengan mudah dan di lengkapi dengan berbagai macam fitur di dalamnya. Jadi pada kesempatan kali ini kita akan membuatnya dengan Leku library place picker.

Fitur - Fitur Didalamnya

• Pencarian Menggunakan Suara
• Pencarian Menggunakan Teks
• Mengambil data lokasi menggunakan Gps Atau Netwrok Provider
• Google Places (Opsional)
• Google Time Zone API (Opsional)
• Pick lokasi dengan hanya mentouch peta dan gestur
• Kostumisasi Tampilan Peta
• Pelacakan Event
• Mendukung Tiga Bahasa (English, Spanish and Vietnamese) Secara Bawaan
• Mendukung RTL (Right-To-Left) layout

Instalasi Library

1. Pastikan Versi Sdk kalian 15 ke atas dan Google Play Services 17.0.0 keatas
2. Buka root build.gradle dan masukan code berikut di dalamnya
   

   allprojects {
       jcenter()
   }

3. Kemudian buka app build.gradle dan di bagian dependency silahkan masukan code berikut jika menggunakan package library AndroidX 
   

   dependencies {
       implementation 'com.schibstedspain.android:leku:7.2.0'
   }

   Jika menggunakan versi google servcie yang berbeda tulis code berikut

   implementation ('com.schibstedspain.android:leku:7.2.0') {
       exclude group: 'com.google.android.gms'
       exclude group: 'androidx.appcompat'
   }

   Dan jika kalian tidak menggunakan package library AndroidX kalian bisa menggunakan Leku versi lawas

   implementation ("com.google.android.libraries.places:places-compat:2.2.0")
   implementation ("com.schibstedspain.android:leku:5.0.0") {
       exclude group: 'com.google.android.gms'
       exclude module: "play-services-places"
   }

Mengatur Perijinan Di Manifiest.xml

Leku membutuhkan beberapa perizinan dari aplikasi untuk dapat menjalankannya, silahkan kalian buak Manifiest dan tambahkan code permission berikut.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-feature android:name="android.hardware.location.network" android:required="false" />
<uses-feature android:name="android.hardware.location.gps" android:required="false"  />

Cara Menggunakan Library Leku

Sebagai contoh disini kita akan menggunakan activity default dari leku untuk menampilkan place pickernya.

1. Buka Manifiest.xml proyek android kalain dan daftarkan Activity bawaan lekunya dengan memasukan code berikut
   

   <activity
       android:name="com.schibstedspain.leku.LocationPickerActivity"
       android:label="@string/leku_title_activity_location_picker"
       android:theme="@style/Theme.AppCompat.Light.NoActionBar"
       android:windowSoftInputMode="adjustPan"
       android:parentActivityName=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.SEARCH" />
       </intent-filter>
       <meta-data android:name="android.app.searchable"
           android:resource="@xml/leku_searchable" />
       <meta-data
           android:name="android.support.PARENT_ACTIVITY"
           android:value=".MainActivity" />
   </activity>

2. Buka class activity klian (Misalnya: MainActivity) dan panggil place pickernya dengan code berikut ini.
   

   val locationPickerIntent = LocationPickerActivity.Builder()
       .withLocation(41.4036299, 2.1743558)
       .withGeolocApiKey("<PUT API KEY HERE>")
       .withSearchZone("es_ES")
       .withSearchZone(SearchZoneRect(LatLng(26.525467, -18.910366), LatLng(43.906271, 5.394197)))
       .withDefaultLocaleSearchZone()
       .shouldReturnOkOnBackPressed()
       .withStreetHidden()
       .withCityHidden()
       .withZipCodeHidden()
       .withSatelliteViewHidden()
       .withGooglePlacesEnabled()
       .withGoogleTimeZoneEnabled()
       .withVoiceSearchHidden()
       .withUnnamedRoadHidden()
       .build(applicationContext)
   
   startActivityForResult(locationPickerIntent, MAP_BUTTON_REQUEST_CODE)

3. Untuk menerima data lokasi yang dipilih dari place picker. Di activity class kalian (Misal:MainActivity) masukan callback methode berikut.
   

   override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
       if (resultCode == Activity.RESULT_OK && data != null) {
           Log.d("RESULT****", "OK")
           if (requestCode == 1) {
               val latitude = data.getDoubleExtra(LATITUDE, 0.0)
               Log.d("LATITUDE****", latitude.toString())
               val longitude = data.getDoubleExtra(LONGITUDE, 0.0)
               Log.d("LONGITUDE****", longitude.toString())
               val address = data.getStringExtra(LOCATION_ADDRESS)
               Log.d("ADDRESS****", address.toString())
               val postalcode = data.getStringExtra(ZIPCODE)
               Log.d("POSTALCODE****", postalcode.toString())
               val bundle = data.getBundleExtra(TRANSITION_BUNDLE)
               Log.d("BUNDLE TEXT****", bundle.getString("test"))
               val fullAddress = data.getParcelableExtra<Address>(ADDRESS)
               if (fullAddress != null) {
                   Log.d("FULL ADDRESS****", fullAddress.toString())
               }
               val timeZoneId = data.getStringExtra(TIME_ZONE_ID)
               Log.d("TIME ZONE ID****", timeZoneId)
               val timeZoneDisplayName = data.getStringExtra(TIME_ZONE_DISPLAY_NAME)
               Log.d("TIME ZONE NAME****", timeZoneDisplayName)
           } else if (requestCode == 2) {
               val latitude = data.getDoubleExtra(LATITUDE, 0.0)
               Log.d("LATITUDE****", latitude.toString())
               val longitude = data.getDoubleExtra(LONGITUDE, 0.0)
               Log.d("LONGITUDE****", longitude.toString())
               val address = data.getStringExtra(LOCATION_ADDRESS)
               Log.d("ADDRESS****", address.toString())
               val lekuPoi = data.getParcelableExtra<LekuPoi>(LEKU_POI)
               Log.d("LekuPoi****", lekuPoi.toString())
           }
       }
       if (resultCode == Activity.RESULT_CANCELED) {
           Log.d("RESULT****", "CANCELLED")
       }
   }

   Dan harusnya ketika kalian runing programnnya akan muncul tampilan kurang lebih seperti animasi berikut ini.
   

Terimakasih sudah mampir di artikel cara membuat place picker dengan mudah seperti aplikasi gojek. Jangan lupa di share jika kalian merasa artikel ini bermanfaat, kalau ada pertanyaan silahkan tulis di kolom komentar. Untuk tutorial lengkapnya kalian bisa mengunjungi web git nya di link Leku Repository. Good Luck!

advertisement