How to Make an Android App for Beginners

[Music] android development can be a great way to turn your idea into reality or start a promising career as an app developer and getting started is probably easier than you think these days android development is done with a tool called android studio android studio is kind of like the microsoft word of writing android apps it helps organize our projects and gives us a user-friendly way to create what we're looking for in this video we'll walk through installing android studio and then make an app don't worry if you don't have any experience with android or even programming in general as long as you follow along we'll all end up at the same place now we'll download android studio in just a second but first let's look at what we'll be making these days there are too many choices of everything so to help us choose between a bunch of options we'll make an app that lets us specify how many options there are and then selects one at random when we click a button awesome now that we know where we'd like to end up let's start by downloading android studio click the link below to go to the android developer website and then click the download button accept the terms and conditions and then download android studio once it's downloaded follow these steps to install android studio drag it into the applications folder and then launch android studio since you won't have any previous settings you can choose do not import settings then click ok to complete the installation and now we're presented with the android studio setup wizard on this first screen we can just click next for the install type let's pick custom and then click next now we can pick our ui theme i'll keep it as default and then when we're selecting our sdk components i already have the android sdk installed on my computer but you'll want to make sure this is checked as well as the intel hacksum performance box and since i'll be running this on a virtual device we'll want to include an android virtual device as well this is just a version of android that runs on our computer if you have your own android device you don't need to include this but it's recommended if you're going to continue doing android development then let's click next and we can accept the recommended choice here and click next again and then finish once you've downloaded all the components you might need to type in your password to allow it to install hacksim then let's click finish and now that we're running android studio let's pick start a new android studio project to get started first we'll need to specify our application name let's call it randomizer then for the company domain you would put the web address of your company so for me this will be teamtreehouse.com though really as long as you're not publishing the app to the play store this can be whatever you want lastly android used to be written entirely in java but recently we've been given the freedom to use kotlin which i think is a big improvement over java let's check the include kotlin support box and then click next to continue next again and then finish now i know you're probably ready to get started but before we get on with the app let's take a minute to talk about how an android app comes together the first piece of an app is the layout which describes how the app should look in android layouts are created by combining different types of views at its most basic a view is just a rectangular area on the screen but there are views that contain text views that act as buttons and even views for holding other views and by combining all these different types of views we can make pretty much anything the other piece of an app is the activity you can think of the activity as the code behind a layout it's where you tell your buttons what to do getting back to the code it looks like we're looking at our activity it also looks like we've got an error and it's suggesting a solution so i'll click that accept the agreement and click next and then finish that looks much better now i'll take a second to just make my screen a little easier to see and make my font size just a bit bigger okay so android apps have two parts the layout and the activity and right now we're inside the activity and if we look inside this oncreate function we can see a line that says set content view r dot layout dot underscore main this is where our layout gets connected to our activity as you might have guessed this makes activitymain.xml our layout let's click on it and see what we've got and i'll click right here to hide this side section we can bring it back by clicking the project pane on this screen we can create our layout by dragging and dropping views we can also delete views by selecting them and then hitting backspace let's get rid of this hello world text view and then start adding some views of our own so click it and backspace the views are up here on the top left so if we drag out a button we'll get a button now one thing to call out is that we're putting these views inside of another view called a constraint layout what's cool about a constraint layout is that it lets us position the views inside by using constraints which let us chain views together and makes creating a layout super simple let's try using constraints with our button to make it look like it does in the mock-ups to align it to the bottom start by selecting the button then click on the bottom white circle and drag it to the bottom of the screen to make the connection notice that it doesn't quite make it to the bottom this is because our constraint contains an 8 pixel buffer you can see the details about a view's constraints up here on the right and if you want to change the buffer you can type in the box or select a value let's change our buffer to 24. next we need to center our button to center something in a constraint layout you just constrain it to both the left and right sides so let's drag the left side to the left and the right side to the right also you may have noticed that we have two screens here the left one is showing us what the app will look like and the right one is more of a blueprint view showing us all the little details behind the app you can toggle between showing the design just the blueprint or both by using this button up here so just to make things a little easier to see for this screencast i'll be using the design view but keep in mind if you want to see the blueprint view it's always there awesome now to make our button say roll we just need to update the text attribute over here on the right so we'll delete button and type roll and let me make this just a little wider so it's easier to read we can zoom this in too the last thing we need to do with our button is make it wider to change the width of a view you just update the layout with attribute let's make it take up the full width of its constraints by changing this to match constraint then to make this match the mock-ups let's change the buffer for both the left and right constraints to 96 now that we've got our button let's add our selector in android that type of view is called a seek bar to find it click on widgets and then drag out a seek bar discrete then let's constrain the bottom of the seek bar to the top of our button and the sides to the sides of the screen let's also update the buffers for those constraints to be 32 for the sides and 24 for the bottom finally let's change the layout width to match constraint we're good to go the next piece we need is a text view that says how many let's click on the text tab and drag out a text view then let's constrain it to the left edge with a buffer of 24 and to the top of the seek bar with a buffer of 16. last but not least let's change the text to how many next let's grab a horizontal divider from the widgets tab and constrain it to the top of how many with a buffer of 16. for the last step let's drag out one final text view and position it in the middle of the remaining space by adding constraints to each side one to the left one to the top one to the top one to the top one to the bottom and one to the right then let's make the text start empty and change the text size to 144 sp if text size isn't visible over here on the right click view all attributes scroll down all the way to text size and set it as 144 sp alright our layout is all finished but before we get back to the activity we should give our views some better ids let's pivot back to view fewer attributes and change this last text view from text view 2 to results text view and then let's click on the button and change its id from button to role button and click yes okay let's flip back to main activity and start wiring everything together we've already seen that we connect the activity to the layout with this set content view line let's add some space below that and then we need to create variables to represent our views in kotlin there's two ways to create a variable val or var val is for things that don't change and var is for things that do for example if we were creating a person their birthday would be a vowel since it doesn't change whereas something like what they want for dinner would be a var let's start by creating a variable for our roll button let's leave a space after set content view and on the next line type val roll button and set it equal to find view by id and then inside these two carets let's type button and hit enter to make sure it gets imported and then inside the parentheses we'll put the id of our button after r dot id so r id dot roll button this finds our roll button from the layout and assigns it to a new variable named roll button now let's do the same thing for results text view and our seek bar val results text view equals find view by id and we can hit enter to auto complete that and inside the angle brackets we'll need to make this one a text view and use the id r dot id dot results text view then for the seek bar val seekbar and this equals find view by id and then the angle brackets this time we'll put seekbar make sure to hit enter so it imports itself automatically and then for the id of the seek bar it's r id and it defaulted to seekbar now that we've got access to each of these views the next thing we need to do is make something happen when we click on a button let's add a space and then on the next line let's type roll button dot set on click listener and choose the option with the brackets then hit enter to give us more space in the brackets inside these brackets is where we'll specify what should happen when we click on our roll button first we'll get a random number based on the value of the seek bar and then we'll set that random number as the text of our text view so let's create a new vowel named rand and set it equal to random and hit enter to make sure it gets imported then parentheses dot next end and pick this option where we pass in an integer to bound it this will give us a random integer from within a certain range let's type seekbar dot progress to have it generate a random number between 0 and the value of our seekbar then on the next line let's set results text view dot text equal to rand which is our random integer dot two string since rand is an integer we need to turn it into a string before adding it to our text view and that's it now to run the app let's click on this play button up here then you should have a virtual device from when we installed earlier if you don't you should be able to connect an android phone to your computer with a usb cord and see it up here to choose it as a running target i'll pick my virtual device then we'll click proceed without instant run and it should boot up a virtual device and run the app and there we go we've got the app and if we click roll we get random numbers between 0 1 and 2. and if we put it all the way up at 10 we should get between 0 and 9. though ideally we'd have it go from 1 to 10 instead of 0 to 9. also we might want to make this text a little bigger and it looks like our divider isn't quite centered so getting back to the code first to make it show a number from 1 to wherever our progress bar is instead of starting at 0 we'll just add one to this number right here then to fix the issues with the layout go back to activitymain.xml let's make the text bigger by clicking on this coming into text size and let's try 24 sp see how that looks that looks a little big we'll back that off to 16. that looks better then for the horizontal divider if i can click it there we go we'll just want to constrain that to the right and to the left and we can check if we got it constrained by looking at the constraints up here on the right looks like we're still missing that left constraint there we go all right then we can run the app again by clicking on the green play button and if you'd like it to not show this dialog each time you run an app you can check this box down here awesome now if we run the app again it looks much better and we get one two and three instead of zero one and two great job creating the app i know that was probably a lot to take in and you might be feeling a little bit overwhelmed but don't worry that's pretty much everyone's experience it takes time and a lot of practice to get good at anything and while you may not have a deep understanding of android you're off to a pretty good start i'm a teacher at treehouse an online school where you learn at your own pace at 25 a month you get access to the beginner android development track which has on-demand content that includes videos quizzes and code challenges teaching you the ins and outs of android one step at a time click the link at the top of the description to start your seven day free trial at treehouse and get started on the beginner android development track [Music] you

Channel: Treehouse

Views: 4,449,258

Rating: 4.8505955 out of 5

Keywords: treehouse, technology, tech, learn, free, trial, online, teamtreehouse, education, html, swift, ios, android, java, python, ruby, programming, developer, designer, Treehouse, Team Treehouse, Web Design, Web Development, iOS, tutorial, how to, JavaScript, jQuery, Ruby, HTML, CSS, HTML5, CSS3

Id: EOfCEhWq8sg

Length: 19min 17sec (1157 seconds)

Published: Fri Apr 20 2018