1
00:00:05,180 --> 00:00:09,560
Now in the previous video, we created the layouts for our two new activities.

2
00:00:09,640 --> 00:00:13,480
And in this video we're going to add the code to make those activities work.

3
00:00:13,480 --> 00:00:18,250
Now, we haven't yet got a class for the standalone activity, because we're adding the activity manually

4
00:00:18,580 --> 00:00:19,810
instead of using the wizard.

5
00:00:19,960 --> 00:00:22,420
So when I open the project pane if it's not open,

6
00:00:22,560 --> 00:00:29,350
and then come on down to the actual package which is under the Java folder, right click, click on new and select

7
00:00:29,380 --> 00:00:34,680
Kotlin File/Class, and we're going to call this one StandaloneActivity,

8
00:00:36,620 --> 00:00:41,690
and under Kind, we're going to select Class instead of File, and click on OK.

9
00:00:41,730 --> 00:00:44,980
Now this class is going to extend the AppcompatActivity class,

10
00:00:45,150 --> 00:00:48,980
so I'm going to type after the class name, space colon.

11
00:00:49,310 --> 00:00:54,720
And I'm going to type Appc, and that should be enough to bring up this list of classes, and I'm going to choose

12
00:00:54,780 --> 00:00:59,840
AppCompatActivity from that list for the superclass, and I need to add parentheses on the end of that line.

13
00:00:59,880 --> 00:01:05,400
Now we also want to implement an interface, and unlike Java, in Kotlin there's no implements keyword.

14
00:01:05,730 --> 00:01:09,030
You just separate the class from the subsequent interfaces using a comma.

15
00:01:09,150 --> 00:01:15,690
So what I'm going to do is type a comma, then after the comma I'm going to type in onClick, and we

16
00:01:15,690 --> 00:01:19,330
get to the interface's box as you can see there, and we've got a couple of options there.

17
00:01:19,530 --> 00:01:24,060
Now, we need to implement the view dot onClickListener, so make sure you select the right one from the

18
00:01:24,060 --> 00:01:29,700
list. It should be already selected and you can see in my case the first one is selected, and IntelliSense

19
00:01:29,790 --> 00:01:33,760
is very useful here, but you do really have to pay attention to what you're doing.

20
00:01:33,900 --> 00:01:37,670
So we're not creating a dialogue interface so we don't want this second one,

21
00:01:37,710 --> 00:01:42,300
so make sure you choose the correct one and press enter, and that adds that line for us.

22
00:01:42,330 --> 00:01:46,990
Now that's our basic class created, and there's no functions added at the moment.

23
00:01:47,130 --> 00:01:51,080
It is easy to do so, we just need to position the cursor inside the class,

24
00:01:51,160 --> 00:01:57,600
in other words, inside the left and right curly braces, and use control O to choose the onCreate function

25
00:01:57,600 --> 00:02:03,960
from the list. So control O, and you can just type the first few letters, onCreate, and there's onCreate, press enter,

26
00:02:04,670 --> 00:02:09,320
and that implements it for us, and I'm just going to make an extra line of code there, or put

27
00:02:09,389 --> 00:02:14,280
an extra line there. Now when we used the wizard to generate the YouTubeActivity for us,

28
00:02:14,410 --> 00:02:18,010
the onCreate code was slightly different to what was generated here.

29
00:02:18,120 --> 00:02:22,830
Now hopefully Google will have sorted this out and made them consistent, by the time you watch this.

30
00:02:22,830 --> 00:02:24,880
But don't worry if you get slightly different code

31
00:02:24,880 --> 00:02:29,440
as I have, because I'm going to be changing this code in a minute anyway, and you'll be able to make yours

32
00:02:29,450 --> 00:02:30,890
match if necessary.

33
00:02:30,900 --> 00:02:34,980
Now we've still got an error here at the moment, and that's relating to the fact that we haven't implemented

34
00:02:35,370 --> 00:02:40,820
the onClick function yet, which is a required function for the onClickListener interface.

35
00:02:40,830 --> 00:02:42,500
So let's put that right first.

36
00:02:42,530 --> 00:02:46,120
So we're going to put a blank line after the onCreate function.

37
00:02:46,200 --> 00:02:50,720
This time I'm going to do a control I to get the implements method's dialogue, and

38
00:02:50,970 --> 00:02:55,940
I'm going to choose onClick there which is the only option that can be selected, and press enter.

39
00:02:56,000 --> 00:02:58,110
Alright so at this point that's now cleared the error.

40
00:02:58,350 --> 00:03:01,810
So what is this interface though we're implementing, and why are we doing it.

41
00:03:02,040 --> 00:03:07,650
Well before I explain that, let's go back and add the code to the onCreate method because it'll make

42
00:03:07,650 --> 00:03:09,450
more sense when you see the code in there.

43
00:03:09,750 --> 00:03:14,810
So I'm going to start by leaving that super.onCreate line on line 14 as is, and on the next

44
00:03:14,810 --> 00:03:21,640
line I'm going to do a setContentView, and it's going to be R.layout dot,

45
00:03:21,740 --> 00:03:26,430
we're going to choose our activity standalone layout, activity_standalone. OK,

46
00:03:26,440 --> 00:03:35,910
next line we're going to do btnPlayVideo.setOnClickListener, parentheses, this, and we're going to do the same

47
00:03:35,910 --> 00:03:41,960
for the btnPlaylist, btnPlaylist.setOnClickListener,

48
00:03:44,790 --> 00:03:47,740
this, and I did a capital L there, it should be a lower case l, that's better.

49
00:03:48,010 --> 00:03:54,990
Alright so that's the onCreate function, and hopefully you should recognize that code, because it's almost

50
00:03:54,990 --> 00:03:59,670
identical to the way we've been finding buttons in the layout, and setting them onClickListener so that

51
00:03:59,670 --> 00:04:05,790
we can respond to the buttons being clicked. And Android Studio's added the synthetic import for us as

52
00:04:05,790 --> 00:04:08,340
you can see there, on line 6.

53
00:04:08,340 --> 00:04:12,740
Now there's a slight difference in the way that we've set the click listener this time though.

54
00:04:13,050 --> 00:04:17,490
So I'm going to comment these two lines out for now, and review the two different ways that we've done

55
00:04:17,490 --> 00:04:19,410
this previously. Let's go ahead and do that.

56
00:04:21,570 --> 00:04:32,480
Now the first way is btnPlayVideo.setOnClickListener, in parentheses it was object colon View

57
00:04:32,770 --> 00:04:36,320
dot On Click Listener, and then we need our left and right

58
00:04:36,380 --> 00:04:43,640
curly braces, then we did an override control O, choosing onClick.

59
00:04:43,690 --> 00:04:47,900
So that was the first, that's the approach we used in the button counter app in section 5,

60
00:04:48,040 --> 00:04:54,710
and we can also implement that a different way, using a lambda expression. So I'm going to comment that one out, and

61
00:04:58,630 --> 00:05:01,620
the other way of doing it, as I mentioned, was a lambda expression.

62
00:05:01,760 --> 00:05:07,050
So that's btnPlayVideo.setOnClickListener,

63
00:05:07,230 --> 00:05:16,520
and then in parentheses, view.OnClickListener, press enter there, and within the left and right curly braces we'll

64
00:05:16,620 --> 00:05:23,760
put v then an arrow token, press enter, and then we're going to do our TODO, so TODO, we can actually copy

65
00:05:23,770 --> 00:05:34,080
that entire line so let's just do that. Copy that line and then we'll uncomment it,

66
00:05:34,340 --> 00:05:39,400
and that's now valid. Now that's a lot tidier because we don't need all that boilerplate code in colon,

67
00:05:39,660 --> 00:05:43,430
and this is the code I'm referring to here, this override code on line 22.

68
00:05:43,630 --> 00:05:48,900
Now that's fine if you're only using the listener with a single button. Typing all that in for each button's

69
00:05:48,900 --> 00:05:50,150
a bit tedious though,

70
00:05:50,340 --> 00:05:57,220
so what we can do is we can assign it to a variable, and use the same variable then for each button.

71
00:05:57,240 --> 00:06:02,190
So I've commented out that first bit of code out, and let's review the approach we use, which is very similar

72
00:06:02,190 --> 00:06:10,680
to what I've typed in the calculator app. Alright so I'll comment that out that, and the other thing we could've done, is we can assign

73
00:06:10,680 --> 00:06:14,000
it to a variable and use the same variable for each button.

74
00:06:14,160 --> 00:06:21,810
So we could do something like val listener equals view.OnClickListener, then we need our left and right curly brace, our braces,

75
00:06:21,890 --> 00:06:29,240
and within the left and right curly braces, v arrow token, then we can paste in the code for the TODO, like

76
00:06:33,190 --> 00:06:43,800
so, and clean that up. And then we could do btnPlayVideo.setOnClickListener, listener, and btn

77
00:06:43,800 --> 00:06:47,810
Playlist.setOnClickListener, listener.

78
00:06:48,500 --> 00:06:54,050
So here we basically created a new onClickListener object, and assign it to a variable,

79
00:06:54,060 --> 00:06:59,510
and we can then pass that variable to the setOnClickListener method of as many buttons as we need.

80
00:06:59,550 --> 00:07:05,680
Now what that code does is create an anonymous inner class, and assign an instance of that to a variable.

81
00:07:05,760 --> 00:07:10,950
And that's the way we did it when we wanted to assign the same listener to several buttons in the calculator

82
00:07:10,950 --> 00:07:12,540
app in section 6.

83
00:07:12,540 --> 00:07:17,940
Now obviously the code had to work out which button was tapped, to do something different for each one,

84
00:07:18,000 --> 00:07:21,540
but this does save having to create a new listener for each button.

85
00:07:21,600 --> 00:07:25,680
Now a third approach we can take is to make our activity a listener.

86
00:07:25,750 --> 00:07:31,990
Now if the activity implements the onClickListener interface, it can be passed whenever the onClickListener's

87
00:07:32,000 --> 00:07:33,870
implementation's needed.

88
00:07:34,170 --> 00:07:38,330
That's what I did originally when I passed this up here on lines 18 and 19, to

89
00:07:38,520 --> 00:07:44,430
the button's setOnClickListener method, function. As long as our activity satisfies the interface,

90
00:07:44,430 --> 00:07:49,840
so in other words it implements the onClick function, then we can use an instance of our activity whenever our

91
00:07:49,910 --> 00:07:54,860
listener's needed. So I'm going to comment out at all this other code, leaving in just the original set dot

92
00:07:54,930 --> 00:08:08,050
OnClickListeners, and uncomment these two. So all approaches here, all three approaches, pretty much do the same thing.

93
00:08:08,060 --> 00:08:13,610
The advantage of the way we're using it now though, is that it moves the onClick code out of onCreate, and

94
00:08:13,610 --> 00:08:17,930
this can make things more readable when the onClick function's quite long. It's not sort of messing

95
00:08:17,930 --> 00:08:21,080
up the onCreate function in other words. So which approach should you use

96
00:08:21,110 --> 00:08:26,660
here? Well it's really up to you as to which of the approaches you take, when you've got multiple buttons using

97
00:08:26,660 --> 00:08:32,330
the same listener. If there's a lot of code in the onClick function, then implementing the interface and

98
00:08:32,330 --> 00:08:35,350
using this can make the code more readable, as we're about to do.

99
00:08:35,470 --> 00:08:40,309
And it also means that you can use instances of the class as a listener elsewhere in your code, to assign

100
00:08:40,309 --> 00:08:42,470
it to buttons and other activities.

101
00:08:42,470 --> 00:08:47,570
Now that's maybe not something you'd do with a class that extends activity or AppcompatActivity, but

102
00:08:47,570 --> 00:08:50,030
it may be useful in other classes.

103
00:08:50,030 --> 00:08:54,710
Alright, so we've got a listener attached to both of our buttons now, so we now need to write the code

104
00:08:54,710 --> 00:08:56,080
to get it to do something.

105
00:08:56,890 --> 00:09:02,710
Now what we want to do is launch Google's standalone player with the ID of a video to play, or the

106
00:09:02,710 --> 00:09:07,980
ID of a playlist, and when we click the button it'll start the YouTube Player, almost as if you'd launched

107
00:09:08,050 --> 00:09:14,050
it yourself from the phone's launch screen. Now it's slightly different to launching it manually, because we can also

108
00:09:14,050 --> 00:09:18,800
tell it which video to start playing, but apart from that it's the same. Alright so the code is quite simple, so

109
00:09:18,860 --> 00:09:23,890
I'm going to type it in then explain what's going on. So let's go down to the onClick function, and

110
00:09:23,910 --> 00:09:30,250
we're going to remove this TODO now that because we are implementing it. And I'm going to start by typing val intent

111
00:09:30,700 --> 00:09:39,370
equals when, then parentheses view.id, and our left and right curly braces,

112
00:09:39,390 --> 00:09:43,270
and we need to change the name that was assigned. It's not really the best name there, p0,

113
00:09:43,310 --> 00:09:52,020
we'll change that to view, and you're going to get rid of the question mark for now.

114
00:09:52,500 --> 00:10:00,480
So within the code block for when, we're going to do R.id.btnPlayVideo arrow token, and that's going to be

115
00:10:00,480 --> 00:10:10,050
YouTube, with a capital T, StandalonePlayer.createVideoIntent, then parentheses, and

116
00:10:10,200 --> 00:10:19,590
we're going type 'this' as the first argument, comma space getString, then parentheses R.string dot

117
00:10:19,770 --> 00:10:26,440
GOOGLE_API_KEY closing parentheses comma YOUTUBE VIDEO_ID, or YOUTUBE_VIDEO

118
00:10:26,440 --> 00:10:33,140
_ID, then add our right, our closing parentheses. Alright so that's the first one.

119
00:10:33,240 --> 00:10:36,240
Second one, we're going to do something very similar but this time for a playlist,

120
00:10:36,250 --> 00:10:44,560
R.id.btnPlaylist arrow token, it's going to be YouTubeStandalonePlayer

121
00:10:44,780 --> 00:10:54,080
dot, this time it's createPlaylistIntent, parentheses, and we'll start with this on the first line, comma space, and we'll

122
00:10:54,090 --> 00:10:58,910
do you a get string again, parentheses R.string dot

123
00:10:59,130 --> 00:11:02,730
GOOGLE_API_KEY again, parentheses comma space.

124
00:11:02,740 --> 00:11:09,090
And then we'll do a YOUTUBE_PLAYLIST this time, YOUTUBE_PLAYIST in that line there, and then we're just going to add an else,

125
00:11:09,430 --> 00:11:12,780
basically right down here, else arrow token again, and

126
00:11:12,780 --> 00:11:24,840
we're going to throw IllegalArgumentException, and we'll put "Undefined button clicked". OK, then outside of

127
00:11:24,840 --> 00:11:32,520
that code block we're going to put startActivity intent. Alright so to start an activity,

128
00:11:32,520 --> 00:11:36,710
we use the start activity function and we pass it something called an intent.

129
00:11:36,870 --> 00:11:42,570
So the code checks to see which button was tapped to call the onClick function, then sets the data for

130
00:11:42,570 --> 00:11:44,880
an intent before calling startActivity.

131
00:11:44,880 --> 00:11:50,220
Now we can use the playlist ID that we got earlier to play the playlist, and the video ID that we've

132
00:11:50,340 --> 00:11:53,920
already defined in the YouTubeActivity class, to play a single video.

133
00:11:53,940 --> 00:11:57,760
In both cases, we need to pass and use our Google API key,

134
00:11:58,290 --> 00:12:05,160
and if you recall, both the ID's were declared as top level constants in YouTubeActivity, which means

135
00:12:05,160 --> 00:12:08,430
we can use them without having to qualify them with a YouTubeActivity class name.

136
00:12:08,440 --> 00:12:12,420
So in other words we added the definition above the class definition.

137
00:12:12,420 --> 00:12:16,290
Now once you know what an intent is, the code's fairly easy to understand.

138
00:12:16,330 --> 00:12:20,110
So let's actually have a look at the Google documentation for intents.

139
00:12:20,430 --> 00:12:24,630
Alright, so we need to know a bit more about what an intent is, because once we actually figure that out you'll

140
00:12:24,630 --> 00:12:27,280
find the code is pretty straightforward to understand.

141
00:12:27,310 --> 00:12:29,160
So let's work on that in the next video.