1
00:00:05,280 --> 00:00:10,380
Alright, so now that we've got our activity to play a single video, we're going to extend the app to also allow a

2
00:00:10,390 --> 00:00:12,070
playlist to be played.

3
00:00:12,070 --> 00:00:16,630
Now this'll be a good opportunity to show how one activity can start another, something you really

4
00:00:16,630 --> 00:00:18,550
need to do a lot in Android apps.

5
00:00:18,550 --> 00:00:23,590
So we're going to start by creating the layouts for main activity and standalone activity, and they're both

6
00:00:23,590 --> 00:00:26,640
very simple layouts, just containing two buttons each.

7
00:00:26,650 --> 00:00:31,930
Now the activity_main layout was created for us by the wizard when we created this project.

8
00:00:32,110 --> 00:00:37,340
So I'm going to edit that layout and delete the Hello World text view, and then drag two buttons onto the layout.

9
00:00:37,530 --> 00:00:43,540
So I'm going to open activity_main. I'm going to delete the Hello World widget, the text view that was

10
00:00:43,540 --> 00:00:49,180
added automatically, and then as I mentioned I'm going to drag two buttons onto the layout.

11
00:00:49,310 --> 00:00:56,730
And what I might do is just close the project pane a little bit to make a bit more space for us here. That's probably large enough so

12
00:00:56,730 --> 00:00:57,630
let's go ahead and do that,

13
00:00:57,660 --> 00:01:03,100
and I'll drag too. Now the buttons need to be constrained,

14
00:01:03,120 --> 00:01:06,840
so I'm going to create constraints for the top button to the top and left edges of the layout,

15
00:01:10,820 --> 00:01:17,760
like so, and what I probably should have done was set the default margins to 16 first so I'm going to do that

16
00:01:17,770 --> 00:01:23,150
now, and what I'll then manually need to do is just change those to 16.

17
00:01:25,080 --> 00:01:26,600
That just gives us a bit more space.

18
00:01:26,780 --> 00:01:31,220
And the second button needs to be constrained to the first one, so it's top edge is constrained to the bottom

19
00:01:31,220 --> 00:01:35,420
edge of the first button, and then we also want to constrain the left edge of that button to the left edge

20
00:01:35,420 --> 00:01:39,700
of the first button. Let's go ahead and do that, to

21
00:01:39,960 --> 00:01:42,310
the left edge of the button as well.

22
00:01:42,490 --> 00:01:47,440
Now margins of sixteen's obviously OK, we've set that, but remember that this second button, the left constraint

23
00:01:47,880 --> 00:01:52,440
needs a margin of zero to line it up to the first button, because you can see it's indented there, so I'm going

24
00:01:52,440 --> 00:01:58,270
to change that to zero, because of course its constrained to the left edge of the first button.

25
00:01:58,290 --> 00:02:01,860
Now we need to give the buttons an ID, and also put some text on the buttons.

26
00:02:01,970 --> 00:02:06,870
So I'm going to click on the, or select the first one, and we'll call this one btn. The ID will be

27
00:02:06,990 --> 00:02:15,940
btnPlaySingle, PlaySingle, and if it comes up and prompts it we click on yes to rename all occurrences,

28
00:02:16,270 --> 00:02:22,000
and the text, let's put some text in there as well, Play a single.

29
00:02:22,090 --> 00:02:25,530
And notice when I'm typing that we're getting autocomplete trying to be helpful.

30
00:02:25,660 --> 00:02:29,270
You need to be careful there to make sure that you're not actually getting something that we don't want on

31
00:02:29,280 --> 00:02:30,580
there so I'm going to keep typing,

32
00:02:30,670 --> 00:02:37,680
Play a single video, and you may need to press escape here to close that menu down, to choose the text.

33
00:02:37,680 --> 00:02:46,770
Alright so we've got the first one done. The second one, we'll call that one btn stand alone, btnStandAlone.

34
00:02:47,430 --> 00:02:50,970
OK, the text for that one is going to be Standalone

35
00:02:51,500 --> 00:02:59,390
Sub Menu, enter, and even though I've typed the button captions in normal case, they've appeared all in caps.

36
00:02:59,490 --> 00:03:04,660
So that's controlled by this Tt button down here in textStyle, and it's automatically selected for buttons.

37
00:03:04,670 --> 00:03:06,110
I think it looks better on so I'm going to leave it,

38
00:03:06,110 --> 00:03:09,770
but you can get normal case by clicking that button off if you decide. Alright

39
00:03:09,900 --> 00:03:12,310
so that's the activity_main layout now completed,

40
00:03:12,320 --> 00:03:19,950
so I'll go into the text tab again, and I'll format the code. I didn't need to, that was OK, back to design.

41
00:03:19,950 --> 00:03:21,960
Alright so let's move on to the next activity.

42
00:03:22,110 --> 00:03:25,540
Now we could use a wizard to create this activity in its layout,

43
00:03:25,710 --> 00:03:29,490
but I'm going to do them separately, just to show you what the wizard's doing for us.

44
00:03:29,910 --> 00:03:35,970
So to create the activities standalone layout, we just need to open the project pane, right click the layout,

45
00:03:36,660 --> 00:03:42,720
select new, layout resource file, making sure constraint layout is selected under the root element, and the

46
00:03:42,720 --> 00:03:50,270
name activity_standalone. Everything else is fine, so click on OK.

47
00:03:50,400 --> 00:03:54,250
Now this is going to be the same as the main activity layout with two buttons,

48
00:03:54,450 --> 00:03:59,520
one below the other. This time the buttons are called button play video and button play list, and they're constrained

49
00:03:59,620 --> 00:04:02,980
in the same way as we did in the earlier video. So let's just go ahead and quickly do that. We'll

50
00:04:04,710 --> 00:04:07,860
close down the project pane again so we've got a bit more space.

51
00:04:08,100 --> 00:04:19,620
OK so Button, the first one, second one, I'll constrain the first button to the top and to the left, second button

52
00:04:19,620 --> 00:04:25,130
I'm going to constrain to the top, sorry the bottom of the first button, then to the left edge of the second button.

53
00:04:25,250 --> 00:04:30,190
I need to change the margin on the second button to zero so that lines up correctly.

54
00:04:30,290 --> 00:04:32,290
Let's go ahead and actually change the ID.

55
00:04:32,300 --> 00:04:42,240
So the ID is going to be btnPlayVideo, press enter, select yes there if you get prompted, and the text,

56
00:04:42,720 --> 00:04:44,210
let's call this one Play Video.

57
00:04:47,550 --> 00:05:00,200
And for the second button, we'll use the ID btnPlaylist and the actual text will be Play Playlist.

58
00:05:00,240 --> 00:05:07,050
Alright, I'll just go in and see whether we need to reformat, and you can see that's neatly formatted. In the previous versions

59
00:05:07,050 --> 00:05:07,680
of this course,

60
00:05:07,680 --> 00:05:12,450
we found that we needed to reformat the code quite a bit. But Android Studio has got a lot better these

61
00:05:12,450 --> 00:05:16,590
days with how it's creating the XML, so we don't need to do that as often. It's only fairly rare that

62
00:05:16,590 --> 00:05:18,570
we need to make those changes. Alright,

63
00:05:18,600 --> 00:05:23,430
so at this point we're now done. The two layouts are created, and in the next video we'll start adding the

64
00:05:23,430 --> 00:05:26,630
code to make it all work. So I'll see you in the next video.