1 00:00:00,035 --> 00:00:04,657 [MUSIC] 2 00:00:04,657 --> 00:00:07,490 We've come a long way thus far in the course. 3 00:00:07,490 --> 00:00:10,960 We've seen how to connect our app to the Internet, handled different network 4 00:00:10,960 --> 00:00:15,448 errors, and we've learned about, and how to process JSON data. 5 00:00:15,448 --> 00:00:16,720 That's a lot. 6 00:00:16,720 --> 00:00:19,490 You should be proud of the work you've done so far. 7 00:00:19,490 --> 00:00:21,750 Next, we need to create our layout and 8 00:00:21,750 --> 00:00:25,130 connect it to the data we just created in the current weather class. 9 00:00:26,350 --> 00:00:29,910 Let's get started with the layout based on the mock ups provided 10 00:00:29,910 --> 00:00:31,800 by the amazing Treehouse design team. 11 00:00:33,080 --> 00:00:35,810 Let's take another look at the mock up for our app, and 12 00:00:35,810 --> 00:00:37,910 think about how we should get started. 13 00:00:37,910 --> 00:00:42,420 First off, we'll set the background color, then we can start adding additional views. 14 00:00:42,420 --> 00:00:46,200 Android Studio has provided us with a constraint layout. 15 00:00:46,200 --> 00:00:49,460 As you learned in other courses, constraint layout 16 00:00:49,460 --> 00:00:55,150 allows you to create large and complex layouts with a flat view hierarchy. 17 00:00:55,150 --> 00:00:58,290 We'll start here in the center with the temperature, 18 00:00:58,290 --> 00:01:00,150 and work our way around the layout. 19 00:01:01,310 --> 00:01:04,050 Since the temperature value is the main feature, 20 00:01:04,050 --> 00:01:07,200 we want to make sure it's always in the same place. 21 00:01:07,200 --> 00:01:09,390 One thing I'd like to stress here, 22 00:01:09,390 --> 00:01:12,880 laying out views in Android could be more of an art than a science. 23 00:01:12,880 --> 00:01:18,980 There are many different ways to lay out things, some better than others. 24 00:01:18,980 --> 00:01:23,470 The solution and method we use here will be helpful in many cases. 25 00:01:23,470 --> 00:01:27,310 But by no means is it the only way to complete the layout. 26 00:01:27,310 --> 00:01:30,838 I highly recommend creating your own sample layouts for practice. 27 00:01:34,141 --> 00:01:36,820 So let's get started with changing the background color. 28 00:01:38,000 --> 00:01:42,563 If we select a constraint layout, look at all the attributes, 29 00:01:45,208 --> 00:01:47,250 Find the background attribute here. 30 00:01:49,630 --> 00:01:52,200 Here we get the resources window to open up. 31 00:01:52,200 --> 00:01:55,600 We want to set a color here on the left hand side and 32 00:01:55,600 --> 00:01:58,410 since the color of our mock-up isn't in here. 33 00:01:58,410 --> 00:02:01,428 We need to add a new resource, and new color value. 34 00:02:05,789 --> 00:02:09,803 Unfortunately, since our mock-up doesn't live inside Android Studio, 35 00:02:09,803 --> 00:02:11,820 we can't use this color picker here. 36 00:02:13,040 --> 00:02:16,400 I'll use an external app that will allow us to select 37 00:02:16,400 --> 00:02:17,815 the background color from the mock-up. 38 00:02:19,110 --> 00:02:23,680 I'll put links to a couple of color picker options in the teacher's notes as well. 39 00:02:23,680 --> 00:02:28,890 Okay, so we found our color value and can now add it to our color resources. 40 00:02:28,890 --> 00:02:29,749 So, here it is 0073d2. 41 00:02:29,749 --> 00:02:36,161 So, we come over here, let's name it appbackground. 42 00:02:44,713 --> 00:02:50,370 And our hex value is 0073D2. 43 00:02:50,370 --> 00:02:53,170 Now recall that these first two characters, 44 00:02:53,170 --> 00:02:56,820 the FF here adjust the opacity of the color. 45 00:02:57,860 --> 00:02:59,659 Since we want this to be the full color, 46 00:02:59,659 --> 00:03:02,500 we just want to keep those the way they are. 47 00:03:02,500 --> 00:03:06,595 So with our color and our app color name, we can hit OK. 48 00:03:08,440 --> 00:03:11,830 Great, our app color is in place. 49 00:03:11,830 --> 00:03:14,780 Let's add a new view for the temperature to our layout. 50 00:03:14,780 --> 00:03:21,820 So we'll select Text, in TextView, drag it down here to put it in about the center. 51 00:03:21,820 --> 00:03:23,210 Let's change the ID. 52 00:03:25,179 --> 00:03:27,599 We'll call it temperature value. 53 00:03:29,379 --> 00:03:35,555 Change the placeholder text to 100. 54 00:03:35,555 --> 00:03:39,900 We'll just do that for now since it will give us a nice size to work from. 55 00:03:42,300 --> 00:03:43,940 Let's go back to all attributes. 56 00:03:46,650 --> 00:03:48,317 We want to go down to text color. 57 00:03:55,482 --> 00:03:57,050 Text color. 58 00:03:57,050 --> 00:04:02,261 We want to color, we want to choose Android white. 59 00:04:03,682 --> 00:04:09,631 And we'll change the text size to 150 sp. 60 00:04:09,631 --> 00:04:12,350 And whoa, our preview really changed. 61 00:04:12,350 --> 00:04:15,440 I thought we've lined it up pretty close to the center. 62 00:04:15,440 --> 00:04:18,700 Yes, we forgot to add constraints to our text view. 63 00:04:18,700 --> 00:04:20,857 Let's re-center this, just make it a little bit easier. 64 00:04:24,456 --> 00:04:27,757 And add our constraints, so, the top, we'll go to the top. 65 00:04:31,799 --> 00:04:32,816 And left and right. 66 00:04:38,033 --> 00:04:42,628 Very nice, now our temperature value text view is constrained 67 00:04:42,628 --> 00:04:45,850 to the center within our layout. 68 00:04:45,850 --> 00:04:48,890 Next up, let's add the degree symbol. 69 00:04:48,890 --> 00:04:52,280 That's part of the resources the design team has provided. 70 00:04:52,280 --> 00:04:53,760 So we can add an ImageView. 71 00:04:55,630 --> 00:04:57,240 Add an ImageView. 72 00:04:57,240 --> 00:04:58,326 Drag it to about there. 73 00:05:00,682 --> 00:05:09,116 Under Drawable Project, Degree. 74 00:05:13,190 --> 00:05:17,760 Let's change the ID here to degree image view. 75 00:05:20,120 --> 00:05:23,580 And now we need to constrain it to our temperature text view. 76 00:05:23,580 --> 00:05:28,020 Recall that we need to set a minimum of two constraints on views. 77 00:05:28,020 --> 00:05:29,650 We'll want the top of the degree symbol 78 00:05:31,450 --> 00:05:35,780 to be constrained to the top of our temperature value. 79 00:05:35,780 --> 00:05:39,868 Our other constraint will be the left side of the degree image with the right side of 80 00:05:39,868 --> 00:05:41,120 the temperature value. 81 00:05:46,212 --> 00:05:47,173 With that lined up, 82 00:05:47,173 --> 00:05:51,750 it looks like we need to push it down from the top of the temperature value a bit. 83 00:05:51,750 --> 00:05:57,610 We can do that by adding some margin to the top, there are two ways to do that. 84 00:05:57,610 --> 00:06:01,296 Either here in the layout margin attribute under top. 85 00:06:09,514 --> 00:06:12,267 So we can add 35dp in here. 86 00:06:12,267 --> 00:06:17,780 And we see that it moves the degree image view down a bit. 87 00:06:17,780 --> 00:06:20,040 We could have also done this in the view inspector. 88 00:06:22,150 --> 00:06:24,320 They both accomplish the same thing. 89 00:06:24,320 --> 00:06:28,520 I find that I just use whichever interface I have open. 90 00:06:28,520 --> 00:06:30,570 This is off to a great start. 91 00:06:30,570 --> 00:06:34,760 Since our app is only designed for portrait mode, let's head into the Android 92 00:06:34,760 --> 00:06:38,890 manifest file and make sure that our activity is set to that orientation.. 93 00:06:40,370 --> 00:06:45,953 So manifests > Android manifest. 94 00:06:45,953 --> 00:06:50,881 If we look here under application, 95 00:06:50,881 --> 00:06:56,469 we want android:screenOrientation, 96 00:06:56,469 --> 00:07:01,410 and we want to set that to portrait. 97 00:07:02,860 --> 00:07:06,310 With that set, let's take a quick break before we come back 98 00:07:06,310 --> 00:07:08,400 to tackle the top portion of our layout.