Android Studio Tutorial For Beginners - How To Build an Android App

hey what's up everyone mark Critz here with quick slopes calm and if you're wondering why I have a Star Wars hat on and a Star Wars shirt on and why there's a Star Wars post here in the background show me that hard to figure out Star Wars just came out you're probably like that movie came out months ago well in the past which is now my present it just came out so in this exciting video I'm gonna show you how to install Android studio mmm-hmm so let's go ahead and open up our browser and let's just do a google search we're gonna type in Android development and sure enough right here at the top developer.android.com nice little marshmallow here it looks tasty and delicious very cool click the Developer tab click set up Android studio and click the download android studio for mac button i have read and agreed with all the terms and conditions because of course everyone does that oop speed-reading and then click a download android studio for mac and it's going to download and then it nicely loads the next page for us and tells us that we're gonna need java once it has finished downloading just click the icon of the download file here dot dmg and then just go ahead and drag this over now I've already done that okay so I'm not gonna do that now but just drag it over and once it's done being dragged over let's see what happens so I'm gonna go to my launch pad click Android studio and oh no Java not found you may already have Java on your computer and if you do great and if you're wondering why I don't it's actually because this is a new computer so this is a perfect test and I won't have to go back and answer this and the questions be asked me questions about it because I just experienced it myself so it gives us a nice little link we can click on here to download Java so I'm going to do that now and I already have one of these here so let's just go grab that Java for OS X let's go ahead and click that and we are gonna install Java okay here we go and this is for a Mac of course if you're running on PC or Linux you may get a different when I say PC I mean Windows or Linux you may get a different air or you may already have Java and you will likely have to find a different Java file for that specific platform which it may give you an error message for or you can do a search for I'm gonna click continue and install this bad boy there we go got a click of a jillion things install anything ok there we go now let's go ahead and try loading up Android studio I'm clicking it from my and close this here first I'm clicking here from the IDE it disappeared on me there we go Launchpad Android studio ok you can import your settings from a previous version of studio I do not have a previous version of studio welcome it says this is the wizard so when to click Next and it requires the Java development kit seven point or newer what we installed Java Runtime ok what Java development kit is different so let's just do a google search for Java development kit there we go we'll do number eight here and what we're gonna do is we're gonna find the development kit for this top one here and for a Mac in my case if you were running Windows you can get Windows or Linux here and I'm gonna download it here oh I've got to accept the License Agreement because I've read it and there it goes 227 megabytes it may take you a moment it has finished downloading go ahead and install it of course you download it then you install it just letting you know continue install but in my password doing its thing writing its files successful okay so let's see if it worked well back over here to our setup wizard and I'm just gonna click the detect button hey and it found it okay pretty cool if yours did not find it you can click these dots here and find out where it was manually located if you don't know where it's located you can always from your terminal install Android JDK or JDK not found and I'm sure you can find something on Stack Overflow that can give you the proper directions and help just pointing you in the right direction but I didn't have any problems so back to Android click the icon here I'm gonna click Next choose the type of setup you want for Android studio standard is fine you can play around with custom if you want no need to though ok and if you want to review and change any of your installation settings click previous so these are the things that it's gonna download for us so we can properly develop Android applications 451 megabytes which is fine for now click finish and it's gonna do its thing and I'm gonna let it do its installing and you can do yours as well and we'll be back here in just a few minutes welcome back if yours has finished downloading as mine has we'll go ahead and click finish and now we're finished an Android studio is now installed what else do we need to do one thing I always like to do is just make sure I have everything up to date through the system here and I click this check for updates now icon and there is an update so I'm gonna go ahead and do that now I always like to get all the tools and everything installed prior to writing any code so here we go it's a small update no big deal and finish perfect let's go ahead and go into our SDK manager ok so each Android SDK platform package includes the Android platform and sources pertaining to the API level by default okay so right now we have Android 6.0 API level 23 installed we can also install earlier versions which is important if you're gonna be building for multiple devices and so let's go ahead and do that now I'm just going to go all the way down to API level 17 I think that's good for now and I'm going to click OK and I'm gonna click OK and it's going to install these here again it's important because when it comes to Android most developer most users don't have the absolute newest os system so you have to make sure that you're supporting all the different OS is and that the correct backwards compatible legacy packages are installed as well too so that's I'm going down to 17 or 16 whatever I clicked on that's about a good number so I'll go ahead and let those install you can install what everyone do one target whatever devices you want ok but I recommend getting some of the older versions in there oh yeah that I'm not crazy and what I'm talking about here with those API versions let's go to Google here and type in Android versions devices and click this dashboards one here this is developer.android.com slash about slash dashboard slash index dot HTML and this is the chart that you want to refer to ok this is well it says it right here the section provides data about the relative numbers of devices running a given version of the Android platform ok so notice marshmallow which is the newest 0.5 hardly anybody you've got you know 13.2% and lollipop and this these are API versions the Android version has some of these Android versions have multiple API versions ok so notice how this is sixteen point three thirteen point two thirty six and so I believe we went all the way down to 16 or 17 because 10% onwards Ice Cream Sandwich and below is very low and you start losing a lot of features the older you go some people like to support all the devices depends on what type of app you're building if you're building an app that can be installed and used on very old devices then go for it but I recommend just getting a good you know 70% plus of people it's one of the caveats of doing Android development that you have to account for and consider so that is why we are installing different API packages and by the way this is a great webpage for getting information on devices like who's using what screen sizes and densities what size screens are people using the most so you can get a feel how you want to build your app who you want to target it to and so on and so forth let's go ahead and take a look at our installations here and we are done at least I am here and it's finishing the install and we're good to go so officially Android is installed our packages are installed and you are ready to go and you have a little bit more knowledge of API versions and versions of Android you've got a version of Android and some versions can have multiple API versions as you see here with lollipop and jellybean so forth so that's it mark price at dev slopes comm see you later hey what's up everybody mark price your dev slopes comm and today is the day where you get to build your very first Android app it sounds pretty cool no experience needed let's go ahead and open up Android you should already have installed I'll find mine by just command space and Android here on the Mac there we go Android studio okay and so what we're gonna do is we're gonna create a project that does percentages you know what is 15% of this number not super complex but we'll write some code we'll make some UI so go ahead and click start a new Android studio project and you can call yours whatever you wanted I'm gonna say math sucks that's gonna be the name of my app math sucks okay and company domain is the name of the company that you'll be putting in there which is your own or whatever name you want to put in there no big deal project location is obviously the project location currently mine is just stored in androids to deal projects you can put that wherever you want click Next now this is important ok API level how many users you want to support if you notice here by targeting API 16 and later your app will run on a POC approximately ninety two point eight percent of the devices alright the higher up I go the lower goes less than 1% on the androids newest version right so what it means is if you this is the minimum SDK so basically they have to have this they have to have this version on their phone in order to run this app so we cover about 92% on jellybean Ice Cream Sandwich goes up a little higher but 4.1 introduced a lot of cool features with jellybean so let's just go ahead and do that we're going to skip these other ones here and click Next and there's lots of different templates here we are gonna do blank activity okay and the reason why I'm choosing blank activity instead of empty activity is because it has this cool action button with some event listeners and I like to use existing code to reference code snippets sometimes when I forget I kind of set listeners and things like that because I was I tend to forget syntax occasionally so I'm just gonna set blank activity click Next there we go and your activity name this is the main activity for your application kind of the starting point here you can name this accordingly Arce is just going to be called main activity because we're only gonna have one and we're not going to click use a fragment at this time and click finish ok our project is open we've got the tip of the day which I don't care about at this time I'm gonna click close and it's going to load up the content underscore main which is the XML layout for our project meaning this is going to be the user interface for our project there it goes okay so here's our project let's do a little bit of setup first what I want you to do is hover over these icons here okay this one SDK manager okay and you should have the SDKs installed as part of the installation process if you don't have these installed you're gonna want to install the different SDK versions that are available ok you can click those buttons there so just make sure you've got you know I've got mine down to API level 17 and that's okay and then you want to go over this AVD manager here and okay and these are your virtual emulators your virtual devices and I have one because I've created one but if you don't have one make sure you click create a virtual device and I would suggest just fix it picking the nexus 5 for now it's a good generic phone click Next and you're gonna want to set let's see there it is so we're gonna want to make sure we've got all the other details on it available so click Next and this is where you can set its like advanced settings here you can set how much RAM it has and things like that I'm like I'm gonna hide these advanced settings here and what I would do is I would say use host GPU which just use the GPU of the actual computer that you're running on this never actually used to be available to Android it used to actually take forever to load the emulators and it would run actual device specs but I'd rather it run off my computer specs because I wanted to run fast because I'm doing lots of testing and iteration so that all looks good and you can go ahead and click finish I'm not going to do that since I already have a device and once your device is on here it means you're good to go and ready to start developing apps so let's take a look here we are in content underscore main okay over here on the left hand side you should see some files if you don't if it's collapsed you can click this icon here that says project and you can expand it to see these files here ok and you'll notice you have AR es that's for short for resources and these are resource files and a resource file represents your application the user interface of a screen or an item in this case our main activity has its own user interface file and what it does is if you look over here on the right-hand side it includes this right here this include right here it includes an entire layout file so this main file this activity main layout file and includes a whole entire layout file which is going on top of it so we actually can't click HelloWorld on here because it's not it's not actually on this layout this action button is and so does the toolbar as you can see right here toolbar and this action view right here this custom view but click double click content underscore main dot XML and now we can access our hello world and we can start adding user interface so this is the screen we're gonna be working with this is the layout editor for Android you can also do this via XML but in this video we're just gonna do it here with drag-and-drop user interface which is really cool one more thing to point out if you click your Java folder here okay you've got one for test unit tests we're not doing any of those today and so we want this one here comdev slopes dot math sucks and double-click main activity I'm going to expand this here your Android will not probably look like this because I spent a couple hours customizing the styles and fonts and how this looks to be honest I kind of made it look like Xcode because I love Xcode and I like white themes but what I do want to show you here is go to Android studio preferences and you can go to appearance and you can change the theme from default to dark EULA if you want it dark which I'm sure most of you will choose because I'm the only person I know that codes with a white background so anyway if you want this it is available just message me on the chat rooms or find me somewhere else and I will send this these at this setting themes but to you so enough talking let's go ahead and talk well let's go ahead and just talk about what we're gonna be designing so there's a website that I refer to frequently when I'm too stupid to remember how to do percentages sometimes I just forget so what I like to do is go to Google and say you know what is X percent of Y and then there's this awesome website here called calculator soup and they have different types of calculations you can do with percentages so what is X what is this percent of this number or what is the percent of this number so if I said what is 10% of 100 and I click calculate y equals 10 okay so it's just a calculator that's all it is and for percentages and we're going to do the same thing but on an android app and we're gonna keep it in its simplest form so very cool stuff let's go ahead and get started so first off we know that we're gonna need to get just like in that website here we know we know we're gonna have to have a field here and a second field for the number so one field for the percentage a second field for the number and a calculate button okay and also we're gonna have some nice labels here you know that do the same thing what is this percent of this number and then we need a place to display the result okay so we're gonna need all those things so that's what we're gonna build first here in our layout editor so go over to your content main.xml and double click it and we're gonna have some fun so this hello world you can actually just click and drag it and we're gonna move it right there in the middle okay and it's a little bit small and what I want this to be is the actual result filled the total filled okay so let's scroll down here on the bottom right hand side these are the properties that are available and I highly suggest you look at the different things you can do and play around with them okay don't expect someone like me to go and tell you every little thing you need to go around and play around with these things here and what we want to do is just make it bigger so I'm up here at the top instead of wrapping the content for the width I want to change this by clicking the arrows here to feel parent okay so now it is filling the parent of course it's not centered which I don't like so I'm gonna scroll down till I see something called alignment text alignment right here and I can click this drop-down arrow and select Center okay one thing I also don't like is it's a little bit small so let's see if we can find a text size field which there is one right here and we're just gonna enter a number and I'm gonna say 50 and that looks that looks okay and by the way that's 50 DP okay density pixels it's not necessarily a pixel per pixel it's it'll be relative to the size of the screen so that's good 50 that's what we want in Texas hello world well by default we just want it to be zero kind of like it's a calculator so we'll just leave that there and this is starting to look really nice although one thing we do need to do is give it an ID because we need a references in the code so when you actually click the calculate button and knows which field to grab and put the value in okay so I'm gonna give it ID and I'm gonna call this total we'll call this the total text view this is a text view okay this is a text view if you're familiar with iOS this would be the same thing as UI label all right so there's a text view okay so we got the total view there now what do we need we need some type of other view actually that text view that will tell us you know what is well basically let's look at our design scheme right here we need something that that says this what is what is so let's do that now so I'm gonna go over here on the left hand side this is the palette that has different widgets and things and such in it okay if yours is not there you can access it by clicking the palette button and we are going to look for a textview in fact we can just click large text and I'm gonna put it right here in the center and looks good to me let's go ahead and double click it and for the text inside of it I just want it to say what is OK no big deal now we need a field right to actually enter the percentage like something that's editable so we're gonna do that with a an edit text so let's see if we can find that here our edit text here we go just plain text is fine actually we could do a number this will this will keep it formatted for decimals which is what we want so let's drag that number decimal here okay I'm gonna drag it over till it's centered and that's looking pretty good don't you think that we should have a placeholder in there that basically says enter a percentage or enter percentage I think so and so on Android this placeholder is not called placeholder it is called hint it's giving you a hint and will say enter percentage press Enter now I don't like that it's aligned to the left so I'm gonna go over to the bottom scroll down to the bottom here and click text alignment and we are gonna select Center okay that is looking good to me and while we're at it let's just go ahead and copy this command C or control C if you're on Windows and command V and it's gonna have this little orange box that pops up and I'm just gonna drag it right here and click that's pretty cool lets you place it and I'll drag it over to Center it the same as the other one except here we're gonna make us a enter number so go find the hint field hint I lost the hint let's click this field here enter here we go enter number instead of enter percentage okay so what is it what it'll show this percent we probably need a percentage sign so let's do that now let's command C and command V this textview and let's put it right there I'm gonna double click it and just put the percent sign and press Enter it's a little too far to the right so I'm gonna move it over here right next to this text field and that's looking good so basically we're saying what is 15% okay and we would say of so we don't have the of field here so let's put that now click B what is command C command V and let's put it right here okay double click it of and I don't think extra needs a capital let's make it lowercase here so what is 15 percent of and then this is a little too close let's see if we can move it down we might not be able to we might have to set some padding here but click click and drag down your number and yeah it's having some issues spacing here and so it's not doing what I wanted to do so what I can do is I can actually set some margin on the top of it so it's a little bit further away from the up symbol here so on the properties at the bottom right scroll up to layout margin and expand it and from the top let's say we want a 10 from the top and it pushed that up there right in the middle what looks like it's in the middle let's click it's a little bit off-centered here maybe actually we didn't need to change it at all maybe it was the layout guides that were messing with us here so let's set it back to zero let's see what it looks when I click off you know what that's not too bad I can live with that yeah you can always modify it later and play around some things so what is 15% of inter number that number very cool what else are we missing well we need some type of calculate button to actually perform the calculation so let's do that now on the left hand side you can just grab a button and drag it over in the middle somewhere a little off-center so I'm just gonna Center it there new button I'm gonna double click it and we're gonna call this one calculate all in capital letters and that's looking good okay that's looking nice now there's a couple things I don't like I don't like the color of the button I don't like this ugly blue oh my goodness and then this action button we're not actually gonna need it there so let's first off change the color of the calculate button we can do that by going to background and if we click that little three dots in the bottom right hand side we get a nice little color picker here and we could just pick a color that we feel is good for our application that looks nice it's a nice red but the black doesn't look too great on it so let's go ahead and change the color of the text down here you can click in the field and I'm sure you could do the same exact thing here pick a color you know or we could do something different we could do pound sign FFF FFF which is the hexadecimal value for white and make it white which i think is really nice now what we could also do is make this button a little bit bigger so it just looks nicer so let's try dragging things around so notice how it's not liking what we're doing right but when you add both edges over there it lets you expand it so one rule of thumb when working with the Android designer is if it doesn't work on the first try okay try moving it around and messing with it in a different manner now maybe you're saying that's not very scientific well you may find yourself getting frustrated because it's not working the way you want but you don't yet understand how things are working under the hood it doesn't just put things pixel per pixel where you want them it aligns things up based on the way Android XML layouts are set up and so it only works in certain types of ways so again play around with it until you understand perfectly how it works behind the hood and so now it's looking a little bit how I want it to look very nice and what I'm gonna do is actually copy this color here in the background on the properties I'm going to control C it or command C because I want to use it up here on this toolbar now if you notice I can't click the toolbar and change it well that's because it's not in this layout remember it's in the main activity so it's just nicely showing us the preview behind it which is really cool so there it is you can click on it and then what we can do is go down to background right here and I can just take all this off oops I forgot the pound sign there we go so now we've got a nice red banner here and this nice red calculate button at least I think it looks nice I'm also gonna click this action button this sa be okay and I'm gonna get rid of it by pressing the delete button so that is now gone and things are starting to look nice okay percentage of this number here now here's the question how do we get code talking to the views that is the real question of the day isn't it so go to your main activity dot Java oh look at this pretty theme you guys are like this is so ugly I think it's so cool I feel like I'm making an iPhone app you know what actually find is I have to have the perfect environment whether it's my house with the lighting cleanliness of room my IDE everything has to be perfect so I can be in a good mood and theme when programming like I'm not one of those people who can just jump on any computer and start coding like I have to feel happy when I'm coding and this makes me feel happy anyway you're like this guy's lame ok so a few things to point out we're not going in-depth onto everything because this is just an intro video it's already going longer than other people might make an intro video so protected void on crate this oncreate function ok as part of the activity and it will be called automatically when it is time to create the views and what happens is your code more or less we'll take your XML layouts and it will inflate them into actual visual things that you can see on this screen run some code behind the scenes to inflate those layouts and make them into actual views and so what we do here isn't this uncreate function is we will grab the views from the XML layouts and we will assign them to the code okay if you are familiar with iOS development this is similar to creating IB outlets where you can control drag from a control to the code okay although we don't get the luxury of that here with Android we've got to manually connect these things up so that's what we're gonna do now so we're gonna make our code talk to our views and so we know that we have to manipulate a few things or get data from few things one is we need have the the total view which is a textview we've got to edit text fields for entering data in and then we've got a calculate button which is just going to calculate the operation so let's go ahead and enter the things that we need now so textview in java you always put the type before the and also notice here how says android widget that's what you want sometimes there are other things that can they have similar class names as Android but you always want to use the Android versions okay so anyway so yeah the variable name in Java or the variable type goes before the variable name that's what I meant to say type before name and we're gonna call this first textview the this is the label so the total will call this total textview and i like to spell out what type of view it is just so in the code i know i'm grabbing the right one okay and what we're doing here is we're creating public instance variables here that we can later assign values to okay so textview total text view and then we also have to edit text fields right so edit text and the first one was percentage text are just called txt for short edit text and one more this one's going to be the number text where we put the number in okay that looks good to me and if we ever needed to mess with the button as far as like storing it or changing its name or whatever we could we could do that here but since we're only intercepting or setting it a listener for the click event we don't need to store these references here and so the reason why I kept this floating action button or I chose that template is so we could look at the default implementation of how to set a listener so we can just follow suit here which one of the ways that I always learn to code when I'm personally coding and learning new concepts is by looking at other people's code okay so down here what I'm gonna do is I'm gonna create a button this is an official Android button as you can see Android widget and also every time you create an Android class or implement a class it will automatically import the needed item at the top okay unlike iOS if you're familiar with iOS development you have a UI kit that includes all these controls and you only make one import with Java you import the specific classes you need for your project explicitly so we're gonna say button we're gonna say calc button okay equals and what we're doing here is we're casting we're gonna cast what the cast the view that we're finding so we're casting the find view by ID and we're gonna say our dot ID okay these are official IDs that you've registered in your project and you'll notice something here I'm looking for my percentage field but it's not there okay so if you're confused let's make this less confusing when I go back into my content main.xml and I click my enter percentage and if I scroll down here this ID just says edit text it's generic and it's not very useful so instead what I need to call this is probably per centage txt okay update usages as well this will update all XML references and Java are filled references okay so what you change here in the ID is going to automatically change in androids our file which stores all of your IDs and this is what we want and I'm gonna click this button so it doesn't show me this message again because obviously I know it's going to do that so I'm going to click yes then on this second one here okay I'm gonna scroll down to our ideas and this is the number so I'm gonna call this number txt which is what I want and did I give an ID to my calculate button no that just says button too so let's go ahead and call this calc BTN and then I believe we did set an ID on this guy here which we did a total textview so now we've got the appropriate IDs set so when I go back to my code my main activity dot Java okay and when I go into this find view by ID now I could say are that's capital R by the way also keep in mind there's Android different versions here Android support support support we don't want that we want the arf-arf for our project which is in this case comdev slopes taught math sucks so we're gonna say r dot ID and this is the button right so if I type in the letter C there's my idea which it wasn't there before so that idea is now available in the minute I do this it is now tying this button in my code it's now created a reference to this button that's in my XML layout so if you're familiar with iOS development this is the equivalent of connecting your iboutlet by dragging it over to your code where they connect this is what we've just done right now and of course it's grabbing a generic view from the layout file so we have to explicitly cast it into a button saying hey this view is a button it's not a edit text field it's not this it's not that it's a button so we're casting it here so we can appropriately appropriately use it okay you with me so far okay so now that we've got our button referenced in code we need to set a listener on it okay a click listener and if you are familiar with iOS development and I'll be saying this a lot so please don't get angry if you're not familiar with iOS development this was for the sake of all those iOS developers learning to code and Android but anyway this is equivalent to creating an IB action for a control on iOS so let's go ahead and do that now calc button dot set on click listener and you can actually just scroll down to whatever one you want and press enter ours is set on click listener and I'm just actually looking at the example code above because it makes it nice and easy and we could just save you dot on click listener okay this cool anonymous function here which will create an inline function here for us that will be called and so we're setting an onclicklistener and what we need to do is override the on click function okay or on click method okay in Java these are called methods not functions although they are equivalent we're gonna say on click so we're overriding the on click function and we're overriding it on the onclicklistener function of our button okay and so it'll take you a few times to get this right okay so basically we've set the onclick listener we've set this anonymous class function here which will be it's almost like an inline function or what you might call a block in objective-c or a closure in Swift and basically it's going we're gonna override this views this class that we're creating okay this view class that we're creating we're gonna override its on-click function for this button so we can perform an action and this is where we're gonna write our code to manipulate the views however if you've noticed we have not reference to these views yet okay we've done it for the button but we haven't done it for these so let's do that now so we're gonna say total textview equals and this is a textview so we need to cast it to a textview and we'll do the exact same thing find view by ID our ID in this case it's the total right so total textview grab that ID that we created in our XML file to reference the correct view and then percentage text equals this is an edit text field fine view by ID r dot ID dot percentage text and one more is number text equals this is edit text fine view by ID r dot ID dot number text so those are now referenced okay so what we need to do is now run the math and then take the values that are in the text fields and then set the total based on the information that's in the text fields so no big deal that's not a big deal so first off let's go ahead and grab our percentage that the user has entered in we'll do that right here I'll make this even bigger so you can see it here and by the way I'm doing command + and compliant command - to make the font grow big and small which is not enabled by default in in the Android studio settings which is also available in my my settings file which I'll make available to you so what we want to do here is first grab the percentage right so let's just call it a float because it could be a decimal value so we're gonna say float or float and we're gonna call this percentage equals and how do we get text from it well we can just do total not total percentage percentage text dot get text so this is how you get text out of it right by doing get text now by default it's not actually giving you something that you can work with as a string or an integer so we actually have to cast it here so we can say to string so we're gonna grab the text value out of the field and make sure it's converted properly to a string and what I'm actually gonna do so now that we've got the string we'll actually need to turn it into an value we can work with in mathematics which is a float so I'm gonna command X to cut this and what I'm gonna do is call float dot parse float and we're gonna pass in the string there are you with me so far so we're grabbing the text out of the text field converting it to a string and then taking that string and converting it into a float which we're storing here in the percentage okay now in order to properly do the math simple percentage math we need to convert this percentage into a decimal you remember how to do that so we'll just say float Dec for decimal and we're going to say equals percentage divided by 100 that's how we convert the percentage into a decimal now the last thing we need is the end result right so we can say float result or total since we're saying the word total everywhere total is gonna be equal to decimal multiplied by the amount that is in the number field okay this is this right here is just basic percentage mathematics if you're not familiar with it you can just look it up online and no big deal so decimal times well how do we get the value out so it was number text that's the name of the field dot get text got to string okay so we know that's what we need but I'm gonna go ahead and just command X this and parse this and do a float as well parsefloat and pass that right in there so now we've got the total okay all we have left to do now is assign that total into the total of view so easy as total textview dot set text and we're just gonna pass in total or float let's convert it to a string float dot to string and we're gonna pass in total okay so we're calling the official to string function or method of float and we're passing in the float value that we want to convert into a string and we are setting that into our total textview text okay so if all worked well in our code it should be working in our program so go ahead just click the little play button here and it should let you pick which emulator that you want to work with you may have one running I do not currently but you should have it right here Nexus 5 I'm gonna click OK and you'll see your emulator up here here this little nice little Android looking guy here it'll take a moment to load by the way I recommend that you do not close your emulator once you've loaded it for the first time because it could take a while to load and if you think it's broken broken don't worry I it you will usually it will usually come however if it doesn't come you can always look in your project for errors and I think we do have an error that we need to fix if you notice everything has these red squigglies you think that yelling at us one time would be enough but no and if you look down here in the console cannot find symbol variable fat well there's a problem because what we did was we deleted the view from our XML layout but we didn't delete it here from our code so let's go ahead and do that now highlight anything that has to do with the fab at the floating action button and just delete it and save it and then go ahead and try running it again this time select the runner the one that's already running there goes no errors no warnings you can see the icon at the top right it means it's successfully loaded and it will load automatically for us here now we do have some problems with our layout as you can see I didn't do exactly what we thought it was going to do when we actually dragged the controls into the application and so let's go ahead and fix this problem here you can see how the of is stuck in between the number and the percentage so let's fix that now if we go back to our code and go into content main we're getting a few rendering problems here which is problematic we don't need to worry about some of these right now what you can do is actually just click clear cache on this and it should show us what we need okay so we are here you know here's our file looks good here but obviously it doesn't look great when we're inside of when it's actually run on a device so let's let's talk about how we can fix this so let's do some debugging your first look and debugging a problem so click the of and let's look over here on the right-hand side and look at this layout alignment components here so we've got some alignment things going on and it's relative to the other views here if you notice what it's saying is hey I want the bottom of this of label this of view I want the bottom of it to be at the top of number text so the bottom right here is matching as you can see the top of this which is fine but what's happening is it almost looks like this number percentage here it almost looks like it's going down on top of it which is not what we want so what we can do is try something we can grab let's say if we align the top of to the bottom of this percentage right here so what we can say is the top so the top of the of view let's align it to the percentage text like so okay so but it's in this case it's excuse me that's incorrect we want we want the top bottom not the top top we want the top of the of the bottom of the second view so the the first the first off side on here the left side is the first component and the other side is the second component so what we're saying here scrab the top of the of view and align to the bottom of what review we're gonna select in this case we're gonna say percentage text okay see how it looks okay and it's a little bit too close I think so what I'd like to do is select of again in this time on the layout margin in the top let's set five just give it a little bit of padding it's not enough let's make it ten I see how it looks looks good to me now let's see if it actually looks good in the app so I'm gonna go ahead and run it just click OK there it goes and we lost our of label actually it kind of looks nice without it but I want to fix it so let's I'm not gonna play right anymore I'll show you that I'll show you a solution that actually works here but those are some very important information you need to know that you can actually align components what's happening here is there's not enough spacing in the components between the top and the bottom one so there's it's smashing the of out of there so let's fix this here let's take our of label here and let's go to the layout settings here just delete the the layouts of this label here what I'm gonna do is drag this calculate button further down okay drag it over and I'm going to drag this enter number field down here and I'm gonna drag this up and set it right there right in the middle command save and let's run it again when you're working with the visual layout editor you have to play around with things because it's doing very specific operations behind the scenes and I don't typically always build all my layouts with the little editor here and so this is good enough for now I'm not gonna mess with it anymore the of its it's close to where we want it to be but you're gonna learn later on how to take your views and actually modify them in the XML layouts to make them exactly perfect because the visual layout editor has some caveats so let's just see if I if our entire app works here okay so what's the percentage we know of so let's say 10% okay of what is 10% of 100 if I click calculate it says 10 I think that's correct let's take a look at our calculator over here let's try it a different one that look that is correct by the way let's say what is 15% of 2500 I know their calculator works so let's click it so 15% of 2500 is 375 let's do the same math over here I'm going to say what is 15% of 2500 and click calculate and it is 375 my nads zero so there's some more formatting we could do but that's it you've just built your very first Android application your view is talking to your code we purely use the laid out editor which we could play around with it wouldn't be hard to get this up thing where it needs to be back do it on your own play around with this some more in fact I recommend that you actually do some of these other calculations in here as well to build out to build out this calculator here but that's it Android very first Android app for you there mark Pricer dev slopes calm exciting times see you later hey thanks for watching this video everybody this is for my upcoming Android course and this will be part of it as well as a huge amount of other lessons and tutorials everything you need to know basically about Android and you can sign up now and get an early bird discount as well as get early access to this course by going to learn dev slopes comm /and this will be coming out within the next two months and it's gonna be a pretty big deal one of the most comprehensive courses on Android development ever I built 58 mobile apps to date and have built many Android and iOS apps wife seen both sides of the spectrum and I'm gonna teach you how to be a professional developer not how to just copy and paste code so go to learn dev slopes comm slash Android and I'll see you in class [Music] [Music] [Music] [Music] [Music] [Music]

Channel: Devslopes

Views: 1,023,939

Keywords: android studio, android tutorial, devslopes, android studio tutorial, android studio tutorial for beginners, android studio tutorial for beginners 2018, how to build an android app from scratch, android app development, android tutorial for beginners, android studio app, android studio app tutorial, android studio tutorials, coding android apps, make an android app, android application development, android development tutorial, android development basics

Id: F-k5gwz_91o

Length: 52min 17sec (3137 seconds)

Published: Tue Dec 22 2015

Reddit Comments

[u/phacus]

Thanks!

Bookmarked. I'll check it out later!

[u/[deleted]]

Will definitely watch.

[u/Drplauska]

Thanks!

[u/joerdie]

Why can't people just start videos? I really don't need the star wars conversation up top.

[u/[deleted]]

This is exactly what I need. I don't really like Google's udacity course.