1 00:00:00,220 --> 00:00:02,360 All right, let's make a counter app. 2 00:00:02,360 --> 00:00:06,031 First things first, we need to start a new Android Studio project. 3 00:00:06,031 --> 00:00:07,747 Then we need to name the project. 4 00:00:07,747 --> 00:00:10,509 Which I am going to use Counter. 5 00:00:10,509 --> 00:00:12,261 And then we can accept all the defaults. 6 00:00:19,430 --> 00:00:23,905 Once we've got the project it already starts with a text view right in 7 00:00:23,905 --> 00:00:25,610 the middle of the screen. 8 00:00:25,610 --> 00:00:26,894 So all we need to do. 9 00:00:26,894 --> 00:00:30,272 Is add a button to be below that text view. 10 00:00:30,272 --> 00:00:32,526 So, and I'm just gonna hide this pane here. 11 00:00:32,526 --> 00:00:34,349 Let's drag out a button. 12 00:00:34,349 --> 00:00:36,646 And put it below the text view. 13 00:00:36,646 --> 00:00:39,270 Then, if we flip over to the text tab. 14 00:00:39,270 --> 00:00:41,520 We can see that we've got an issue. 15 00:00:41,520 --> 00:00:43,300 This view is not constrained. 16 00:00:43,300 --> 00:00:45,620 It only has design time positions. 17 00:00:45,620 --> 00:00:48,398 So it will jump to 00 unless you add constraints. 18 00:00:48,398 --> 00:00:51,260 So any time we see tools here. 19 00:00:51,260 --> 00:00:55,980 This is referencing something, That's only going to exist on this design page. 20 00:00:55,980 --> 00:00:59,847 It's only going to exist in this tools section. 21 00:00:59,847 --> 00:01:04,741 So this layout_editor_ absoluteX and layout_editor_ absoluteY. 22 00:01:04,741 --> 00:01:06,804 While it does put it in the middle of the screen. 23 00:01:06,804 --> 00:01:09,987 Won't really put it in the middle of the screen when we run the app. 24 00:01:09,987 --> 00:01:11,121 So let's get rid of these two. 25 00:01:13,387 --> 00:01:17,480 Then to center our button just like we do our text view. 26 00:01:17,480 --> 00:01:19,507 Let's take these left and right constraints and 27 00:01:19,507 --> 00:01:20,698 paste them into our button. 28 00:01:24,798 --> 00:01:26,934 Then if we flip to the Design tab. 29 00:01:26,934 --> 00:01:28,781 We can see that our button is now centered. 30 00:01:28,781 --> 00:01:30,665 And at the top of the screen. 31 00:01:30,665 --> 00:01:33,225 But we want it to be below our text view. 32 00:01:33,225 --> 00:01:39,448 So let's go back to the text side And add another constraint. 33 00:01:39,448 --> 00:01:40,548 But let's look for one. 34 00:01:40,548 --> 00:01:46,213 That'll put the top of our button below the bottom of our text view. 35 00:01:46,213 --> 00:01:51,623 So let's look for constraintTop_toBottomOf. 36 00:01:51,623 --> 00:01:54,473 And let's use @+id/. 37 00:01:54,473 --> 00:01:56,598 And we don't have an ID for our text view. 38 00:01:56,598 --> 00:01:58,594 So let's quickly add one. 39 00:01:58,594 --> 00:02:03,572 android:id, id/textview. 40 00:02:10,234 --> 00:02:12,379 And then when we look on the Design tab now, 41 00:02:12,379 --> 00:02:15,250 we should have our button below our text view, perfect. 42 00:02:16,550 --> 00:02:23,220 Next, we need our button to say +1 and we need our text view to start at 0. 43 00:02:23,220 --> 00:02:26,830 Also we'd like to set our text size to 24sp. 44 00:02:27,980 --> 00:02:32,480 So we can do that in code by typing android:textSize and 45 00:02:32,480 --> 00:02:35,655 setting it equal to 24sp, awesome. 46 00:02:38,072 --> 00:02:41,336 Looks good, now over to main activity. 47 00:02:41,336 --> 00:02:45,043 Inside the onCreate method we first need to start by getting references to 48 00:02:45,043 --> 00:02:47,210 our button and our text view. 49 00:02:47,210 --> 00:02:51,499 Let's start with the button, button, and we need to import button, 50 00:02:55,552 --> 00:02:59,523 And then we need to cast findViewById, as a button, and 51 00:02:59,523 --> 00:03:01,900 then pass in the ID of our button. 52 00:03:03,710 --> 00:03:05,830 Which we didn't set, but it did put it as button. 53 00:03:07,820 --> 00:03:09,407 Then let's do the same for our TextView. 54 00:03:15,825 --> 00:03:20,360 FindViewByIdR.id and we did set this one to textview. 55 00:03:22,200 --> 00:03:24,560 Now that we've got both of our views, 56 00:03:24,560 --> 00:03:26,910 let's add an onClickListener to our button. 57 00:03:26,910 --> 00:03:31,230 So button.setOnClickListener and then inside the parentheses, 58 00:03:32,360 --> 00:03:36,830 I'll hit Enter to give us some more room, a new OnClickListener. 59 00:03:36,830 --> 00:03:41,040 And inside this onClick method we just want to increment our counter by one and 60 00:03:41,040 --> 00:03:43,290 then update the text in our textview. 61 00:03:43,290 --> 00:03:50,176 So first let's create a new counter variable called ct and set it equal to 0. 62 00:03:50,176 --> 00:03:56,312 Then at the top of our onClick method, let's call ct++ to increment it by one. 63 00:03:56,312 --> 00:04:00,321 And then let's call it textView.setText, 64 00:04:00,321 --> 00:04:05,282 and pass in ct plus an empty string to cast it to a string. 65 00:04:05,282 --> 00:04:06,925 Now if we run the app, 66 00:04:13,535 --> 00:04:17,400 It looks good, and it works, too great job.