1
00:00:00,600 --> 00:00:01,150
Hello there.

2
00:00:01,550 --> 00:00:02,430
I'm Gaffigan.

3
00:00:02,460 --> 00:00:08,630
And welcome back to mom what you two rules in today's video we'll be talking about bottom sheets.

4
00:00:08,640 --> 00:00:10,310
So what does a bottom sheet.

5
00:00:10,320 --> 00:00:14,670
It is a view that slides up from the bottom of the screen to show more content.

6
00:00:15,150 --> 00:00:16,700
So let's get started.

7
00:00:18,090 --> 00:00:22,940
Let's create a new project and let's call it what she tutorials.

8
00:00:22,950 --> 00:00:27,140
So bottom sheet tutorials.

9
00:00:27,870 --> 00:00:33,930
Let's hit the next button again we're going to keep our known as the guest of the white so that we can

10
00:00:33,930 --> 00:00:38,210
run our obligation almost a hundred percent of the devices running Android in the wall.

11
00:00:38,640 --> 00:00:40,720
Let's go the next button.

12
00:00:40,770 --> 00:00:42,660
Let's start with an empty activity.

13
00:00:43,710 --> 00:00:50,940
Let's call our first IQ test Maina well under two years building up product so let's wait.

14
00:00:50,940 --> 00:00:53,250
Well our products ready and we're good to go.

15
00:00:53,670 --> 00:00:58,800
So let's move on to the layout file first and to use bottom sheets.

16
00:00:58,800 --> 00:01:04,470
We'll be needing a coordinate allowed as a parent level and to use coordinate aloud with our plan and

17
00:01:04,470 --> 00:01:05,220
dependency.

18
00:01:05,460 --> 00:01:06,680
So let's add that first.

19
00:01:06,870 --> 00:01:08,540
So obligation greater.

20
00:01:08,670 --> 00:01:10,070
Let's other dependency here.

21
00:01:10,850 --> 00:01:17,600
So implementation com not Android dot support and design.

22
00:01:18,020 --> 00:01:19,850
And let's throw I the join you.

23
00:01:20,150 --> 00:01:23,060
So twenty six point one 1 0.

24
00:01:23,500 --> 00:01:30,930
Letting the greater allow Well the greetings is built on move we've to support design library.

25
00:01:31,860 --> 00:01:35,550
So let's just close this on coming back to our e-mail file.

26
00:01:36,120 --> 00:01:37,890
Let's get rid of this constrained layout.

27
00:01:38,750 --> 00:01:40,510
Let's add the co-ordinator level to you.

28
00:01:41,190 --> 00:01:44,540
Well let's start another layer for our bottom sheet.

29
00:01:44,550 --> 00:01:50,310
Just to keep things clean you so project application resources and layout.

30
00:01:50,640 --> 00:01:54,060
Right click new resource file.

31
00:01:54,630 --> 00:01:57,510
So let's call it bottom sheet layout

32
00:02:00,460 --> 00:02:01,420
so the key button.

33
00:02:01,840 --> 00:02:04,700
Let's switch to the next mode unclothed us.

34
00:02:04,840 --> 00:02:08,980
Well let's get rid of this constraint loud and use a linear allows you.

35
00:02:09,270 --> 00:02:10,270
So.

36
00:02:10,400 --> 00:02:12,030
Let's build an orientation.

37
00:02:12,420 --> 00:02:17,870
So orientation say vertical and for this loud to be a bottom sheet level we need to define some level

38
00:02:17,910 --> 00:02:18,740
behaviors.

39
00:02:18,740 --> 00:02:19,650
So let's do that.

40
00:02:20,410 --> 00:02:25,170
So are and that's important.

41
00:02:25,160 --> 00:02:28,920
So it's done so loud behavior.

42
00:02:28,980 --> 00:02:30,060
What machine behavior.

43
00:02:30,710 --> 00:02:31,560
OK.

44
00:02:31,710 --> 00:02:32,930
We need to add one more thing.

45
00:02:33,060 --> 00:02:34,080
So let's do that.

46
00:02:34,710 --> 00:02:39,810
So that behavior on peak height.

47
00:02:40,320 --> 00:02:43,320
OK so let's build about literacy of six DP.

48
00:02:43,860 --> 00:02:47,340
And what this behavior be high does is.

49
00:02:47,340 --> 00:02:50,520
So whenever your bottom sheet is globs.

50
00:02:50,970 --> 00:02:57,900
So this much height would be visible OK so let's create the content here.

51
00:02:57,910 --> 00:03:00,400
So let's say TextView with much variance.

52
00:03:00,420 --> 00:03:10,140
I'd say six DP to add some text we love to create a string so coming to values and string let's create

53
00:03:10,140 --> 00:03:21,660
a string resource here so string let's say SDR sheet title let's call it drag me up.

54
00:03:21,860 --> 00:03:23,680
That's another string resource.

55
00:03:24,150 --> 00:03:29,750
So let's call it stripper sheet content.

56
00:03:29,950 --> 00:03:31,550
Again let's call it Hello there.

57
00:03:32,420 --> 00:03:33,070
OK.

58
00:03:33,170 --> 00:03:36,500
So coming back to your bottom sheet loud example.

59
00:03:36,890 --> 00:03:42,060
So let's rewind the text here which was a star.

60
00:03:42,500 --> 00:03:43,490
Should I do.

61
00:03:44,000 --> 00:03:49,040
Let's throw out a background color so background on droid colors a lot.

62
00:03:49,490 --> 00:03:55,890
Let's change the decks color so text color Android color see white.

63
00:03:56,810 --> 00:03:58,920
Well let's add another next review.

64
00:03:59,300 --> 00:04:03,880
So TextView with much variant Heights a hundred DP.

65
00:04:04,180 --> 00:04:09,760
Let's roll the text here so which was a steal or she'd content.

66
00:04:10,130 --> 00:04:11,810
Let's roll the background color.

67
00:04:11,810 --> 00:04:16,780
So background say Android color.

68
00:04:16,790 --> 00:04:17,810
Darker gray.

69
00:04:18,580 --> 00:04:19,300
OK.

70
00:04:19,430 --> 00:04:21,570
Oh this looks good so far.

71
00:04:21,800 --> 00:04:32,740
That's right an I.D. you say I.D. say bottom sheet OK on our bottom shoot load is ready.

72
00:04:33,430 --> 00:04:39,730
So coming back to the main dot example O K let's use that bottom sheet load here.

73
00:04:39,760 --> 00:04:42,570
So include Let's display the layout.

74
00:04:42,910 --> 00:04:50,230
So which was more than cheap layout and we work to be done with allowed by moving on to the functionality

75
00:04:50,230 --> 00:04:50,590
boy.

76
00:04:51,130 --> 00:04:51,500
OK.

77
00:04:51,520 --> 00:04:59,080
So let's create an instance of our bottom sheet level so private Linear Layout let's call it bottom

78
00:04:59,080 --> 00:05:00,930
sheet layout.

79
00:05:01,820 --> 00:05:03,370
OK let's initialize it.

80
00:05:03,850 --> 00:05:10,450
So bottom sheet layout as a goal to find new by I.T. on I.T. bottom sheet.

81
00:05:11,410 --> 00:05:11,980
Okay.

82
00:05:12,550 --> 00:05:15,450
And we also need to create a bottom sheet behavior object.

83
00:05:15,460 --> 00:05:17,100
So let's create dot.

84
00:05:17,470 --> 00:05:22,690
So private bottom sheet behavior let's call it behavior.

85
00:05:23,140 --> 00:05:24,200
So coming down.

86
00:05:24,730 --> 00:05:27,480
So what behavior is it will do.

87
00:05:27,910 --> 00:05:33,460
Well then she had behavior from let's watch some bottom she to some bottom sheet left.

88
00:05:34,140 --> 00:05:36,010
Okay.

89
00:05:36,100 --> 00:05:38,990
And we can define some callbacks so let's do that.

90
00:05:39,070 --> 00:05:43,610
So behavior that set bottom she'd go box.

91
00:05:43,990 --> 00:05:44,680
We're good to go.

92
00:05:44,710 --> 00:05:46,420
So let's run an obligation and see

93
00:05:49,850 --> 00:05:51,300
well obligations running.

94
00:05:51,300 --> 00:05:52,530
So let's have a look.

95
00:05:52,950 --> 00:05:57,640
Okay let's drag this up on a bottom sheet as of.

96
00:05:57,750 --> 00:06:02,390
It's in the full screen so let's check out our bottom sheet labeled an example.

97
00:06:02,480 --> 00:06:04,650
And as you can see the high is much better.

98
00:06:04,650 --> 00:06:06,600
So let's change that to up content.

99
00:06:07,680 --> 00:06:10,120
Let's run an application again and have a look.

100
00:06:10,860 --> 00:06:13,480
Well applications running so let's check it out.

101
00:06:14,040 --> 00:06:15,210
Let's drag it up.

102
00:06:15,680 --> 00:06:23,970
And as you can see we've got a bottom sheet here so coming back door jar file you must be wondering.

103
00:06:24,630 --> 00:06:29,100
We implemented this bottom sheet call log but we didn't use it.

104
00:06:29,730 --> 00:06:32,340
So we'll do already about that later.

105
00:06:32,340 --> 00:06:37,620
So right now I'll just show you what this onstage changed what all we can do.

106
00:06:37,920 --> 00:06:43,620
So let's just create a switch on new state.

107
00:06:44,220 --> 00:06:45,570
Let's define a case.

108
00:06:46,230 --> 00:06:50,460
So bottom sheet behavior dot state globs.

109
00:06:51,060 --> 00:06:53,470
So let's generate a toast here so toast.

110
00:06:53,490 --> 00:06:54,660
Don't make text.

111
00:06:54,990 --> 00:07:00,080
Let's go in the context so an activity like this and let's generate a message.

112
00:07:00,090 --> 00:07:04,810
So let that be sheet collapsed.

113
00:07:05,310 --> 00:07:06,340
Let's throw out the duration.

114
00:07:06,340 --> 00:07:09,570
So in short and let's call this show function.

115
00:07:09,840 --> 00:07:10,470
OK.

116
00:07:10,470 --> 00:07:13,030
That's a great cue.

117
00:07:13,800 --> 00:07:24,230
Similarly let's try it for another state so which was so state expanded and let's write it expanded

118
00:07:24,330 --> 00:07:26,720
let's run our application and see what it does.

119
00:07:27,750 --> 00:07:30,030
Well applications running so let's check it out.

120
00:07:30,200 --> 00:07:30,740
That's right.

121
00:07:30,750 --> 00:07:33,650
This up shows should expanded.

122
00:07:34,200 --> 00:07:35,610
Let's drag this down.

123
00:07:35,660 --> 00:07:37,350
It shows she'd collapsed.

124
00:07:37,800 --> 00:07:39,620
So you can perform any action here.

125
00:07:39,630 --> 00:07:44,100
You can just listen to the state of your bottom sheet and perform actions accordingly.

126
00:07:44,130 --> 00:07:46,780
So that's all the bottom sheets for today.

127
00:07:46,800 --> 00:07:51,550
If you have any doubts so far anyways feel free to drop a comment and we'll go through it.

128
00:07:52,320 --> 00:07:53,220
But I did get.