Today we’re gonna build an Android app specifically an inventory management app so the first thing we need to build an Android app is Android studio so go ahead and google that and we can download it for free from developer.android.com so go ahead and go there it’s about a gig so it may take a little bit to download you can learn more about it on this screen it kind of shows some screenshots but the important thing to note is that it is free number one it’s free and it’s available for both Windows Mac and Linux
You can also do it on a Chromebook I haven’t actually tried a Chromebook I have one but I just haven’t tried it yet but I’ve tried all three platforms it works really well. I’ll assume you’re on Windows kind of has some minimum specs there Mac but these all platforms working really well so go out to the top and go ahead and hit the download Android studio button and I actually already have it installed so just fast for a little bit you know waited and I wait to download it and I’m gonna go ahead and open it up so it looks like dad can go to your launcher or just go ahead and open up Android studio.
On Windows just go to the Start menu has a nice little animation and the first thing we’re gonna do is we’re gonna go ahead and there’s a couple of things you can do when you first open it up but for the first time you can just go oh and also this is gonna I’m using the light theme so this all maybe dark for you but it should look you should still have these options here so go ahead and do start a new Android studio project and again I’m using the light theme so it looks kind of light but I’ll show you how to change that later let’s go ahead and just select basic activity and there’s a lot you can do here you can make you can create a new you know a watch app a TV app and Android Auto app and other things but right now let’s just stick to phone and tablet cuz that’s what we’re gonna be doing if you’re gonna be creating like a map app you can kind of do that or a login screen it kind of this is kind of like a little template to get just started.
For us basic activity is exactly what we want so it kind of tells you a little bit about it let’s go ahead and hit next and let’s call this you know and then let’s call this in it’s called inventory management that can be called anything there now for your package name it might be comm dots example by default. You just put it backward so you put you. So this save location that’s probably gonna be inside of some folder this is just where all your files are gonna be saved you don’t really need to mess with that so make sure the language is Kotlin because this series is all going to be in Kotlin this inventory management half or yellow and products and you know kind of track things. Minimum API that’s fine 21 is fine that should be checked by default and with all these settings filled out let’s go ahead and hit finish and this should open up Android studio and we’ll actually see the project and again there’s a bunch of light.this I’m using the light theme so if you’re using the dark theme.
It may look all dark but it’s still gonna look similar to this so I’m gonna go ahead and close this pop-up it immediately you’ll see some stuff running it says you know scanning indexing resources so let’s just go ahead and wait and this may take a couple of minutes depending upon how fast your computer is but eventually you should kind of see this screen here now one of the things with Android studio that’s kind of cool is it’s a bunch of panes so say I want to make that smaller I could kind of make that smaller I can make that bigger there in the middle you can close pane so on the bottom I’m gonna go ahead and see how this build kind of paint is open we go to dues terminal you can kind of play around with stuff but I’m going to go ahead and just close build on the bottom just so we have some more space here and you’ll notice this kind of looks like an Android app you have your you know kind of toolbar there you’ve got some text in the middle it’s kind of basic and you have your floating action button so if you’ve never programmed before this mailer is kind of daunting you know there’s all these buttons and all these stuff you can fill out and you’ve got all these options.
Try to run this in an emulator so this this. Here go ahead and go to the left and open up project pane and it should be Android by default and then on the left here we kind of have a series of folders you can open up and close so we can open up an app we can open up Java we can open up res but your layout file is going to be inside of here so say these two tabs were closed so you don’t see anything there maybe you see this go ahead and open up app res or resources of a layout and then go ahead and open up double click content main. This is the file here this is our layout file and just as easily say we want to create another screen we can just go ahead and go into here and you know create a new screen.
Try to run this on an Android device or an emulator so if you have a physical device you can plug it into your MacBook Pro or Windows or Linux or Mac Chromebook laptop or desktop your on your physical device you’re gonna need to enable developer mode so on your device open up settings and click on build the build number seven times I think but in this case let’s go ahead open up on an emulator so at the top left here you’ll see a AVD manager you can also get to it through tools I think also tools AVD manager go ahead and open that up and right now I already have a device here but you won’t see that so what you’ll need to do is to create a virtual device or an emulator go ahead and click create a virtual device on the bottom and this is kind of like for development just so just so we can kind of play around with it on the computer so you don’t have to use a physical device you can select a different device so I’m gonna select let’s just do a do a pixel to pixel 3xl why not yes I’ll select a phone pixel 3xl.
We can go ahead and go to neck and we can kind of select what what what version of Android we want our device to run or what we want our emulator to run so we can select queue that’s fineries like the latest go ahead hit next and go ahead and hit finish there if you want you can name it to something else you know like a Daniel’s first emulator there so I’m gonna go ahead and it can’t soul and actually already have an emulator there so once you hit finished there it’ll actually it may take a little bit oh and also one thing to note when you do go into if you don’t have these downloaded already it may take a little bit to download so it may take it may be a little bit slow but you may have to download one of those but uh and it may take 20 minutes.
You’ll see your emulator there I want to go ahead and close that now to actually run this we need to hit the let’s go ahead and hit the green play button right there so you’ll see app you’ll see your device name there if you have different devices or say you plugged in a device you can select it there but I’m gonna go ahead and just select the emulator we just created or the emulator you just created and whatever you named it you know Daniels emulator and I’m gonna hit the Run button now this may take a couple of minutes but if you find from the bottom right it says two processes running that makes it that basically beans into the studio’s doing something so just wait and you see it’s opening an emulator up so just be patient here and boom here we go.
So you notice it looks kind of like a phone and it’s you know it’s basically what a phone is it’s just running on your computer here so if you don’t if you just want to plug in your device through a USB cable you can do that Chuck I said go to settings on your phone tap look for the build number in settings and tap it seven times you need to enable developer mode on your phone or it’s easier to just use an emulator like I’m doing right here so just be patient this can take oh if it’s your first time it could take five minutes you know it’s gonna be a little bit slow so here we are so we have our emulator you can notice you know you can swipe up here are some apps played with you have Gmail you’ve got you know photos app it’s just basically like a phone so just you know be patient keep waiting waiting waiting and it says waiting for target device to come online.
This may take a minute or two but once once it finishes this app that we’re building right here will show up as anapp in our emulator so hopefully it’s doing something but yeah I mean it’ just like any other you know it’s just like your regular phone you can you know open up dry we can open up messages now messages is not gonna work but yeah map should work you know you can open up you can’t you can’t make calls but you can use YouTube you can open up Chrome and browse the web you can do you know just and here so here we are so finally just open up our app so if you notice if I go back to into the studio here and notice we have hello world in the center and if I go to my emulator you’ll notice hey you know here’s our app now it doesn’t do a whole lot like my default. I can click on the floating action button and it says that’s but it says our hello world there it has our inventory management title there in the toolbar we can do that so for the next you know 20 30 parts of this series you know we’ll be working on this inventory management app and here it is so yes here it is oh so if you’re on a physical device go ahead and open up settings so I can go to settings on your physical device.
Well on your phone you can go to like system I think it is in advanced I think it’s somewhere under like I don’t think it’s this to update but some are you know tap the bill number 7 times its I don’t know exactly where it is where is it Oh a bad emulator maybe just yeah there’s build number so far to tap this you know tap it again and again now it says four steps away from being a developer so tap on that seven times and then if you go back you should see somewhere in here you should see an option for developer options so I don’t need to do that because I’m already on an emulator the simulator will work just fine.
There are two modes there’s text mode which is kind of like your code you can modify and we’ll get into that later but to keep things simple go to design mode and let’s just go ahead and click on the hello world you’ll notice on the left side you’ll have this attributes you can kind of open and close I’m gonna open up attributes and let’s change it to something else so click on you know with it selected there we can change the text let’s change text to add let’s do you know add product below hit enter and instantly you’ll notice add a product below shows up there so there’s a lot we can do here we can do you know let’s make it bigger so let’s look for text size let’s make that 24 now it’s nice and big maybe what we want to change the color so let’s go ahead and click on the color there.
let’s make it let’s make it green why not make it make it match the toolbar so I’m gonna go ahead and just close that and if you’ll notice if we you know with our emulator selected there again if we go oops if we go ahead and hit that button again and that’s going to change wait a minute or two but just wait for the emulator and it’s gonna may take a minute then you should see it up on the emulator so here’s your emulator so this is an app we can submit to the Google Play Store we can literally go open up into the studio we can go to build we can you know build the apk or however you run we’re however you do it now these it’s like under yeah we can build our bundle there and we could submit this app to Google Play now right now it doesn’t do much but you know that’s how you this is basically how you build an app and you’ve seen that you can you know put it on an emulator so I want to do. I’m trying to think I’ll try to keep this short but out but in the next couple of parts we’ll continue on this so just one more thing what I want to do is I want to show you how to add something to our layout there so say we really don’t want that I’m gonna go ahead and select it I’m gonna hit the Delete icon to get rid of that and on the left side you’ll notice we have a palettes will have a palette pane.
We can open and close so I’m gonna go ahead and open it up and they’re different stuff we can add to our layout so I’m gonna go to common and here’s a button so I’m just gonna click and drag the button and I’m gonna put it I’m just gonna put it right there for now and we can basically lay this out anywhere we want to put our button so say we want toadd a button to add a products everyone into the top left it’s not quite enough to put it there we’re using constraint layout. You’ll notice you’ll have these little circle icons on the left right top and bottom that’s because it’s gonna straight layout it’s what you need to do is click so see the little eyeglass circle put your mouse over there click hold down drag and then let go and it kind of puts it near the top left so now click drag let go and now it puts it there so if you want to put it in the middle top we can do the same thing to the right side so click drag and let go and it puts it in the middle say we want to put it exactly in the middle of the screen we could constrain it to the bottom as well so see on the bottom one click drag and let go now it’s in the center and this is kind of what’s going on behind the scenes.
let’s change it to something else so let’s so look for text now let’s change it from button to add a product or add two to inventory so this is where we’ll add our inventory and let’s go ahead and see thing do background tents let’s change that can we change it something else let’s change it to a nice blue color there we go there’s our button actually the notes let’s make it green why not just make it green let’s go ahead with that dark green button now it’s kind of hard to read the tag so let’s make the text white let’s click on there again and let’s do text color let’s make it if you don’t see a good color there you can only just click and drag you know let’s make it you know red let’s make it it’s like it white did it make it white well let’s change that to 100 that’s the Alpha we’ll get into that later but if you just have these same values here and also you know it’s like so that’s not up stands for red green and blue so say I want less red it goes from 0 to 255 some of you want less red so we won’t say we want only 100 red it’ll change it to a little you know it changes the color but we want full red full green and full blue which makes it you know 2 5 5 for everything and we want our transparency to be a hundred percent or you type in that but that’s now that should make it white and again you can just check any color.
You want you know you can make it purple you can make ityou know whatever color so there we go so one last thing I’m going to go ahead and click the Run button go back to the emulator and wait a couple of minutes or a couple of seconds because I’m kind of on a fast Mac here and boom there it is so there’s our inventory management app so again we have like 20 or three more parts to go but if you click Add to inventory it doesn’t do anything right now but we have our button in the middle of the screen there’s a lot we can do so maybe in the next part must be click on it we want to add we want it to go to a new screen where we can type out hey I want to add my you know I’m looking at.
