Android Studio Tutorial - Part 2 (2020 Edition)

hey welcome back everybody at Stan yyl welcome to part two of the Android studio tutorial series for 2020 and the last tutorial are in the first part we put this button on the screen and we learned how to run it in an emulator if I hit the emulator but little open up the emulator and here is our app take a second it'll open up so right now say we want to add a product to our inventory we can hit this button but it doesn't do anything so what I want to do in this tutorial is I wants to actually create a new screen so when you click on this it'll take you to a new screen will at least get started on that so like right now you know it doesn't cook them on it click on it it does not do anything so let's fix that so ideally we'll nee hit this button it'll go to a new screen where we can add a product like I'm in my living room right now maybe I want to add my pixel phone and a webcam and the USB stick I'm gonna like just get a list of products that are in my living room and this could be used for anything you can just use your imagination it can be used for anything literally you know a list of anything but in this case let's open up so have Andrus Cydia opened up let's go to app and let's open up rez or resources the first one there and again you're gonna need to go to Android there that should be set up by default I didn't open up project on the left but you see these so layout so we can click on there and if you open up content main that's this file right here so let's go ahead and go up to layout and let's right-click and go to new and they're all these different kind of files we can create let's create a new layout resource file and let's call this let's call it add product now for this screen you don't want to use spaces actually in fact if I put a space like it gives me an error yeah so you can't put spaces I'd name everything all lowercase whatever screen you create created at least for the XML layout that we're gonna do created all lowercase you can use underscores instead of spaces and for the root element let's go ahead and delete that and let's start typing constraints layout and notice it kind of autosuggest some stuff so there's all kinds of stuff we can do with constraint layout the one we want is that right there so it's Android X dot constraint layout widget dot constraint layout that's the one we want we're gonna use constraint layouts and we'll get to that more later I'm gonna go ahead and hit OK and you won't get that but I'll get that so don't worry about that and here's our screen now it's a new screen now we can go we can kind of just an Android studio we can navigate between these two screens so content man that's where we have our button and this is where we add a product so just to get started really quickly make sure you're in design mode because there's also another way to do this you could always go to text mode and type out the code but that's kind of complicated and we don't need to do that right now so just go to design mode again we can switch between them we can open up different files so let's open up add product there and let's look forward at it text so on the left side we have our pallet so we can open up text and there's all kinds of stuff we can enter and say we want to do let's just do a plain text so I'm gonna click and drag and you'll notice I can put it anywhere I'll just kind of drag it near the center of the screen it doesn't really matter but because we're using something called constraint layouts we need to actually kind of click and drag to position it somewhere like if I were to run it on this actually wouldn't run on the screen right yet right yet but what we need to do is we need to like see how he has in the last video we talked about these constraint points where it has the circles there so just click drag then let go ahead and click drag and then let go and then we'll just do one more time so click drag and let go and that kind of centers it in the middle now if yours doesn't look exactly like that it's fine and there's a lot we can do with constraint layout over on the right side over on our attributes but for now this will work and this should look something kind of like that now if it doesn't maybe you know make sure when you added your new layout you did constraints layout there come strength make sure you did constraint layout if it doesn't look like that you can kind of click and drag it around what we'll get into I'm gonna do command Z right now but it'll yeah and some important to note is you can always go back so you do edit you can undo or redo so undo that if I wanted to undo that now it puts it there then I can do undo so if you ever messed something up you can always undo it so that's good to know so I'm going to go ahead and just you know you know make it maybe in the top left there we go now for this thing you want our products name to go there so on the right side we'll just search for something we'll search for text and actually what I'm gonna do is I'm gonna get rid of that what we want is something called hints so we'll do this product name and you notice how it's a little bit it's a little bit grayed out their product name is grayed out once you run it in the app once you start typing something the product name will go away so it's kind of like a hint if I were to do text I believe it would stay there and I need to like click there I then do the backspace to delete the delete it then I have to start typing it out again so Hin is what we want everything else looks good so I'm gonna go ahead and run this app and let's just see what happens it's good to run it a lot because that way if something goes wrong you'll know what goes wrong easier you know if you spend two hours working on something then you run it and it doesn't work it's kind of hard to know what in that two hours didn't work so now we open this up and it doesn't do anything we don't see that screen and when we click on there it doesn't do anything that's because we haven't actually created kind of like a link to it yet so we have this content main screen and that's what we're that's what's driving or kind of using that's what the screen is using but we haven't actually done anything with her add product so this tutorial might be a little bit long but I'm gonna try to let's try to get through this and if you need help ask a question in the YouTube comments and if I have time I'll try to help out just kind of say kind of scribe your problem and I'll try to answer or somebody else can jump in if you do finish this see if somebody else needs help so we have this screen here so basically this content main screen this constant main there that's linked up to what's called an activity an activity is another word for a screen and Android studio so when devout when engineers talk about oh I'm gonna create a new activity they basically mean yeah I'm gonna create a new screen so this is only part of the screen so this is the layout side of the screen but there's also another side to this screen and that's the Kotlin file so let's do something if you open up Java let me go to the first one there and then again your package name might be different so setup combat example when you set up this project if you set it up so you know like my website is Daniel Malone comm so if I were to set it up with Daniel Malone comm would be called combat the end game alone but just go ahead and click on the first folder inside a java and then double click on main activity or rather main screen so that's another way to read it and all of this code looks kind of complicated don't worry about that we won't mess with this right now but its importance yeah it's important to know that we need something kind of like this to actually link to our ad product screen so again this is really complicated none of this is really needed I could delete a lot of this code and it worked just fine but let's create a new activity so go ass one side Java Compton so open up so Java open up the first one and then then that's right click on there and go to new and let's do new Kotlin file class and let's call this and add product activity and it's kind of a practice to always name these with kind of like you know the first letter is capitalized and I we can't use spaces here I think if I put a space that won't work or I don't think it'll work so just call it like add product activity make the a capital the P capital the a capital space is just all one word let's change this to class so we want to create a Kotlin class and this will create a new Kotlin class for so I'm gonna go ahead and hit OK and it opens it up immediately and we see this file right here and so now we have our main activity there which is all of this code but we also have this add product activity and so this is gonna be our screen so again to make this add product screen work we need this layout file which is right there we need the XML or layout for this which is this right here then we also need a Kotlin class so that's this right here so we need to add a little bit to this so let's not get too hung up on what it means or like what all this stuff actually does we'll get to that later but I'll show you the important part so right after add proc activity so I'm gonna put click right after there and write your first code so right colon then put a space then do let's do a p' come at activity and you'll notice as you start typing it it kind of Auto completes for us so it's kind of like Google autocomplete where you know you just start typing it and it automatically suggests something for you so just talk a little bit of it don't finish it all the way but see how it adds it right there double click on that and then you'll notice it completes it for us but it also adds another line up there so don't worry about what that means so let's do one more thing so whenever you're working with code here and you see a red squiggly line underneath some text like you do there like if you look right underneath app if you look right underneath app compat activity you'll notice it has that kind of red underline it's kind of you know it's right there it means there's an error so like if I put my mouse over there you'll see hey it says this is a construct what we need to do is we need to type a couple more characters so type those two characters and that gets rid of the error so this is a class there are no errors it's working but we need to actually set it up to our we need to link it to our add product layout file here so I'm trying to make this to not as confusing as possible but yeah if you need a help or if you're confused maybe watch this again or leave a question in the comments so at the end of this line so just right after that right after the curly brace let's make some space so just you know put a bunch of inners and one thing to note is you can put tons of enters it doesn't really matter when Android runs us on the app doesn't matter if they're you know 20 spaces or if they're ten spaces doesn't really matter so let's go ahead and just create some space but let's do this so just in so after that between that and that between those two squiggly between the two curly braces start typing on create and there are a couple see and again its autocomplete for us so there's a lot we can you know we can we don't have to type all this stuff out Android studio helps us out a lot so look for the one that's called override fun on create now they're actually two of them so well they're a lot of them but there's one like on create description on create view lets us two on create and do the one that has saved instant state bundles so not the one with persistent persistent bundle but look for one that just has on creative then saved instance date and double click on that and you notice it writes a bunch of code for us so that's something else we need so we're almost done with this Kotlin class so one thing we need to do is to actually make this Kotlin class that add product activity we need to actually say hey whenever we link to this Kotlin code here I want to display this the this this this add product XML file so go back to add product activity and let's click at the end of that line right after there right after that's super on Korea let's go to there and do in sure then let's do this sex content view and again it autocompletes for us and let's just go ahead and do it doesn't matter which one let's just do the layout res ID one so set content view resource are laid res ID let's double-click on there and now this is where we type out the file name so this can be any file inside of there can be activity main it can be add product or it can be content main in this case we want add product so anything inside of our layout file is fair games so all we need to do is type our Doc's layout and then we just hit another way to autocomplete is just to hit enter so it says layout I can hit enter it does the rest of it then we put a dot and then you'll see the first couple of examples here or first couple of autocompletes we have our activity main and product and constant main and you'll notice those are the same files that are there so which one do we want to do in this case let's do our add product because that's the one we want so he a bad product and so this is this is this is done basically you know we we didn't have to write a lot of this code we use autocomplete to do it for us and that's gonna help you out a lot in Android studio so your code should look pretty similar to this so it doesn't look exactly it might still work like there might be tons of white space here is what it's called doesn't really matter we can put tons of white space you know like it'll run the same I can put a bunch of enters there I could put some enters there now it won't work if it won't work if I put like an entry there because the actual but like there are some cases where like try to put an ensure there that's not gonna work so you know just you I'm just showing you just for example it doesn't have to look exactly like this but just kind of similar if it looks a little different it's okay we could put a white space at the end it doesn't really matter so this class is pretty much done there's one more thing we need to do well yeah let's go ahead and this video is getting kind of long so I'm just gonna try to finish this up really quickly so just to recap we have our main activity or main screen but now we also just created a new a new screen called add product activity and we you know it's called add product activity there and I'm not explaining what a lot of this does I'll explain it later in a future video but it's important to note you can use autocomplete to just do a lot of us so we have set content view to be added and product so this screen is basically done now we actually need to link from so say so when we hit this button right there what I want to do is I want to go to you know this add product screen here so that's what I want to do so let's open up main activity and to make things simple I'm gonna delete a lot of this code so without explaining I'm just gonna I select this so look for the code that's fab on select or set onclicklistener I'm gonna go ahead and select it just like you would a word document and just hit backspace then I'm gonna select all of that there and I'm gonna delete it and just get rid of that and you'll notice you should end with the two of those one right there and one right there so it should look similar to this right here okay so now let's go to our content main and there's one thing we need to do we need to give this button an ID that we can use so I'm gonna click on the button and you'll notice on the right we have attributes there so what I'm gonna do is I'm gonna open up attributes opening up what's going on there we go that's weird huh didn't know what's going on so if that's what's the button selected let's call this button will call this go to to add products and I'm gonna hit enter so now that button has an ID right there idea of go to add product okay so this is maybe a little bit confusing if you need to rewatch the video go back and watch it again but if you're following along good job if you're not just watch the video again or ask a question in the comments so again select the button and look for the ID there so not just the ID and give it an idea of like go to and don't put a space there make it all one word okay now let's go to mainactivity and let's do this so now we can start typing so look for right after set action set support action toolbar so right after there you know just make some space and start typing go to add and you'll notice it autocompletes for us so go ahead and type a little bit then hit enter and that will finish it so now we have access to our button so now put a dot so type a dot and you'll notice immediately we have tons of stuff we can put we can uh we can set our background we can set you know what can we do there's all kinds of stuff we can do but what we want to do is you know just put a dot and then set on click listener and you'll notice we have a couple of options so look for the option with with so it should be set on click listener and there are a couple of them actually just two of them because similar like set on context to click listener but we want just set on click listener and do the one with the two brackets so I'm gonna double click that and it should look like that and if it doesn't you can always manually type it out and like I can type it out manually and do you know it's just easier if use a lot of completes but let's put our mouse inside of there click and do enter so what we're doing right here is we're saying hey every time somebody clicks on the button with the idea of go to product so go to main activity so every time we click on there do all of this right here so right now it doesn't do anything so what we want it to do is you want it to go to our new screen or a new activity so let's do this let's do starch activity and you'll notice we have a couple of them let's just hit the first one that takes an intent so I'm gonna double click on that and inside of the parentheses let's do this let's do intense let's put another parentheses actually let's doing this let's do and since and to actually do the import what we're gonna do is we're gonna actually click on one of the we're gonna like if I were to just type it out it's gonna give me an error that I need to import it and I can do it that way I think if it's red you can just click on there and then on your mouse do alt enter on Windows or also alt enter on Windows so first click first click on there click on the red do alt enter on a Mac or sorry alts enter on a PC Windows or option in Toronto Mac and it gives us some options so how to fix that so the first one is import and if it's not red it's working just fine but if it's red do that and inside of here we need to put something so let's do this let's do this actually what we need to do is we need to do and yeah it's not gonna so let's do let's just do this so let's do this I guess what we need to do so this then put a comma I then do add so yeah autocomplete so just type so put this comma add product activity and it'll autocomplete so hit enter and that'll finish it out for us then put two colons then do class John Java where it autocompletes for us there so hit that so I know this is a little bit complicated so start activity intense this and we'll get over what this means in a future lesson but for right now I just want to finish up the lesson and we're going on like 21 minutes so I kind of want to make this short I kind of really want this to work and we're really close to having at work I think we really are so you know go to add products button whenever that button is clicked do all of this start stuff right here so it's kind of saying hey you know start a new activity or screen and what screen do we want to start we need to pass it in tenth so you know we kind of have to just type that out and we wanted to go to our ad product activity and now you'll see package context right there don't actually type that out that's something Android studio just kind of puts in there for you so don't type out package content just notice that and estudia puts it there for you just so you can kind of we'll talk about that later so hopefully this makes a little bit of sense at least and if it doesn't I'll explain what it does just go ahead and type all that code out so okay so I'm gonna save it and now here's the real test let's go ahead and run it so with my emulator I'm gonna go ahead and run the app and it's wait a second it says Gradle build is running at the bottom there I know this video is getting kind of long so here it is so let's see if it works so I'm gonna go ahead and click on and to inventory and you'll notice immediately the app crashes and it goes away so as an Android engineer you'll probably you know like what I'm working the app crashes you know 10 20 times every day I don't know maybe that's overkill but like if I work an eight or nine hour day it crashes a dozen times easy but the important thing to know is how to debug it or how to figure out why it crashes so yeah I can open it up again and it's like I'm in the toy manager and you know it works fine but when I click on there it just crashes and you know there's yeah it just keeps crashing so what's going on so what we need to do is we I know what the problem is but a way to kind of debug is to click on the bottom where it says logcat click on that and we could kind of make this a little bit bigger and what we're gonna do is we can select what phone we have so that should be selected just fine and I'm gonna change us from verbose I'm gonna change it to arrow so this is gonna show us every error we have so you can kind of scroll through here and see all this debugging stuff I'm gonna clear it by hitting the trashcan icon and that will clear it so I'm gonna go back to the emulator I'm gonna open that I'm gonna open it back up again and I'm gonna hit add to inventory and it crashes but you'll notice right when I write when it crashes it gave us a bunch of information about what the air is and this is gonna look really confusing and it's not gonna it's not gonna you know you're gonna have no idea what any of this means like how could you possibly debug it the good news is you only need to read about one or two percent of this the important part is usually near the top so see how it says all the apps you know at that at that like all this code there the first part is what's important is this right here so unable to find activity class and it kind of just kind of read this you know have you declared the activity in your manifest and so say you don't know what the air is if you just kind of you know copy some of this air like I bet if I were to go to Google and I were to like you know just paste in the error message there we can go to we just click on the first result and we kind of see you know some guy posted hey I have this but I got an error and he's like well how do you to bug this you know and this guy's like hey you need to add this to your activity or manifest and this might look a little bit complicated but that's kind of how you can debug it yourself if you get into an area you don't know but in this case I know what the air so I'm gonna go ahead and just close that so let's go back to our add product activity and you'll notice if we put our mouse on top over the add product activity and click on there we click on there once it gives us an error so just click there and then again do alts enter or option enter and we can do add activities to manifest so click there and that has it to our manifest and so that should be good so I'm gonna save it I'm gonna go ahead and run it one more time and let's go back to the emulator and let's just see if this works so here it is I'm gonna go ahead and click on add to inventory and boom here is our new screen so now we can type out you know I went to add my you know I want to add my iPod I don't even use an iPod anymore but say I wanted to add my iPod there I can type it out or I can close the keyboard I can go back I can click on there so now we're successfully going to a new screen so hopefully you learned something and I'm going to recap in just a second then we'll go into part three where we'll continue on this but we actually successfully our first screen and we click on there and boom now it goes to our second screen so it doesn't do a whole lot but now we got our second screen going up and you can do the same thing with many screens you can create ten screens or whatever so to recap I'm just gonna X everything here just to kind of show you what we did the past 26 Wow minutes this is getting long sorry about that so we created first we went there and we created a new layout file and we call it add product and we dragged in an edit text or we dragged in we dragged in a plain text and we put it there and then we created a new add product activity where we typed out app compat activity and we use autocomplete to type out a lot of this code but we typed out the set constant view and we added the add product path or add product which linked it to this layout file there but that wasn't complete we needed to add something to main activity so if I were to open up main activity we typed in go to week we typed out go to add product and the reason we did that is because if we go to main activity if we select there we gave it an ID of go Chad to product and then so we typed out that then we then we want to do whenever somebody clicks on there we want to start a new activity or start a new screen and we just typed in some code we have to type out and then the screen you want to go to is that add product activity class so we typed all that out and so all of that will happen every time we click on the button so I go back I click on the button there it is and at first it crashed so we went to the logcat and we set it to error and we figured out that we can just read a little bit of the code and we can google it to figure it out or in this case all we needed to do is add it to the manifest so what we did is we clicked on add to product activity and we did alt enter or option enter and there was an option to add it to the manifest so we did that that prevented it from crashing and then now we could go back and forth between these two screens this video is really long sorry about that I'll make them shorter from now on hopefully you learned something and and we'll continue this in part three so leave a question in the YouTube comments if you have a question I'll try to answer or somebody else can answer or if you finish this successfully go to the comments and see if somebody else needs help again sorry for making this long I'll see you in part 3

Channel: DJ Malone

Views: 172,566

Keywords: tutorial, android, studio, kotlin

Id: s3mG3ypNO0s

Length: 29min 13sec (1753 seconds)

Published: Sat Feb 22 2020