Original subtitles

1 1

(typing) 2

2

Now there are a number of different layouts that 3

3

you can use to create app screens in Android Studio 4

4

and we're gonna have a quick look 5

5

at few others a little bit later. 6

6

Using layouts to position items on the screen 7

7

used to be quite complicated 8

8

when you wanted to line things up horizontally 9

9

and vertically to get the screen just the way you want. 10

10

But when they released Android Nougat, 11

11

Google introduced the ConstraintLayout 12

12

and that basically replaces the old RelativeLayout 13

13

and is also a good alternative to many of the older layouts. 14

14

Now we're going to discuss the older layouts later 15

15

so that you're familiar with them. 16

16

You may have to work on updating older code 17

17

so it's good to at least be familiar with 18

18

some of these other layouts. 19

19

But for most of the examples in this course 20

20

I'm gonna be using the new ConstraintLayout 21

21

and the trusty LinearLayout, when creating layout screens. 22

22

Now Google didn't just introduce a new type of layout, 23

23

they also completely revamped the Android Studio 24

24

Layout Designer to handle it. 25

25

So we're gonna start a new project 26

26

and get into discovering how to use the Layout Designer. 27

27

Now the first project we're gonna create 28

28

isn't our button click app, it's just something 29

29

that we're gonna have a play with the designer 30

30

and probably get it into a right mess. 31

31

Now the only way though to learn how 32

32

to use the designer is to try it out. 33

33

So I'm not even going to run this app, 34

34

I'm just gonna be placing things on the screen, 35

35

moving them around, and showing you 36

36

how to put things where you want them 37

37

and have them stay there. 38

38

And that's what I said we were going to play with it. 39

39

So make sure you do have fun. 40

40

But before we start that, just wanted to point out that 41

41

one of the best widgets for demonstrating this 42

42

is an ImageView, and that's because 43

43

it's a very visual component 44

44

and you can easily see it on the screen. 45

45

So I'm going to be adding an ImageView to our layout. 46

46

Now an ImageView without an image 47

47

isn't very interesting, though. 48

48

So the first thing you'll want to do 49

49

is start by downloading the sample images 50

50

that I've included in the resources section for this video. 51

51

Now you can actually get them by moving your mouse 52

52

up to the top left of this video 53

53

and clicking on the 3-bar menu icon 54

54

above resources available. 55

55

And that will slide out a panel and you'll see 56

56

the two resources, in this case 57

57

ball_640x480.jpg 58

58

and also ball_100x100.jpg. 59

59

So download those files and save them 60

60

onto your hard drive and then click the X above 61

61

the tooltip when you've done that 62

62

and you're ready to continue with this video. 63

63

Now you can, of course, use any image that you want. 64

64

So by all means use one 65

65

of your own pictures, images, if you'd prefer. 66

66

One thing to note, though, is that 67

67

there's a really odd peculiarity 68

68

in Android Studio and that's that it doesn't like 69

69

images that have capital letters in the filename. 70

70

Now you can only use the characters 0 to 9 71

71

and lowercase a to z, as well as the dash, 72

72

underscore, and full stop. 73

73

Now you might be wondering why that is the case 74

74

but in fact there's a good reason for this, 75

75

and the reason is that filenames 76

76

in Windows aren't case sensitive, 77

77

in other words ball.jpg with a capital B 78

78

would be the same file as ball.jpg with a lowercase b. 79

79

However, on Linux or OS X, Mac OS X, 80

80

they would actually be two different files. 81

81

So it would be very easy to produce 82

82

a project on one operating system 83

83

that ultimately wouldn't work on another operating system. 84

84

So rather than building a complex set of checking, 85

85

Google just made the rule that upper-case letters 86

86

aren't allowed, which makes everyone's life easier. 87

87

So bear that in mind when you create any type 88

88

of resource in Android Studio, including your images. 89

89

You should really be using just lowercase letters. 90

90

Now I'd also suggest if are intending to use 91

91

your own images that you don't use a full HD. 92

92

In other words a 1920 by 1080 image, 93

93

remembering this is gonna be viewed 94

94

on a 3 inch wide screen. 95

95

Alright so hopefully at this point 96

96

you've got the image file ready. 97

97

It's time to create our test project. 98

98

So I've got Android Studio started now 99

99

as you can see on the screen. 100

100

I'm going to click on Start a new Android Studio project. 101

101

Now we're going to be playing with a designer 102

102

a bit like a child with a box of crayons. 103

103

So for that reason I'm gonna call this project Playing. 104

104

Now if you make a right mess and 105

105

frankly I hope that you do 106

106

because it shows that you've been experimenting 107

107

then you can create a new project and call it 108

108

Playing 2 or Playing 3, etc. 109

109

And also you can make a note of the project location 110

110

which you can see over here at the bottom of the screen 111

111

and you can use your file manager 112

112

to delete the entire Playing directory 113

113

if you wish before starting again. 114

114

That's entirely up to you. 115

115

Now the company domain should have been remembered 116

116

from last time so I'm going to leave 117

117

that as to what it was, learnprogramming.academy. 118

118

Now you of course are free to use your own domain 119

119

there if you prefer but one thing to bear in mind, 120

120

is that my sample code 121

121

will be using learnprogramming.academy. 122

122

So using something different can make it harder 123

123

for you to use differencing tools 124

124

on the projects when comparing your source code with mine. 125

125

Now I'm going to be covering that layer in this course 126

126

so if you want to keep things simple 127

127

then use the same domain name 128

128

that I'm using here, learnprogramming.academy. 129

129

So the project location should have been filled in 130

130

for you as it was for me on the screen then, 131

131

but you can change that 132

132

to any suitable directory, if you prefer. 133

133

Now the last thing you have to check on this screen 134

134

is the box labelled include Kotlin support, 135

135

and you can see over here that, 136

136

that is checked by default. 137

137

If you don't tick that box, Android Studios 138

138

cannot generate Java code instead of Kotlin. 139

139

Now there's no difference in designing layouts 140

140

whether you're using Java or Kotlin, 141

141

so this video is the same for 142

142

my Java and Kotlin Android courses. 143

143

So if you're actually in my Java Android course 144

144

then in fact you want to take the checkbox off, 145

145

but if you're in the Kotlin course you want to 146

146

click that to include Kotlin support. 147

147

And by the way it's perfectly possible to mix 148

148

Java and Kotlin in the same project, 149

149

in which case you'd tick the box 150

150

if you were deciding to use a Java project 151

151

to also include Kotlin support. 152

152

For now though I suggest that if you are 153

153

in the Java course you leave it un-ticked for Java 154

154

and ticked for Kotlin. 155

155

So I'm going to click on Next. 156

156

So on this screen I'm going 157

157

to choose API 17 as the default, 158

158

as I've explained in a previous video. 159

159

Now we don't want any of these other options, 160

160

so leave them all unchecked and click on Next. 161

161

Now for our purposes here, we're going to use 162

162

the Empty Activity and that's highlighted 163

163

by default, but if not check on that 164

164

and click on Next again. 165

165

Now there's nothing to change on this next screen 166

166

but you do want to make sure that the two boxes, 167

167

Generate Layout File with checked box to the left there 168

168

and Backwards Compatibility (AppCompat), 169

169

you want to make sure that they're both checked, 170

170

as they are in this case. 171

171

And in terms of what they do, 172

172

well generate a layout function, 173

173

creates a layout file for you and if you 174

174

un-tick it, you'll just have 175

175

to create the layout from scratch. 176

176

Now that actually isn't hard to do, 177

177

and in fact in future videos we'll be 178

178

creating another layout later 179

179

but why create work at this stage of the course. 180

180

And the Backwards Compatibility box or the checked box, 181

181

that causes Android Studio to use the AppCompat library 182

182

and that's so that your code will work 183

183

on earlier versions of Android, even if they use 184

184

features that were introduced in later versions. 185

185

There's very rarely a reason to un-tick this, 186

186

so I'm going to leave it checked. 187

187

Now the suggested names for the Activity and Layout, 188

188

MainActivity and activity_main, are fine. 189

189

So I'm now going to click on Finish. 190

190

Now Android Studio is now in the process of 191

191

creating the project and you can see 192

192

that the build progress, so on. 193

193

The build progress rather, as it does that. 194

194

And I'm running at this stage, as you can see, 195

195

a beta version of Android Studio 3. 196

196

So it's a little bit slower than 197

197

what the final release will be, 198

198

but we'll give it a moment to finish. 199

199

Alright, so you can see down the bottom right hand corner 200

200

that it's working away and the grade will build as running 201

201

and it's actually indexing a few files. 202

202

It actually does quite a bit of stuff, 203

203

even after the editing window has appeared. 204

204

And it's a good idea not to do too much 205

205

until all that's finished. 206

206

And you can see now, down the bottom right hand corner 207

207

of the screen, the progress bar has disappeared 208

208

and for all intents and purposes now it's finished 209

209

setting things up and we're ready to go. 210

210

Alright so, there's a few things now 211

211

that I want to talk about with the Layout Designer. 212

212

And firstly, experiment and try things out. 213

213

Make a mess of it all and start again, maybe more than once. 214

214

You won't actually do any harm and you 215

215

can always delete the project directories 216

216

when you've made a right mess of things. 217

217

And if you're going to do that you'd obviously 218

218

want to shut down Android Studio 219

219

before you deleted anything. 220

220

Now it's particularly important to experiment 221

221

with the Layout Designer and 222

222

that's because it changes so much. 223

223

Now Google introduced this new Layout Designer 224

224

in Android Studio 2.2, back in 2016. 225

225

And personally. I've lost count of how many changes 226

226

they've made to it through to version 2.3.3, 227

227

and now, what we're running, Android Studio 3. 228

228

Now we're actually working 229

229

at the cutting edge of mobile technology 230

230

and Google are constantly changing things. 231

231

Now something that works in a certain way today, 232

232

may very well not work in that way 233

233

or may work differently tomorrow. 234

234

Now we do record videos frequently in this course, 235

235

but if we try to keep up with all the changes, 236

236

we'd never get any new content added. 237

237

As it turns out I'm re-recording these videos 238

238

in August and September because Android Studio's 239

239

Layout Designer is now very different 240

240

to what it was back in February 2017. 241

241

Now that very well may make life "interesting" 242

242

but I don't want you to feel sorry for me. 243

243

It's far harder for you! 244

244

Now you're having to learn how 245

245

to use a development environment that's changing 246

246

all the time, and frankly that's certainly not easy, 247

247

when you're learning (inaudible) 248

248

something new like Android. 249

249

Myself and JP, we're so used to all this, 250

250

sometimes we barely notice a change. 251

251

But when you're starting out and you haven't 252

252

had much experience in the software 253

253

or in Android in general, it can get very confusing. 254

254

Now there's not really a lot you can do about this, 255

255

other than learning to live with it and experimenting. 256

256

Now there is something we can do to help, 257

257

and that's to explain what's going on. 258

258

So in these video in this section of the course, 259

259

I won't just be showing you a series of keys to press 260

260

or operations to perform, I'm going 261

261

to be explaining why you're doing what you're doing. 262

262

That way you'll develop an understanding 263

263

of what's going on, why you're doing certain things, 264

264

and what's happening when you do. 265

265

Now when you really understand how it's all working, 266

266

change is much easier to deal with. 267

267

Alright, so that's what I'm going to be doing. 268

268

What you can do though, is experiment, try things out. 269

269

You know, if you're not sure what a button 270

270

on the toolbar does, one of these button up here, 271

271

then just click one and see what happens when you click it. 272

272

What actually pops up on the screen when that happens 273

273

and just really experiment with the various buttons 274

274

to see what happens when you do it. 275

275

What I can guarantee, is one thing. 276

276

It won't damage your computer. 277

277

The very worst thing that will happen 278

278

is that you will do strange things to the project 279

279

and may have to start over again from scratch. 280

280

But when you're learning, going through it 281

281

all again is a good thing. 282

282

Alright, now for the good news. 283

283

What I've been saying really only applies 284

284

to the Layout Designer. 285

285

The Android code base is far more stable, 286

286

and that changes far less frequently. 287

287

Now there are changes that affect the code, 288

288

things like annotations that we'll be looking at. 289

289

But generally, the code side of things, 290

290

well that doesn't change very often. 291

291

So it's not going to be as difficult 292

292

as I may have implied just now. 293

293

It's just that this visual Layout Designer 294

294

is the thing that changes so often. 295

295

Alright, so let's finish this video here, 296

296

and in the next video we'll start getting stuck in 297

297

and talking more about, and using the Layout Designer. 298

298

See you in the next video.