Build an Android App in Java: (1/4) Start with a Map in Mapbox SDK

Build an Android App in Java: (1/4) Start with a Map in Mapbox SDK


Hey, everyone, Johnny B here here with devslopes.com and I am super excited to teach you all about Mapbox. Mapbox is an incredible framework that allows you to build experiences for exploring the world. As a developer, working with user location can be difficult, but with Mapbox it is a lot easier to add location services into any application, with their mapping, navigation, and location search SDKs. There is so much that Mapbox can do for you. It supports iOS, Android, web, Unity, and Qt out of the box. So let’s take a look at the app that we are going to build in this series. I got it open right here, and it shows our location, which I have set to San Francisco, and when I tap anywhere on the map it goes ahead and drops a marker and overlays the best route to that location. And then when you’re ready to get going, all you got to do is click on Start Navigation, and we will begin turn-by-turn directions. And you can choose to have those turn-by-turn directions muted or not. You can also click here to report any issues, such as road closures or bad routes and this information goes straight to Mapbox to improve their maps over time. All right so this is you know pretty snazzy, and you may be thinking, “Wow this looks like a lot of work!” But it’s really not using Mapbox, all right? So let’s get started and hope you guys are excited because this is gonna be a lot of fun! Alright so I have here a pretty much brand-new Android Studio project. In this series, we are using Android Studio version 3.1.2. And this series, we are using Java, okay? So we also have a series using Kotlin so if you want to use Kotlin, go ahead and switch over to that series. Now I’ve gone ahead and added a few dependencies and some other things so let’s go ahead and go over that real quick. So open your build.gradle and go ahead and add these two dependencies right here. We’re going to start with the Android SDK, and that is currently at version 6.0.1. We’re also going to be using the plug-in location layer, which is currently at 0.5.0. If you’re watching these videos in the future and these have updates, go ahead and update to the latest version. Now if you try to run that and get this crash, go ahead and also add this little bit of code here for our compile options. This is simply setting the source and target compatibility. Also, in your project, build.gradle file, under the repositories, make sure you have added mavenCentral(). Next up to use Mapbox we are going to need our API key and if you haven’t already gotten that, go ahead and sign up at Mapbox.com. It’s super easy, free, and grab your API key. And then, we are going to open up our values folder here under resources, go to strings.xml and you can just add a new string resource called “access_token” and go ahead and paste your access token API key right there. And then we’re going to go over to colors here and this is optional, but if you want to go ahead and make your app a little bit more themed like the Mapbox colors you can go ahead and modify your colors to match what I have here. I have the mapboxBlue set as the primary and accent colors and then we also have a mapboxWhite, blue, and gray light color so you can go ahead and pause this now if you want and copy those hex values. Lastly, since we are going to be using user’s location, we are going to need some permissions here in the AndroidManifest.xml file. So go ahead and right here do “uses-permission” and the one we want is ACCESS_FINE_LOCATION. You can also use coarse location, but fine location is strongly recommended, as that will give your user the most accuracy. So with that we are now ready to add in our map to our xml. So go ahead and go down to our resources and layout and grab our activity_main.xml. We’re going to be here in the text editor, I’m gonna get rid of this text view here, and we’re going to go ahead and import our mapView. So you want com.mapbox.mapboxsdk.maps.MapView. We’re gonna go ahead and go with match parent and match parent get rid of this window. And then I’m going to get rid of this closing here, and just go ahead and self close right here. Alright so we have now added in a mapView. I’m going to change this namespace here from app to mapbox, there we go! So now, we need to give our mapView some properties. So if you think about it, a map – what do you need? Well, you need to know where you are! So let’s go ahead and add a cameraTarget latitude and longitude so that when we launch our map we are looking at a specific location. And I’m gonna go ahead and put in the latitude and longitude for San Francisco. So the way to do that is to say, mapbox: mapbox_ camera Target Lat so a target latitude, which we are going to do 37.7749, and then our mapbox: mapbox_ camera TargetLng – longitude, lng, and that is equal to -122.4194. And then we have the option to be able to style our map in a specific way. So we have several that are available to us by default and the way to add that is to say mapbox: mapbox_style URL and this is equal to mapbox: //styles /mapbox And then this is where you would specify. The one we’re going to start out with is called streets -v10. Okay? And then lastly we are going to set a zoom level, okay, so I’m going to say mapbox :mapbox _camera Zoom=12. And that’s a pretty good zoom level for not being too close but also not being too far away. You can go ahead and experiment with that value and find one that fits your preferences. Alright so we have added our mapView widget, we’ve set the width and height to match parent, we’ve set a target latitude and longitude, we’ve given it a style and a zoom level. So last thing that we need to do is go ahead and jump into our MainActivity and create a mapView variable; I’m going to say private of type mapView and we’re gonna name it mapView. And then down here. First thing we’re going to do actually, is give Mapbox the information that it needs, being the application context and our access token. So I’m going to say Mapbox. getInstance() And so here we are going to pass in the context and the access token. So I’m going to say “getString(R.string.access_token).” So now Mapbox has the context and our access token; it can do what it needs to. And now let’s go ahead and get our mapView. So I’m going to say mapView=(MapView) findViewById(R.id.mapView) And I think we forgot to give it an ID so let’s go ahead and jump back into our activitymain.xml. over here and let’s say android: id=mapView. There we go! So now, that error should go away, just like that, and to get started we need to say mapView. onCreate() and pass in the saved instance state. Alright, so the mapView contains its own lifecycle methods for managing Android’s Open GL lifecycle which must be called directly from the containing activity. So in order for our app to correctly call the mapView’s lifecycle methods, we need to override the activity’s lifecycle methods, and add the mapView’s corresponding lifecycle method here. So here on onCreate(), we did mapView.onCreate(). We’re also, going to need to do the same thing in onStart() and say mapView.onStart() as well as all of the others, so hang tight! We are going to add those real quick here. So here we go! I say onResume() and that is mapView.onResume(). Then, we have onPause() so mapView.onPause(). I’m gonna, go ahead and get some room right here… there, we go! I’m gonna say onStop() and so we’re gonna say mapView .onStop(). And then we have onSaveInstanceState() I’m gonna, say mapView.onSaveInstanceState() and pass in the outState. Then, we have onLowMemory(), so we’re gonna say, mapView.onLowMemory()… and, lastly, finally, onDestroy() so mapView.onDestroy(). There we go! So now, our mapView has access to all of the necessary activity lifecycles. So now let’s go ahead and run this and check out our map! Alright, and there’s our map of San Francisco! Looking pretty great! You can zoom in… zoom out… you can rotate… You can do a lot of stuff with the map right out of the box! Now before we finish up this video, I just wanted to show you, real quick, some of the other styles available to you. So we talked about that here in activity main.xml, here’s our styles. So streets-v10 is one of them, but another one that you can do is Dark-v9 for a kind of a dark theme, so I’m going to go ahead and run that. All right! Check that out! That looks fantastic! A nice dark theme so if it’s nighttime then you can dynamically change the style for your user… So that’s pretty cool. All right the last one that I want to show you is, we have traffic -day-v2. There’s also a traffic-night-v2. So I’m gonna run that Alright! And that shows us – wow! – the heavy traffic in San Francisco right now! So pretty cool! So as you can see there is a lot of stuff that you can do with Mapbox right out of the box. And so this is super exciting! In the next lesson we are going to do some even cooler stuff using the user’s location. So I hope you’re excited for that and I will see you in the next one!

Leave a Reply

Your email address will not be published. Required fields are marked *