The usual map fragment in the Open Event Android App didn’t match to the other UI enhancements in the app. Therefore it was needed to enhance it in order for the users to take full advantages of the map based services that the app offered. The enhancements primarily included the following features –
- Better marker drawables – The usual markers were dull and didn’t match the app theme of the rest of the app.
- Location searching with autocomplete dropdown – Initially, there was no way the user could search for the location of the sessions happening in the event. Also, it was decided that it was best if the search auto suggested locations for easy navigation.
- Navigation to the location marker – The google map class comes bundled with in built UI features such as floor recognition, location pointer etc. Navigation to the location is one of those features which appears on a marker click. The user gets directed to the Google Maps android application for navigation from the current location.
Implementation
Add the following dependencies to your app’s Gradle build file. Do update the libraries if a newer version is available.
| dependencies { compile ‘com.google.maps.android:android-maps-utils:0.4+’ compile ‘com.google.android.gms:play-services-location:8.1.0’ compile ‘com.google.android.gms:play-services-maps:8.1.0’ } |
Use vector drawables instead of raster icons for the marker
| <!– drawable/map_marker.xml –> <vector xmlns:android=“http://schemas.android.com/apk/res/android” android:height=“40dp” android:width=“40dp” android:viewportWidth=“40” android:viewportHeight=“40”> <path android:fillColor=“#000” android:pathData=“M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z” /> </vector> |
Customize the marker events including color selections onclick and title display.
| private Marker handleMarkerEvents(LatLng location, String locationTitle) { if (mMap != null) { locationMarker = mMap.addMarker(new MarkerOptions().position(location).title(locationTitle) .icon(vectorToBitmap(getContext(), R.drawable.map_marker, R.color.dark_grey))); mMap.setOnMarkerClickListener(marker -> { locationMarker.setIcon(vectorToBitmap(getContext(), R.drawable.map_marker, R.color.dark_grey)); locationMarker = marker; marker.setIcon(vectorToBitmap(getContext(), R.drawable.map_marker, R.color.color_primary)); return false; }); mMap.setOnMapClickListener(latLng -> locationMarker.setIcon( vectorToBitmap(getContext(), R.drawable.map_marker, R.color.dark_grey))); } return locationMarker; } //Vector currently cannot be directly used with the markers hence it is necessary to convert it into bitmap first private BitmapDescriptor vectorToBitmap(Context context, @DrawableRes int id, int color) { Drawable vectorDrawable = ResourcesCompat.getDrawable(context.getResources(), id, null); assert vectorDrawable != null; Bitmap bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(), vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight()); DrawableCompat.setTint(vectorDrawable, ContextCompat.getColor(context, color)); vectorDrawable.draw(canvas); return BitmapDescriptorFactory.fromBitmap(bitmap); } |
Enable the google maps UI enhancements by getting the UI settings and subsequently setting true to google map toolbar
| mMap.getUiSettings().setMapToolbarEnabled(true); |
Conclusion
The google maps is an important service for the open event android project since events are all about happenings and happenings are best served with accurate locations of their whereabouts.
For more information on the code, please visit the link here.