1
00:00:00,750 --> 00:00:02,307
‫-: Hi. Within this lecture,

2
00:00:02,307 --> 00:00:06,090
‫we are going to design our first app.

3
00:00:06,090 --> 00:00:09,480
‫So what I'm going to do, I'm going to delete this button,

4
00:00:09,480 --> 00:00:11,880
‫and I'm going to delete this text view as well,

5
00:00:11,880 --> 00:00:15,120
‫because we are gonna start from scratch.

6
00:00:15,120 --> 00:00:17,430
‫So we're going to build an app

7
00:00:17,430 --> 00:00:20,130
‫in which we will display an image,

8
00:00:20,130 --> 00:00:21,720
‫and we will have a button,

9
00:00:21,720 --> 00:00:26,720
‫and when user clicks on that button, the image will change.

10
00:00:26,790 --> 00:00:31,080
‫So basically we will need two images in order to do that,

11
00:00:31,080 --> 00:00:33,210
‫and an image view,

12
00:00:33,210 --> 00:00:37,470
‫that is a view to contain images, and a button.

13
00:00:37,470 --> 00:00:40,170
‫Okay? So when a user taps on that button

14
00:00:40,170 --> 00:00:43,590
‫the image will change dynamically.

15
00:00:43,590 --> 00:00:46,350
‫So that's what we are going to do.

16
00:00:46,350 --> 00:00:47,820
‫So in order to do that,

17
00:00:47,820 --> 00:00:51,690
‫I'm going to drag in some of the views from here.

18
00:00:51,690 --> 00:00:54,090
‫And as you can see, there are a lot of views.

19
00:00:54,090 --> 00:00:57,030
‫There are a lot of segments over here,

20
00:00:57,030 --> 00:01:00,990
‫like buttons, texts, common, and you can search

21
00:01:00,990 --> 00:01:04,860
‫for reviews from here, like that image for example.

22
00:01:04,860 --> 00:01:08,040
‫And we are looking for an image view.

23
00:01:08,040 --> 00:01:10,170
‫So this is one of the most popular views

24
00:01:10,170 --> 00:01:12,630
‫that we are going to use during this course.

25
00:01:12,630 --> 00:01:16,050
‫And this will contain some images.

26
00:01:16,050 --> 00:01:19,530
‫So when you first drag and drop the image view

27
00:01:19,530 --> 00:01:23,460
‫into your layout, it will ask you what kind of image

28
00:01:23,460 --> 00:01:26,100
‫do you want to choose like this?

29
00:01:26,100 --> 00:01:30,090
‫Okay? And as you can see, there are some prebuilt images

30
00:01:30,090 --> 00:01:34,020
‫like this one, but obviously we don't want that.

31
00:01:34,020 --> 00:01:37,470
‫We want to use an image of our own.

32
00:01:37,470 --> 00:01:39,900
‫So let me bring in a button,

33
00:01:39,900 --> 00:01:41,790
‫and then we will find some images

34
00:01:41,790 --> 00:01:44,160
‫to use inside of this application.

35
00:01:44,160 --> 00:01:45,960
‫So basically what we wanna do is

36
00:01:45,960 --> 00:01:49,290
‫to click on this button and change the image view.

37
00:01:49,290 --> 00:01:51,120
‫So let me go to google.com

38
00:01:51,120 --> 00:01:55,290
‫so that we can find a good image for ourselves.

39
00:01:55,290 --> 00:01:58,710
‫So I'm gonna go for Metallica, which is my favorite band.

40
00:01:58,710 --> 00:02:02,580
‫So you can do it for your own favorite band as well.

41
00:02:02,580 --> 00:02:06,660
‫So I'm going to download two image of Metallica.

42
00:02:06,660 --> 00:02:09,330
‫So one thing you should look out for is

43
00:02:09,330 --> 00:02:13,170
‫that you have to find a small image, like you don't wanna

44
00:02:13,170 --> 00:02:16,440
‫go for two megabytes, three megabytes of images.

45
00:02:16,440 --> 00:02:21,440
‫Like, a 400 kilobytes or 500 kilobytes is okay?

46
00:02:22,710 --> 00:02:27,450
‫So, Android Studio actually doing a very bad job

47
00:02:27,450 --> 00:02:29,910
‫dealing with big images, okay?

48
00:02:29,910 --> 00:02:32,760
‫So you have to do additional things

49
00:02:32,760 --> 00:02:37,200
‫in order to make work with big images.

50
00:02:37,200 --> 00:02:40,890
‫So I believe this is cool, I'm going to download this.

51
00:02:40,890 --> 00:02:43,500
‫And of course, after downloading your image

52
00:02:43,500 --> 00:02:45,900
‫you can check for the size.

53
00:02:45,900 --> 00:02:49,500
‫And I believe this isn't completely downloaded,

54
00:02:49,500 --> 00:02:52,590
‫so let me go to that website.

55
00:02:52,590 --> 00:02:54,690
‫Yeah, it opened Facebook.

56
00:02:54,690 --> 00:02:57,690
‫So let me find another one like this.

57
00:02:57,690 --> 00:03:00,060
‫Okay? Yep, this is cool.

58
00:03:00,060 --> 00:03:04,833
‫So let me try and download this and say download.

59
00:03:05,790 --> 00:03:09,960
‫Let's see if we manage to download this. Yep, here you go.

60
00:03:09,960 --> 00:03:13,260
‫And I believe this is small as possible.

61
00:03:13,260 --> 00:03:18,260
‫So let me rename this or let me do the info first.

62
00:03:18,480 --> 00:03:22,320
‫Yeah, this is 100 kilobyte. As you can see, it's very small.

63
00:03:22,320 --> 00:03:26,940
‫And this is what we need. After you download your image,

64
00:03:26,940 --> 00:03:30,960
‫just right click on that one and say, Get Info on Mac

65
00:03:30,960 --> 00:03:35,960
‫or Properties on Windows and look out for your image size.

66
00:03:36,780 --> 00:03:41,780
‫So let me just find another one, another small one as well,

67
00:03:42,540 --> 00:03:46,440
‫like maybe this one or that one.

68
00:03:46,440 --> 00:03:49,020
‫It really doesn't matter what I choose,

69
00:03:49,020 --> 00:03:52,140
‫but I'm trying to find a good-looking image

70
00:03:52,140 --> 00:03:56,730
‫with a small size. So let me download this one as well.

71
00:03:56,730 --> 00:04:00,120
‫And let me get this. Here we go.

72
00:04:00,120 --> 00:04:03,270
‫So let me see the info of this as well.

73
00:04:03,270 --> 00:04:07,320
‫Yep, this is 200 kilobytes, so this is small as well.

74
00:04:07,320 --> 00:04:11,730
‫So up to the one megabyte is okay, but after one megabyte

75
00:04:11,730 --> 00:04:15,060
‫Android Studio starts to get weird on you.

76
00:04:15,060 --> 00:04:19,260
‫So make sure you name it, make sure you just

77
00:04:19,260 --> 00:04:23,040
‫find a small one and make sure you name it right,

78
00:04:23,040 --> 00:04:27,637
‫like this metallica.jpg or metallica2.jpg.

79
00:04:28,500 --> 00:04:33,500
‫You shouldn't use like big capitals or uppercase letters

80
00:04:34,050 --> 00:04:38,430
‫or special characters or spaces in your image names.

81
00:04:38,430 --> 00:04:42,990
‫Just something like image1, image2 is okay,

82
00:04:42,990 --> 00:04:46,080
‫and you can copy it by Control-C,

83
00:04:46,080 --> 00:04:49,500
‫and go into your drawable folder over here

84
00:04:49,500 --> 00:04:51,630
‫and hit Control-V.

85
00:04:51,630 --> 00:04:55,860
‫So it will just show you two selections.

86
00:04:55,860 --> 00:04:59,850
‫Make sure you select the drawable, not drawable24,

87
00:04:59,850 --> 00:05:04,850
‫and it will put your image inside of your drawable folder.

88
00:05:05,190 --> 00:05:07,620
‫So this is where we store images

89
00:05:07,620 --> 00:05:10,470
‫or any other media like that.

90
00:05:10,470 --> 00:05:14,790
‫Remember you don't use any uppercase letters

91
00:05:14,790 --> 00:05:16,650
‫or something like that.

92
00:05:16,650 --> 00:05:20,160
‫Later on, you can go to your image view,

93
00:05:20,160 --> 00:05:22,440
‫and on the right hand side, as you can see,

94
00:05:22,440 --> 00:05:25,410
‫we see the properties of that image.

95
00:05:25,410 --> 00:05:29,400
‫So find the source compat and choose one of the pictures

96
00:05:29,400 --> 00:05:32,610
‫that you have just downloaded and say, okay.

97
00:05:32,610 --> 00:05:37,610
‫And here you go. Now we see the image inside of our app.

98
00:05:37,740 --> 00:05:42,150
‫Make sure you resize it like this in a way that you want.

99
00:05:42,150 --> 00:05:46,110
‫Okay, And that's it. Here you go.

100
00:05:46,110 --> 00:05:47,940
‫Now we see the image,

101
00:05:47,940 --> 00:05:52,590
‫we see all the attributes of that image from here.

102
00:05:52,590 --> 00:05:56,100
‫For example, we have this width and a height of the imagery.

103
00:05:56,100 --> 00:05:58,080
‫We can actually actually change it

104
00:05:58,080 --> 00:06:01,170
‫from the right-hand side like this.

105
00:06:01,170 --> 00:06:04,800
‫You can write something like 250 dps

106
00:06:04,800 --> 00:06:07,650
‫and 250 dps over here.

107
00:06:07,650 --> 00:06:09,810
‫DP stand for Density-Pixel.

108
00:06:09,810 --> 00:06:13,230
‫And so it's like pixel. It's very similar to pixel,

109
00:06:13,230 --> 00:06:15,990
‫but it can be adjusted for different screen sizes.

110
00:06:15,990 --> 00:06:19,347
‫So make sure you choose dps like this.

111
00:06:19,347 --> 00:06:22,110
‫300 dps, 300 dps.

112
00:06:22,110 --> 00:06:24,510
‫So if you wanna use pixel, it's fine too.

113
00:06:24,510 --> 00:06:28,170
‫You can just write 300 px.

114
00:06:28,170 --> 00:06:30,870
‫But we are gonna go for dp.

115
00:06:30,870 --> 00:06:32,190
‫So if you click on this button,

116
00:06:32,190 --> 00:06:35,100
‫you can see all the attributes, all the properties,

117
00:06:35,100 --> 00:06:38,850
‫all the options of the image view over here,

118
00:06:38,850 --> 00:06:41,340
‫but we don't need anything else.

119
00:06:41,340 --> 00:06:43,950
‫Okay? We have changed the source compat,

120
00:06:43,950 --> 00:06:48,150
‫but we have made the thing, right?

121
00:06:48,150 --> 00:06:51,960
‫So right now I'm gonna go for button attributes.

122
00:06:51,960 --> 00:06:53,490
‫So you can change the text

123
00:06:53,490 --> 00:06:56,490
‫from here like this, change for example,

124
00:06:56,490 --> 00:06:59,610
‫because it will change the text when we click it, right?

125
00:06:59,610 --> 00:07:01,920
‫So let me make this a little bit bigger and

126
00:07:01,920 --> 00:07:06,180
‫let me zoom in a little bit more so you can see it better.

127
00:07:06,180 --> 00:07:10,800
‫Here you go. So I believe it's looking nice, right?

128
00:07:10,800 --> 00:07:14,070
‫And when you click on this, it will change.

129
00:07:14,070 --> 00:07:16,770
‫So I believe we are done over here.

130
00:07:16,770 --> 00:07:18,300
‫So one last thing to do

131
00:07:18,300 --> 00:07:22,800
‫before we go is to give some constraints.

132
00:07:22,800 --> 00:07:26,190
‫So as you can see, we are getting some errors

133
00:07:26,190 --> 00:07:30,840
‫and that is the reason why we got a button

134
00:07:30,840 --> 00:07:34,410
‫over the left-hand side when we first run this on Emulator.

135
00:07:34,410 --> 00:07:36,720
‫So you have to click on this button

136
00:07:36,720 --> 00:07:39,210
‫in order to make some constraints.

137
00:07:39,210 --> 00:07:43,050
‫So constraints define where our views

138
00:07:43,050 --> 00:07:44,880
‫will be located on the layout.

139
00:07:44,880 --> 00:07:48,300
‫So if you don't give some constraints,

140
00:07:48,300 --> 00:07:52,770
‫then it will appear on the left-hand side of the Emulator.

141
00:07:52,770 --> 00:07:55,140
‫So that's what we are going to do over here.

142
00:07:55,140 --> 00:07:56,340
‫We are gonna click it.

143
00:07:56,340 --> 00:07:59,160
‫As you can see, we already did actually,

144
00:07:59,160 --> 00:08:00,810
‫we're gonna run it on the Emulator,

145
00:08:00,810 --> 00:08:03,780
‫and you will see they will appear

146
00:08:03,780 --> 00:08:08,780
‫on exactly where we have put them on the screen like this.

147
00:08:09,390 --> 00:08:12,630
‫Here we go. Now we have a working app.

148
00:08:12,630 --> 00:08:15,420
‫Of course, we haven't written any code yet,

149
00:08:15,420 --> 00:08:17,850
‫so when we click on this, nothing happens.

150
00:08:17,850 --> 00:08:20,283
‫That's what we are gonna do in the next lecture.