Android Kotlin Beginner Tutorial (Google I/O '17)

[Music] hey everyone welcome back Johnny be here with dev slopes calm and in this lesson we are going to install android studio and some of the other things that are needed for android studio to run alright and so you may notice that this looks a little bit different from my regular computer that's because I wanted to do a completely fresh install so that you guys can see me go through step by step instead of you know there might be some stuff already installed on my computer and and so we just want to do it a fresh install alright so we're gonna go ahead and do that and we're gonna open up Safari and so the first thing that we're gonna need is JDK the Java development kit okay so to work with Kotlin which is based on the java virtual machine we're gonna need jdk and android studio also needs it so all I gotta do is search for and install JDK and then we're gonna come here to the Java SE downloads click here and then this is one we bought in Java platform JDK let's go ahead and click here and since this is the setup for Mac we are just gonna come down here and look for the Mac OSX download it looks like it's about 230 Meg's so this might take just a little bit of time so I'm gonna click here oprah's you got it accept so accept the License Agreement yep totally read that and then we click here and just let that download and I'll be right back once that's done alrighty so the download has complete so I'm gonna open up my downloads folder here and let's just open up and run this dmg here alright so we are opening there fine checking volumes alrighty so then we are going to hold on decide later we're going to double click on here to install the JDK yeah I guess it continues it's gonna take up a whole bunch of space no all right it's next step kudos um hey and we can move the dmg to the trash sure why not all right so now we have our JDK installed next step is to go and get Android studio so I'm gonna open up a new tab and just search for Android oopsie Android studio all right we can come here to download Android studio and SDK tools and so if at the time that you are watching this this it says right here is 3.0 or above go ahead and click right here alright but at the time of recording the the version of Android studio that has Collin built in default that's in beta alright so what we want is come up here to where it says preview so we're gonna click on preview so this is their beta area alright so we were going to download download 3.0 Canary 8 alright so we're gonna click here from mec and we are going to accept the terms and conditions and click on download 3.0 alright so that's going to download and yeah so holla be right back once that's finished alrighty that has finished up downloading so I'm gonna go ahead and open up my downloads folder again and look at that it is already installed unpacked and everything all I gotta do is just drag this over into applications so I'll just drag that over to applications and let's go ahead and run it all righty so we're verifying it okay it's gonna give us a little bit of a security notice just to make sure that we know that we've downloaded it from the internet and give us a chance to refuse opening this potentially dangerous app but we know it's a good app comes from Android website so whenever we're all good there and it's going to fire up here in a sec alrighty so then it's going to ask us if we want to import studio settings from so if you have a previous version of Android studio then you can go ahead and import studio settings from from that one so that you can carry over your your settings since this is a brand new fresh install I don't have any import settings so I'm going to say ok you can see here it says powered by the IntelliJ platform and if you remember IntelliJ is an IDE that is developed by chip brains which are who are the creators of Kotlin are so IntelliJ JetBrains call in an Android studio are all well intermeshed so that's good for us ok so now we're in the Android studio setup wizards I'm going to say next and now we're just doing gonna do a standard install so I'm gonna say next and right here's gonna show us all of the things that we need to download and and install to get Android studio up and running we got the emulator which is the Android simulators we have the build tools Google repository the hexam emulator accelerator which is really important for us because we need I mean what-what hexam does that it really increases the speed that the emulators are able to perform app so yeah I'm just gonna say finish and we're going to download all of that stuff hopefully doesn't take too long and I'll be right back once that's done alrighty so that went according to plan so everything has been downloaded so let's go ahead and save finish and then we are ready to open up and start a new Android studio project let's go ahead and do that okay right-click her just that click here and we're gonna go over all this stuff in-depth here in the next couple of lessons but just real quick I wanted to set up a couple of more things so we're just gonna go ahead and do some stuff here so I'm just gonna say test and then whatever you have in here is fine set your location by default it goes into your Documents folder and set up a project called Android studio projects that's fine for now it's gonna say next and then right here we have our phone and tablet which is what we're going to be working with mostly and it asks us to select a an API so there's going to be our min API so I'm going to select our Android 4.3 jelly bean and again we're going to talk a lot more about this in depth here in in the next lessons like I said this is just to get everything set up so I'm gonna say next and I'm going to choose an empathy activity and say next and main activity and all this is the defaults is fine so I'm going to say next and then we're gonna save finish all right so we are finally loading up maybe able to hear the fans on my macbook pro just screamin sounds like something that's about to take off from an aircraft carrier or something so yeah Android studio is a very heavy on the CPU this is a this is a pretty brand new MacBook Pro - all right so here we have what pops up the tip of the day and those are useful sometimes so I usually you can turn it off or up you can turn it off or leave it on I would leave a month occasionally there's something interesting in there and but yeah here we have our first project and it looks like it's still building some stuff so we're gonna wait for this to finish all righty so project is finally all the way up you can hear my fans winding down after that Herculean effort of opening a project and yeah here we are this is Android studio we're not gonna go we're still not gonna dive too much into Android studio like what all of this all these buttons are and everything does because we're still in setup phase so what I want you to do is come over here and look at the look for this button here got a blue arrow pointing down and it's called the if you hover over it it'll come up and say the SDK manager all right so if we click on that it's gonna pop up and it's gonna show all of the SDK platforms that are currently installed all right and so what this does is this allows you to run on your emulator different versions of Android okay and so in the Android world if you're coming from iOS most users are not on the latest operating system which in this case is Android oh and so you'll find that to support even a large percentage of Android users you have to go pretty far back in the Android operating systems so to be able to test that your app works correctly on some of those older systems you need to be able to run your emulator on it and so you need to have all of some of these older ones installed all right and so I'll typically go back to about API level 18 and I think that covers about 90% or so of users so if you want to do testing and make sure that your app is working for those older versions then you need to click on all of these or have whichever specific API levels you want to test on and then you'll say then you'll hit apply okay I'm actually not going to do this because I have all of these already installed on on my computer and so once once I switch back over to my computer you'll see that I have all of these installed but for you guys if you want to be able to test on older versions of the of the Android operating system it's not technically even required you could submit an app that only works on android 8.0 on the on the newest operating system but you are only going to capture a very very very small market in fact if we let's go ahead and google this if we say something like Android operating system distribution maybe that should probably get us there let's see here is this it let's see here dashboards okay yeah platform versions so you'll see here that right now nugget is the latest version oh is still in beta I believe and so even the very latest nugget it only captures only has 10% of the android market 30% is on marshmallow around 30% is on lollipop and about 17% is still on KitKat it looks like there's actually a pretty small percentage in jellybean so I might actually move my minimum SDK up to 19 I'm thinking all right and so yeah so that's that's that's uh that's kind of a breakdown very few people are at anytime on the very latest version of the of the operating system so yeah go ahead and download as many of the older SDKs as you want to over here we have some SDK tools if you don't have this right here the Intel x86 emulator accelerator hacks an installer installed go ahead and install that as well we're going to be using that for our emulators and that's about all we need for setup so in the next lesson we are going to take a look at the Android emulators and learn a whole bunch of stuff about how awesome they are alright so I will see you then [Music] welcome back Johnny be here with dev slopes calm and I hope you're excited because in this lesson we are going to create our first Kotlin app so you may be panicking thinking well Johnny I haven't even learned any Kotlin yet don't worry there's not a whole lot of actual Kotlin code in this app the main point of it is to give you an introduction to Android studio a taste of Kotlin and honestly mostly just to get you pumped about developing for Android all right in the next section is where we're going to jump into learning more and more about Kotlin the actual language alright so let's go ahead and take a look at the app that we are going to create it is called dinner decider and you know how it goes when you're sitting around with your friends or a significant other and it's dinnertime and you ask them you know what do you want to eat for dinner and they say I don't know what do you want to eat and then you just keep going back and forth like that until you starve to death well dinner decider to the rescue all you got to do is say right down here you click on decide and it will tell you what you are going to eat for dinner and the dinner decider is the final decider so whatever you click here and it tells you that is what you're going to eat all right but not only that if it doesn't come with we're gonna program it with about five initial food food types and restaurants or whatever and but if you don't like what is in there already you can add your own food that's I can click here and say something like I don't know McDonald's if that's what you're into and then we clicked on the check and say add food and then it's in our array of foods and if we click on this there we go you can see that we are restaurant or food style that we just added alright so it's a pretty cool we're gonna learn a lot of stuff here so let's go ahead and get started I'm going to start off creating a new project so let me just go ahead and pull that over here and we're gonna call this dinner decider or you could do dinner picker or whatever you want to call it all right and here we have our company domain alright and so here what we want to do is have this needs to be a unique identifier for for you because if you look down here your package name what's going to do is going to take your company name so right here you see this is Johnny be calm and then it's going to take your application name and it's going to create a package identifier in a reverse DNS format so it's calm Johnny beam so kind of the reverse of your company domain and then the application name right here alright and so what that is doing is that's creating what is hopefully a unique identifier for your project and that needs to be totally unique across all apps that are on the Google Play Store so instance if we go ahead and open up Safari I'm just gonna drag a window over here and you go to the Google Play Store and we come in here to apps and we just click on a random app let's check out fruit ninja and then you look at the URL here you'll see com dot Halfbrick dot fruit ninja and so that's this particular apps bundle identifier alright and so I'm not sure if it's all the way to free or if that is part of the category that it's in but anyway so that's that's a what the package name is for and then of course since we're going to be working with column we want to check right here and then we can select a project location I am going to put mine on the desktop here so I'm going to select the desktop and say open and that's going to screw some things up it says so I want this desktop and then dinner decider there we go all right then I'm gonna say next and we were going to pick our iPhone and tablet we're not gonna messing with where or TV or Android auto but it's pretty cool that you can know that these things are available to you should you decide to develop for them working with Android can open up a huge you know just so many things run on Android but yeah but we're gonna be working with phone and tablet and right here we are going to be targeting our minimum SDK so we talked a little bit about that in the last couple of lessons what is the SDK and how you know not all Android devices are running the most current and I saw that 19 is actually supporting about 90% of devices and so that's good enough for me you know 90% of people is pretty good and so again if you click here on help me choose it'll kind of give you a breakdown of the distribution of users on the Android operating systems alright so that's pretty cool alright and then so that's good I'm gonna say next and then we're just going to go with an empty activity but there are a whole bunch of templates here that you can use to get started things like a navigation drawer so you have a slide-out menu things like Google Maps a Google AdMob ads template and we'll be using some of these later on in the course but for right now we're just going to be using this empty activity so I'm going to say next and the activity name so this is gonna be the name of our Kotlin file that is the kind of that controls the the code for the layout and then the layout name itself so and then you can as we want we definitely wanted to generate a layout file and then you can check whether or not you want to use backwards compatibility and so what comp activity does well we'll talk about that a little bit later but basically it just provides some backwards compatibility for some material design features and some other things all right so I'm gonna say finish all righty so we have our brand new project open here and it opened up our main activity Katie file so the dot Katie indicates that it is a Collin file and then the other one that is in here is our activity underscore main so the main activity Katy filed is the the code that is going to kind of drive what occurs on the UI and then the activity main is our layout so here what we're looking at is what's called XML all right and so we can either design our UI in XML and so what we have here is a textview and you can see different properties of it the width the height what it says the text here our layout constraints and so if we go into the design tab here we can kind of see what that looks like visually alright so we have here a our our view we have one text field and it is constrained you see these little zigzag ease kind of look like Springs those are our constraints alright we can kind of move this around and the constraints will update accordingly and we're going to talk a little bit more about this here in just a bit but we're going to do a little bit of a speedy run-through of Android studio first alright so over here we have our project hierarchy and so we have first app here and then we have three folders manifests Java and resources so here a first-in manifests we have what is called the androidmanifest.xml file so every every application must have an Android manifest XML file and it has to be named exactly that and it's in the root directory basically the manifest file provides essential information about your app to the Android system which the system must have before it can run any of the apps code so if you take a look in here we have things like the icon launcher the label it's more icon launcher stuff what the theme is what the main activity is so you see here that main activity so that's referring to this guy right here so that's basically just some important information that the app needs to know right now you don't need to worry too much about this we might go into it a little bit more in detail later on but the second folder we have here is the job folder so in our case we're not working with Java files they are in fact Kotlin files but the folder is still named job so we got a couple of folders here we have the top one com Johnny be dinner decider and so this is the main one that will be working in which will hold all of our all of our Collin piles and then you have a couple more Android tests and tests so here's just some example instrument tests and unit tests okay and so that's what we have in here and here's our entry main activity collin file and we'll come back to this one then we have our resources folder here we have drawables this is where we're gonna be putting our images and other assets we have the layout folder which contains our view and activity and fragment layouts themselves we have MIT map which contains our icon launchers so if we look these out you see these are the icons that are actually visible when you launch the app from your phone let's see here then we have values so here in the values we have a few different files we have something called colors so this year this color primary is actually the same color as what you see here in the in this menu bar and we'll be updating those here in a minute and then the last thing that I wanted to go over real quick is here we have a folder called Gradle scripts alright and so Gradle is a pretty confusing topic but luckily you don't need to know too much about it starting out basically all this stuff all of these scripts all these properties and everything what it does is it takes all of your files your resources your images and everything that you have in these folders and it packages it up it converts it into the correct bytecode packages it up and turns it into our apk file or Android package kit and the apk is what you need to be able to install apps that's the file that you upload to the the Android developer site when you release apps and so that's what the Gradle does most the time when you do work in it you'll be working here in the build Gradle and then module app all right so if we open this up we can see that we have a few plugins so we have the Kotlin Android and Android extensions plugins which lets us work with Kotlin in Android studio you can see that we have a target APK we have a or here's the target SDK target SDK a minimum SDK version the application ID down here in dependencies this is probably where you'll be doing the most work is if you were using like Google API soar firebase or any of the other third-party libraries that you want to use you'll put those dependencies right here and when you make changes so even adding some spaces trigger the changes it'll say Gradle files have changed since the last project sync a project sync may be necessary for the IDE properly and so you just click on sync now since I didn't actually make any real changes I guess I'll do it so just to show you so when you click on sync it'll say Gradle project sync is in progress and then it all reload the necessary data for that change alright so that's a pretty quick overview hey let's see here anything else we can run the app from right here we've already looked at the AVD manager for our emulators we've already looked at the SDK manager so without further ado let's let's jump into actually working on our app a little bit alright so let's start out and work on our layout okay I'm going to open up our activity main.xml and we are going to actually first off we're going to work in the values because look I don't like these colors that we have so here under values we're gonna go to colors dot XML and you can see that we have here or this is another XML file we have a resources tag that is opened and then closed here and then we have three color variables with names and their values all right and so the what we're going to do is we're just going to change these values and the values that we're going to change in to come from our design which which gives us this these these two nice cause we're gonna get this color and this color and I already have those that is five a seven e 8c okay and so we're gonna put that one here and for the primary dark right there as well and then the accent color is a little bit lighter and so that is CC seven or CC d 7d C alright let's go ahead and save that and jump back into our activity main and now you can see that the menu bar here has changed to our color that we want alright and let's check out this hello world and so let's talk briefly about these constraints I'm not gonna go too heavily into it as we're going to have a whole section devoted to talking about the constraints but basically when you have so many different screen sizes like Android does you need a system so that even when you have go from a little tiny screen all the way up to a tablet you want to be able to have the UI elements know where they need to be and where they need to be in relation to other UI elements and so that's what the this constraint system does for us you can see here that we have constraints to the left the top the right and the bottom so basically you can kind of think of these constraints as bungee cords or Springs kind of just holding things in place and we'll go more into more depth later on all right so this hello world text field that we have I think this can double as our food label all right so what we're going to do is first off we're gonna give it an ID okay so IDs are very important because that's what that's the ID that is going to help us or that's going to allow us to reference this UI element in code okay so we're gonna call this selected food text okay and then let's go ahead and customize it a little bit let's go ahead and say instead of hello world let's give it a default value of say Chinese food okay so we're gonna have the default be Chinese and then let's go ahead and change the font to family so if we click here on the font family and click on the arrow here we can come down here to more fonts and then we can come over here to your downloadable and what we're gonna do is we're gonna search for one called muley okay I'm going to select it here and then over here we're gonna go with bold alright and what this is going to do is it's going to go ahead and download our font to our to our folder over here and the resources I'm going to say okay and then you can see here and resources that we now have a mule Ebola XML file here in the font folders alright and so that has changed the font for that text view and then we're going to go ahead and change the text size let's bump that up to maybe like 24 maybe maybe 30 alright and so here you see that is 30 SP SP stands for scale independent pixels and that is used only for fonts the SP for images and other UI elements will use what is called DP which is density independent pixels alright so SP is used for text size and what that does what the SP does is we'll talk a little bit about this more a little bit later when we talk about DP but different screens have different resolutions or meaning in the same area of screen you could have a vastly different number of pixels you could have a very low resolution screen with just a few pixels or you can have a very high resolution screen with a whole hmm you know thousands or millions of pixels and so with SP scale independent pixel what it does is we're saying text sizes 30 and 30 SP so this size is going to look roughly the same across different screen resolutions alright so that's what the SP and the DP do it makes whatever size that you pick as long as you choose SP or DP for other UI elements like images then it's going to look roughly the same across different resolution sizes alright and so we got Chinese here so it's going to be our our food type and then let's also change the background color here so we're going to switch over to our XML version and so the top most element here is a constraint layout alright and so what we're looking at here in our in our overall view our screen here this is a constraint layout at its uppermost component in the tree so everything we put into this view is going into a constraint layout and so that's why this is the top element in our in our XML file and so then inside of it we have other text elements so we have here a text view and in fact if I copied this and then pasted it what we would end up with and this is yelling at me because it can't have the same exact ID so if we just change that and then jump back into text view or design view you'll see that we now have two text views they are right on top of each other right now but if I move one you can see that we have two now but we don't we don't need to so or at least right now so what I wanted to do was in here change the background color of the overall constraint layout all right so here you can see that we have some attributes such as the width and the height which is match parent and so what that is saying is that the constraint layout should expand to fill the parent in the height and width directions so we're going to do we're going to change the background colors I'm going to say Android I'm gonna say background and what we want is the color accent so just like that so we're sanding the background equal to the accent color alright so let's go ahead and see what that looks like if we go back to design hey there we go so now we have changed our background color we have modified and given our text label a little bit of an upgrade and we've gone over a lot of the a lot of the Android studio features and how it's organized we've talked about the manifest file the Java Kotlin files folder the resources how the drawables work talk a little bit about the Gradle script so in the next lesson we will finish up this app we're going to we're going to be working with some images in the drawables file we're going to be looking at buttons and seeing how how we can use those in code and you'll be writing your first a little bit of Kotlin all right let's hope you're excited for that and I will see you in the next one [Music] hey there ladies and gentlemen welcome back Johnny be here with dev slopes calm and in this lesson we are continuing on with our dinner decider app we left off last time just finishing up adding a text view in our in our layout here we have also modified the menu color and the background color here in our colors Alex ml file and we learned a whole lot of stuff about Android studio in general oopsey alright and so what we're gonna do next is we are going to add our our icon alright so we see here in our in our in our app we have this nice-looking icon here so let's go ahead and add that it's how we're gonna do that is we're gonna go here to drawable here and under our resources folder and I'm going to right click on the folder drawable and then I'm going to go to reveal in finder okay and that's going to show the drawable folder alright and then what we're gonna do is I want you to get the assets folder that you downloaded should be attached to the previous lesson and take a look at the dinner DS header assets folder and you're gonna see that we have five folders here and it's going to say drawable - hdpi mdpi xhdpi xxhdpi and X X X X hdpi and those hold the yeah the logo in different pixel sizes alright so we're gonna do is we're going to select all of those we're gonna copy command C and then here in the resources folder right here I'm going to say ctrl or command V to paste it and then we can close that out and then if we come over here to our folder here under draw bowls we should now see a DD dinner dice header underscore logo and we can check those out right here alright great so now we have our logo in our drawable resources so now we can use it inside of our layout so let's go ahead and add an image alright so here is our palette and this contains all of our UI elements that we are able to add if you click on all you'll just be able to see them all here in their widgets you got them categorized widgets text layouts containers images etc you can take a look at through here and see what kind of goodies you're able to just drag and drop into your UI interface all right so we're going to be working with an image of you here so I'm going to drag an image view and just pop it in here and then it's gonna pop up here and ask us give us the option to give it a specific drawable right now and we know we want the logo here so I'm gonna select it and press ok and so there we have it I'm gonna zoom in here using command and I think I'm thinkin let's let's make that a little bit bigger so what we're gonna do is it here is I'm gonna select layout width and I'm gonna specify 150 DP of width and 150 DP in height and actually I think that might be a little too big so let's actually go with 120 DP and 120 DP on the height I think that looks a little bit better so I'm just gonna drag that up here and here on our text label what I'm gonna do is I'm gonna actually remove some of its constraints so how you can do that is if you see here we have these filled in circles and these are the constraint handles and you can add or remove by clicking on them so right now since we already have one I can click on it and it'll delete that constraint then it's gonna fly up to the top because it still has that top constraint then I'm actually going to delete the top constraint as well okay so it's just floating all it knows is that it needs to be constrained to the left and right by this amount all right and so what we're gonna do here is we're gonna give the logo here constraints we're gonna constrain it to the top here so hovering over this circle here I'm going to create a connection and then you just hold it and drag to the top then I'm going to constrain it to the right I'm gonna hold and drag to the right and hold and drag to the left and so that's going to Center it horizontally by default when you give it left and right constraints and then here over on the right here this is another view for our constraints and since I have left and right constraints this slider here is a horizontal bias and so I can give it a horizontal bias of any number between 0 and 100 so if I bias it 100 to the right then it's going to be all the way to the right if I bias it to 0 is going to be all the way to the left we want it to be right in the center okay and then up here we have margins all right and so if you'll see here this has an 8 right here which corresponds to this 8 here and so this constraint has a margin of 8 and then here we have a margin of 48 which i think is pretty good maybe like 50 and so what that says is that the imageview is 50 from the top view here and so then with our label what I can do is I can constrain this label to this image view okay and then now it's constrained to the left right and the bottom of this image so then I can give it a margin of say 24 and that looks pretty good and our UI is starting to come together now I want to talk real quick about our sizes here we said that we were setting this to DP and what that stands for is density independent pixels and so I wanted to go over a little bit of the documentation with you that talks about that so here we have at developer.android.com slash guide slash practices slash screen support if you're just google android screen support i'm sure this will pop up first thing and what this article talks about is the different range of screens that are supported like you know Android has tons of manufacturers tons of different screen sizes tons of different resolutions and so what they try to do is make it a little bit simpler using what they call density-independent pixels because you know kind of what this part made me laugh it says to simplify the way that you design your user interfaces for multiple screens Android divides the range of actual screen sizes and densities into a set of for generalized sizes and then a set of six generalized densities l ldpi mdpi all the way up to X X X X dpi and so what that is referring to is the density pixel the the number of pixels in a given screen okay and so you have the six that we're dealing with that's why in Android studio when we added our logo we had five folders with the different density pixels and so what that what that does for us is here it says talks about the density independence as your application achieves density independence when it preserves the physical size from the users point of view of user interface elements when displayed on screens with different densities maintaining density independent independence is important because without it a UI element such as a button appears physically larger on a low-density screen and smaller on a high-density screen all right so we have some examples here so this is on three different screens that does not have density independence in it so you can see here that on the low-density independence so we could say here there might be this might be two by two pixels okay so two by two pixels and if this is going to be a two by two pixel label then on the low-density is going to look big but then on the medium density screen since there are so many more pixels the image and the text field looks smaller and then on a high density screen is going to be even smaller and so what density independence does is you can see here so these three screens it has density independent and so it roughly looks the same across your different resolution and different well resolution it's the same across your different resolution sizes all right so even if you have a super high density screen your UI element is going to look the same as it does on a low-density screen and so that's pretty awesome that's super super helpful when we're dealing with images and other UI elements so that's why we use DP when we specify sizes for our UI elements all right so we have added our image logo we have our label and we've have we have some constraints for for these two so now if I change what size were in if I go to say a Nexus 6 which is a lot bigger we still keep the same location relative to the screen and we're still 50 from the top and we are still centered even if we change our orientation so right here let's see here right here we can change their orientation in the editor we can switch to landscape we're still going to be 50 from the top and we're still going to be centered all right so that's what that's what we mean when we when we talk about constraining objects so that they know where they are fixed in relation to the screen and other UI elements just to go over real quick here some of the some of these buttons that are related to our layout editor here we have what is called the blueprint so this is the regular view and then this is the blueprint view kind of shows a little bit more always shows the constraints and shows their margins and everything let's see here here we can change the size of the of the of the screen that we're looking at this looks the api's you can change your app theme here and this is has to do more with the constraint layouts you can remove all constraints if you click on this and you can set a default margin here and we'll go over some of these other ones here in a few lessons when we talk about when we dive deep into into constraint layout alright so what do we need now we got our logo we have our text label we have these constrained let's take a look at our app here and it looks like we're going to need a couple of buttons and a textview alright so let's do this bottom button first the decide button alright so we're gonna come back over here to our palette and we're going to add a button so that's under widgets okay and we want a button here so I'm gonna pick this button and we're just gonna drag it down here to the bottom I'm gonna go ahead and zoom in here maybe a little too far here we go and what we're gonna do is we are going to constrain it to the left so I'm just clicking and dragging to the your right and then also to the bottom okay so now we have it constrained at the bottom but we want it to go all the way and so we're gonna do is we are going to well first we're gonna change this the button style here I don't like this kind of rounded style here so I'm gonna select here and we're gonna do borderless okay and then we're going to get rid of any margin here so the bottom margin is zero so it's right flush against the bottom we'll change that here as well and here as well and then we're going to go ahead and just we're gonna drag this all the way to the edge okay and let's go ahead and what we can do is we can change the type of constraints right now we have fixed so whatever we have is going to be fixed to that size what we can do is we can pick this one right here alright and so this is called match constraints and so the constraint is set to the left and right and so we are saying match it to that so it's just going to expand to fill out the entirety of the constraint alright and then let's go ahead and add a background to this button so here we can select background and if we click here we can select instead of a drawable a color and since we have kind of our built-in colors we can say color primary which is good so I'm going to say okay and so now we have a nice background color on it then let's go ahead and change the text so this is going to say decide exclamation point and we're going to change the the font family so we're gonna go with muley bold and then we're going to change the text size let's go with about 24 maybe a little small at 20 maybe 18 I think that looks good and we'll change the text color to background light looks good alright so now we have wait for this to catch up there we go so now we have our button alright wonderful and just like we were talking about in the last lesson our UI elements that we want to reference in code they need to have IDs all right so I'm going to click here on this buttons ID and we're gonna call this the side button okay so that looks good and you know I think that buttons I think that buns taken care of all right let's go ahead and add our text field and so this is gonna just be a plain text okay it's gonna put that here and let's go ahead and give it an ID right off the bat and we're gonna call this add food text because this is the text field that we're going to enter the additional types of food styles or restaurants that we want to added to our array of restaurants or foods that we can go eat at alright so this one's gonna be right here that's fine I'll just change the font family to movie bold that looks good text size is fine I think everything looks good with with this text field so we'll just go and put you right here for now and then we're gonna need one more button alright so I'm gonna grab this button and pull it out here and this one is going to be called so I'm going to double click and that lets us add food all right so I just renamed the button to add food and similar to this button down here we're going to go ahead and change its style to borderless we're gonna give you the background color our color of color primary I say okay and then I'm gonna go ahead and just move it and line it to the left of this guy right here and then I'm going to just drag it over okay and just give it a whoops just give it a sighs that looks pretty good there and let's go ahead and change the font to family for this button gonna say newly bold and then the text size I think I feel looks okay and let's change the text color to white so here background light say okay alrighty so now we have our text field we have our button and so uh yeah let's go back to our text field though we don't want it to say name let's see here so text actually we're gonna get rid of the text so delete it and then here at hint so this is kind of some placeholder text it gives the user a hint of what we want it to say and we're gonna say add new food Dada Dada that okay and so now they know that they can add a new food here and then they'll add it by clicking on the button and let's go ahead and give some constraints here so one cool thing we can do is we can right click and say a line or Center and we can say Center horizontally and that will add our - left and right and center it and then let's hope let's constrain this button to the bottom button and let's set it here so that it will bump it up maybe like 40 maybe a little bit more how about a about 70 I think that looks pretty good yeah let's go a little bit more let's go 80 all right and then we can drag this right to here and we can right click and say Center and let's Center it horizontally and then we're also going to just guys zoom in here a little bit we're going to constrain right here to right here all right so we're constraining the the vertical distance between these two elements and setting that to maybe 24 it says ooh Matt a little bit see how that looks and I think that looks pretty good all right so now we have all of our UI elements in here we have them all constrained and everything's looking real good we do need to add a couple of IDs still I think what do we have here we have the ID for this one I don't think we have the ID for this button all right so this is gonna be add food button all right so now I think we have everything that we need - okay so if you change the ID sometimes it'll ask you this it'll say so we change the ID and says this will update all XML references and Java our field references so yes we do want to do that and don't ask me again so thank you I think we have everything we need to jump into code and actually start doing a little bit of Kotlin all right so let's do that come over here to our Java folder and under the dinner decider folder we're gonna click on main activity and here we are here we are in our Kotlin file all right and so if you're coming from Java the first thing you might notice is no semicolons yeah you don't have to worry about ending every line with a semicolon so that's already right off the bat pretty exciting but wait there's more so well before I get into the and more let's take a look at this file all right so we're here we have a class okay so we'll talk about classes later on but the classes our main activity is what it's called and what this is is it's extending at Pat activity and we'll talk a little bit more about extending and inheritance and all that kind of stuff a little bit later on but basically this is saying that the main activity inherits certain attributes from this appcompat activity all right and so then we have this function override fun oncreate and so in Kotlin we have the fun keyword to indicate functions and so when we first start out with a file in Android we're going to talk more about the lifecycle of an activity in Android later on but oncreate is the very first function that is called when the when the activity is created after coming over from iOS it's the same thing as viewdidload all right so it's the first active pairs the first function called when the activity is created and so how kind of the flow goes is we have our manifest Android manifest you know it is looking here and is going to look for main activity and so that's this file here and then we have our on create function which is the first thing that is called when the activity is created and then we have set content view alright so this is kind of setting up the the layout that the user sees and the layout that it is setting up is low and behold our our dot layout dot activity main which is in right here if you just follow the path our is resources layout is this folder here and then activity main is this layout file that we've been working on all right so that's kind of the flow of how you know when you start up your app a checks out which is the first main activity to load and then on create it goes and checks out which layout to actually load and show the user all right so that all aside now back to the and more exciting and more that I mentioned earlier for Kotlin is that in previously in Android in Java you would have to find by ID all of your darn little UI elements all right but watch this so we set an ID for our food label right so we said sit mmm what did we call it I forget let's go back and look so back in here this guy right here selected food text all right so that's what we called it so here in our on create I can say selected food text and if I press Enter you need to wait for the autocomplete if I enter then it says import : X Android synthetic that main that activity main and so what this does for us is we can reference directly the elements in our layout without having to do that whole find by ID nonsense all right so I can write here say selected food text dot text is equal to say Burger King and then if we run this let's go ahead and run it this is our first time running it so let's go ahead and check out how it looks I'm going to press ok on the Nexus 6 emulator you can choose whichever one that you created in our last lessons and there we have it so we directly set the value of this text field in code and so that is that's a that's a pretty exciting thing for for Kotlin you know being able to reference directly our UI elements and in the next lesson we're going to go ahead and go through all of the code and logic to finish up our app all right so I will see you in the next one [Music] all right welcome back ladies and gentlemen Johnny beer with deaf slopes calm and in this lesson let's finish up our dinner decider app alright so what does our app do well it stores a list of places to eat or styles of food like Chinese American Mexican food you know however you want to write it and then it will go through and every time we click the decide button is going to randomly select one of those and display it we can also add to that list with the add food button all right so let's go ahead and get started on that so here in oncreate I'm gonna delete what we had before what we need to do is we need to know when one of those buttons is clicked right and so how we do that in Android and Kotlin is really simple we can say we can reference one of our buttons we can say decide button and then I'm going to say dot set onclicklistener okay and so this is a method basically saying whenever that button is clicked we're gonna listen for it and then we're going to do something so whatever whenever is click whatever is within these two curly braces is executed alright so this is the decide button and so we can just say print line and we can say you clicked me and then we can run that just to test it out alright so we got our emulator up here and so if I click here click I clicked on this side we need to open up our logcat here and there we go you can see you clicked me alright so if I click on that again it'll keep printing that out alright so we know that our onclicklistener is working so what do we need to have happen when we click on it well first we're gonna need an array right so we're gonna do is we are going to create that list the MAL food this is equal to the list of and we want and array list of let's see here this one right here ArrayList of var argh elements alright so this is the one you want and so what this is is we're creating an ArrayList and then we can directly initialize it with elements inside of the ArrayList and don't worry too much about this right now we're gonna go over in depth collections in the next section alright so but just know that we're creating a we're also going to be going over variables this is how we declare one type of variable in Kotlin okay so val is declaring a variable the name of the variable is food list and the type is an array list alright so like I said don't worry too much about this and just know that it's kind of a collection of food types that we're going to add alright so we're gonna say something like Chinese and then we're gonna say hamburger hamburger I will say I don't know Pizza how about maybe like Donald's and borrows ours is an awesome pizza place alright so we have an array list of 1 2 3 4 5 food elements alright so now what we want to do is when we click on it we're going to need to randomly select one of those and so again don't worry too much about the the code and everything just follow along we're going to create a variable called random which is going to be of type random ok so we're going to initialize that and you should see that we imported Java dot util right there and so then we're going to need to create a random food index so we're going to say random food is equal to then we're gonna say random dot next int and the next int what we put in here is food list dot count all right and so again have don't don't stress out about what's going on here and this needs to be renamed random food don't stress out too much about what's going on here especially right here this is you know a little bit more advanced stuff we just need it to be able to create a random variable so don't fret if you're not understanding this and you're freaking out just know that we're creating a random food integer okay so a number that is randomly generated and it's going to be between zero and the maximum number of elements in the array list all right and then what we're going to do is we're going to set the selected food label equal to the randomly selected food in the food list and we do that by saying selected food text dot text so we're referencing the UI element select the food text then we're going to its property the text itself the string that is being displayed in the text field and we are setting that equal to food list in the array and then we are accessing it by set by his passing in the random food number that was generated all right so when we click we are creating a randomly generated number that is between zero and the maximum number of elements in the food list array and then we set the selected food text text label equal to whichever one was Jenna randomly generated so if we click it and it randomly generates two then is going to set as the selected food text label zero one and two so it's going to select pizza so arrays they start at zero so this is the 0th the first and the second element in the array so if it generates two it's going to be pizza if it generates four it's gonna be Barros pizza if it generates zero then it's gonna be Chinese food okay so pretty simple let's go ahead and check that out we're gonna run our app all right here we go a moment of truth I'm gonna click on the side and we should see ya should see the label up here change hamburger Chinese hamburger borrows Pizza Pizza all right so it looks like it is working so that's pretty exciting all right let's go ahead and implement this part right here all right so what we want to have happen when we click on the add food button so when we click on the add food button what we're gonna do is we are going to grab whatever is in the this text field and we're going to add it to this array okay so we need to create an onclicklistener right so we're gonna say add food oops not that one add food button dot set on click listener and we want this one with the curly braces and then we're going to we're gonna we're gonna grab whatever value was in the food but food text field so we're gonna say val new food is equal to add food we're gonna reference the text field and we're gonna grab out of it it's text and then we need to actually convert this to a string because as is it's not very useful to us so we gotta say dot two string okay so that turns it into a string that is now stored in the variable new food and then we're gonna just say food list dot add and we can add an element to the array so basically we're grabbing whatever was inside of the text field turning it into a string and then adding it to the end of this ArrayList okay and so the element that we are adding here is new food all right perfect and then we'll go ahead and clear out the text field so we'll say add food text dot text dot clear okay so that just makes it so that when we click on the add food button the add food text field will clear out and it will be ready for the food that anyone wants to add okay and let's go ahead and well real quick just to kind of illustrate that we are indeed adding it to this ArrayList let's go ahead and print out the array so I'm gonna say print line and we're gonna say food list all right and let's go ahead and run it all right so we can decide we can get some randomly generated foods out oh you know what I don't think we have actually okay here we go yeah had an updated the app actually so beside we are switching out the the foods and let's add a new food okay so here I'm gonna say Italian food mmm Italian food and click on the check and I will close the keyboard and when we add food click on add food not only well first it's going to add it to the array so I'm going to click add food and we can see here that we printed out we started out with just up to here but after we clicked it now we can see that Italian is added to it so now when we click on decide a few times we should be able to find our Italian food here for lucky come on random out there was oh I passed it but you saw that we added it and then now it's available for our randomly decided foods alright so that's pretty much it we've covered quite a bit for a first app we've learned a lot about Android studio and we've learned a lot about the layout and design we've learned some Kotlin learned how cool it is and some of the you know neat tricks about it not having to reference by ID no semicolons Moo and yeah so I hope you guys are having fun so far and we got a lot more fun stuff in store for you alright [Music] you

Channel: Devslopes

Views: 213,407

Keywords: android, learn to code, android studio, android and kotlin, google, JetBrains, java, java development, android development, learn android, learn kotlin, mobile development, android apps, scala, IntelliJ IDEA, IntelliJ, Google I/O, Google I/O 2017, programmer, android developer, how to, beginner tutorial, tutorial, android tutoria, kotlin tutorial, object oriented programing, interpolation, Eclipse

Id: sZWMPYIkNd8

Length: 67min 52sec (4072 seconds)

Published: Wed Oct 11 2017