Android App development for Beginner

Hello and welcome to the section we’re we’re going to be building an app called hiker’s watch. So the basic idea this app is if you’re someone who loves to hike explore you can open up this app and without tapping any buttons this is the real magic of this you just open it up and it will tell you what your latitude longitude is how accurate the GPS is at the current moment what your current altitude is and what the address is for the place that you are in. So for example I put in a new location I’m going to try and get us back to New York. I go ahead and hit send here and boom. All sudden we’re on 16th Street in New York and I’ve listed out the zip code the state the street address just all sorts of awesome stuff there.

So this is the app that I want you to build. One thing that you may notice is we are full screen here. We don’t even have that little bar at the top and we’ve got an image filling up the whole things you’re going have to figure out how to do that. Awesome Web site to go get images on Splash dot com I’ve mentioned before but just wanted you to know. Great place to go get those. And yeah you should have all the know how to do this right. This is our geo location. This is working with location objects and stuff. So go ahead try and tackle this yourself.

I really believe that you can do this on without any of my help. But if you need anything or you just want to see how I did it you can always move forward. OK. So go ahead and attack it now. We’re going to start a new Android project and we’re going to go ahead and call this hiker’s watch. Again I would avoid the apostrophe there because you don’t want to come through with that messing up anything. So let’s go ahead and hit next on this one at least API 23 and we’ll just do the empty activity because we’re not showing maps in this one. And then we’ll go ahead and hit finish here. So while this is going we want to have that nice full screen image for our app. So let’s go ahead and go here to splash. Lots of different pictures here that you could use for your app. Just go ahead and kind of pick one that you think looks nice.

I like this one of sort of the stars out at night. It’s got that camping tent there you can decide whether or not you know this is the right picture for you but I’m going to go ahead and download this one can. And go ahead and minimize that. And look we’ve got this awesome picture so I’m probably going to crop this a little bit so oops I mean to rotate like that. So I want to see my tools here where are those. Here we go. So I just want to make this a little bit smaller I’m going to take like a nice chunk of the galaxy here maybe I’ll just have it even be all stars like that. But get a nice swatch of that or crop it and then I’m going to go ahead and export this to my desktop and I’m going to call this the sky and we’ll go ahead and do that. Save one more thing that we do want to add it here. We want to adjust the size. I’m going to bring this down to room.

Let’s maybe do like 500 with you know we might want to do a little bit more than that. I mean let’s do like a seven hundred and we’ll go ahead and say OK there and then we’ll save file export or this puppy on the desktop again. But I just want to call it sky replace that other one. Great. Now that we’ve got that let’s go ahead and exit out of there and we’ll come into. So the first thing that I want to dive into is that if we want this to be a full screen app we’ve got to go to our Android manifest here and rather than do this style app theme where we have the little bar at the top and all that stuff we want to go ahead and change this to style slash theme at compact dot and there’s all sorts of different options here.

But we want to go ahead and choose the no action bar. So we’ll go ahead and pick that one. And this is a basically allows our app to go full screen. So that’s kind of the first quick thing that we want to fix here. Let’s go ahead and work about the work on the visual side of our app so go ahead and make some space for us to move around in and give Android studio a second here to launch up. We do want to get rid of this text view. So I’ll go ahead and delete that. Next we’re looking for image view that’s going to fill the entire screen so go ahead pull out an image and it’s going to ask you which image that you want and be nice to just pass this. So let’s go ahead and before we do that we’ll open up our file system and inside of a bowl. All right click this and say reveal and finder J once we have that open up drawable and open up in a new tab our desktop folders do command to to get that. And here we’ve got our sky. I can copy this and then paste this here into drawable And let’s see if we can get that show up. Looks good. So now that we have that in place if I want to bring out an image view it’s going to ask me hey what do you want. And I’m going to choose this guy.

So there we go that’s looking pretty good. Now one thing that we want to do first is just make sure this goes edged edge so we’ll add in these constraints. But just make sure you’ve got zero for each of them. So there is zero there there is zero and there’s zero. So we can see from this right side that it’s touching all the edges but it’s not exactly filling the whole screen. So what we want to do here is we want to go change the scale type. And again lots of different options here. My favorite tends to be centered crop. So let’s go ahead and pick that one. OK. I want to make sure that this actually fills up the entire screen so we’ll go ahead and fire up our emulator here while we’re doing a little bit more. The next step for us while we’re waiting for that to load is we want to have a nice title here that shows that this is the hikers watch and then we want to start listing out some information here like the latitude and longitude.

So what we need to do first is go ahead and grab a text for you. We’ll bring that down right in the middle. In fact let’s right click this and say you should be centered horizontally and we’ll have you be a certain distance from the top there. And we have lost our image of you here. Let’s go ahead and do a control Z with that looks like maybe our better solution here is we’re going to select this text for you and we’re just going to do a controlled drug. We want the next few here. There we go and I just want to button up top and I’m going to drag it to the edge there. That gives me that nice distance. Now I think eight is too close. Maybe see something like 20. If that gives us a little more space on that seam seems better. We’ll talk more if there is something that we can change looks like that emulator opened up. Ooh look at that. It’s looking really cool. I love how that looks. So because this is a dark background we want to make sure that our text here is a light color so go ahead and switch to the advanced attributes roll down to where we can change the text color and let’s make sure we have the text few selected here come down and select text color. Here we go. So change changes to be background light or something white.

Right so we can see this. We also want to change the text size Let’s see what 40 looks like. Yeah I think this could be pretty good. And let’s go ahead and change this to say hiker’s watch can. So we’ve got that in place now we need to go ahead and create some text labels that are text views that are going to show the latitude and longitude. So we’ll go ahead and grab some more text use here. And we’ll bring out this one first. So again we want to go put some attributes here so text size maybe see what 20 looks like. The big one here this text color we’ve got to make sure this is nice and light so we can even read the text and then we’ll go ahead and give this something so might say latitude and put like something 40 point blah blah blah. Who knows. Right. Let’s go ahead and have this be a certain distance from hiker’s watch here.

It’s going to go ahead and put that. We wanted to be a certain distance from the left. Looks like we’re going to do this visually so we’ll go ahead and grab that. And it gets too close the idea of going to see what 20 looks like for spacing seem seems pretty good. I’m also going to bump up the space in as well let’s see what. Something like 30 looks like that should give us a good distance. OK. So once we have that in place we can actually go ahead and copy this text view and paste it because we want one a similar size and text color right.

Leave a Comment

Share via
Copy link
Powered by Social Snap