The Solution4:17 with Ben Deitch
In this video, see how I solve the problem of creating a counter app.
We're looking to get feedback on this new type of practice. If you'd like to share your thoughts, then click here to give feedback!
All right, let's make a counter app. 0:00 First things first, we need to start a new Android Studio project. 0:02 Then we need to name the project. 0:06 Which I am going to use Counter. 0:07 And then we can accept all the defaults. 0:10 Once we've got the project it already starts with a text view right in 0:19 the middle of the screen. 0:23 So all we need to do. 0:25 Is add a button to be below that text view. 0:26 So, and I'm just gonna hide this pane here. 0:30 Let's drag out a button. 0:32 And put it below the text view. 0:34 Then, if we flip over to the text tab. 0:36 We can see that we've got an issue. 0:39 This view is not constrained. 0:41 It only has design time positions. 0:43 So it will jump to 00 unless you add constraints. 0:45 So any time we see tools here. 0:48 This is referencing something, That's only going to exist on this design page. 0:51 It's only going to exist in this tools section. 0:55 So this layout_editor_ absoluteX and layout_editor_ absoluteY. 0:59 While it does put it in the middle of the screen. 1:04 Won't really put it in the middle of the screen when we run the app. 1:06 So let's get rid of these two. 1:09 Then to center our button just like we do our text view. 1:13 Let's take these left and right constraints and 1:17 paste them into our button. 1:19 Then if we flip to the Design tab. 1:24 We can see that our button is now centered. 1:26 And at the top of the screen. 1:28 But we want it to be below our text view. 1:30 So let's go back to the text side And add another constraint. 1:33 But let's look for one. 1:39 That'll put the top of our button below the bottom of our text view. 1:40 So let's look for constraintTop_toBottomOf. 1:46 And let's use @+id/. 1:51 And we don't have an ID for our text view. 1:54 So let's quickly add one. 1:56 android:id, id/textview. 1:58 And then when we look on the Design tab now, 2:10 we should have our button below our text view, perfect. 2:12 Next, we need our button to say +1 and we need our text view to start at 0. 2:16 Also we'd like to set our text size to 24sp. 2:23 So we can do that in code by typing android:textSize and 2:27 setting it equal to 24sp, awesome. 2:32 Looks good, now over to main activity. 2:38 Inside the onCreate method we first need to start by getting references to 2:41 our button and our text view. 2:45 Let's start with the button, button, and we need to import button, 2:47 And then we need to cast findViewById, as a button, and 2:55 then pass in the ID of our button. 2:59 Which we didn't set, but it did put it as button. 3:03 Then let's do the same for our TextView. 3:07 FindViewByIdR.id and we did set this one to textview. 3:15 Now that we've got both of our views, 3:22 let's add an onClickListener to our button. 3:24 So button.setOnClickListener and then inside the parentheses, 3:26 I'll hit Enter to give us some more room, a new OnClickListener. 3:32 And inside this onClick method we just want to increment our counter by one and 3:36 then update the text in our textview. 3:41 So first let's create a new counter variable called ct and set it equal to 0. 3:43 Then at the top of our onClick method, let's call ct++ to increment it by one. 3:50 And then let's call it textView.setText, 3:56 and pass in ct plus an empty string to cast it to a string. 4:00 Now if we run the app, 4:05 It looks good, and it works, too great job. 4:13
You need to sign up for Treehouse in order to download course files.Sign up