How to Make an Android App for Beginners

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 Hacksim 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'll 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 setContentView r.layout.activity 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 ConstraintLayout. What's cool about a ConstraintLayout 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 mockups. 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 ConstraintLayout, 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 layoutWidth attribute. Let's make it take up the full width of its constraints by changing this to matchConstraint. Then, to make this match the mockups, 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 to screen. 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 layoutWidth to matchConstraint, and 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 bottom, and one to the right. Then let's make the text start empty and change the textSize to 144sp. If textSize isn't visible over here on the right, click View All Attributes, scroll down all the way to textSize and set it as 144sp. All right, 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 TextView2 to ResultsTextView. And then let's click on the button and change its ID from Button to RollButton and click Yes. Okay, let's flip back to MainActivity and start wiring everything together. We've already seen that we connect the activity to the layout with this SetContentView 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 val 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 RollButton. Let's leave a space after SetContentView and on the next line, type val RollButton and set it equal to FindViewByID 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.id. So r.id.RollButton. This finds our RollButton from the layout and assigns it to a new variable named RollButton. Now let's do the same thing for ResultsTextView and our seek bar. val ResultsTextView equals FindViewByID and we can hit Enter to autocomplete that and inside the angle brackets, we'll need to make this one a TextView and use the ID r.id.ResultsTextView. Then for the seek bar, val SeekBar and this equals FindViewByID and in 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 RollButton.SetOnClickListener 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 RollButton. 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 TextView. So let's create a new val named rand and set it equal to random and hit Enter to make sure it gets imported then parentheses dot next int 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 seek bar dot progress to have it generate a random number between zero and the value of our seek bar. Then on the next line, let's set resultsTextView dot text equal to rand, which is our random integer, dot toString. Since rand is an integer, we need to turn it into a string before adding it to our TextView. 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 1 to this number right here. Then, to fix the issues with the layout, go back to ActivityMain.xml and let's make the text bigger by clicking on this, coming into Text Size, and let's try 24sp. 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 dialogue 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 1, 2, and 3 instead of 0, 1, and 2. 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.