Start at the Center7:08 with Ken Alger
We are ready to display our data! Using the mockup as our guide, we will start designing the layout for Stormy by anchoring the temperature in the center of the Activity.
[MUSIC] 0:00 We've come a long way thus far in the course. 0:04 We've seen how to connect our app to the Internet, handled different network 0:07 errors, and we've learned about, and how to process JSON data. 0:10 That's a lot. 0:15 You should be proud of the work you've done so far. 0:16 Next, we need to create our layout and 0:19 connect it to the data we just created in the current weather class. 0:21 Let's get started with the layout based on the mock ups provided 0:26 by the amazing Treehouse design team. 0:29 Let's take another look at the mock up for our app, and 0:33 think about how we should get started. 0:35 First off, we'll set the background color, then we can start adding additional views. 0:37 Android Studio has provided us with a constraint layout. 0:42 As you learned in other courses, constraint layout 0:46 allows you to create large and complex layouts with a flat view hierarchy. 0:49 We'll start here in the center with the temperature, 0:55 and work our way around the layout. 0:58 Since the temperature value is the main feature, 1:01 we want to make sure it's always in the same place. 1:04 One thing I'd like to stress here, 1:07 laying out views in Android could be more of an art than a science. 1:09 There are many different ways to lay out things, some better than others. 1:12 The solution and method we use here will be helpful in many cases. 1:18 But by no means is it the only way to complete the layout. 1:23 I highly recommend creating your own sample layouts for practice. 1:27 So let's get started with changing the background color. 1:34 If we select a constraint layout, look at all the attributes, 1:38 Find the background attribute here. 1:45 Here we get the resources window to open up. 1:49 We want to set a color here on the left hand side and 1:52 since the color of our mock-up isn't in here. 1:55 We need to add a new resource, and new color value. 1:58 Unfortunately, since our mock-up doesn't live inside Android Studio, 2:05 we can't use this color picker here. 2:09 I'll use an external app that will allow us to select 2:13 the background color from the mock-up. 2:16 I'll put links to a couple of color picker options in the teacher's notes as well. 2:19 Okay, so we found our color value and can now add it to our color resources. 2:23 So, here it is 0073d2. 2:28 So, we come over here, let's name it appbackground. 2:29 And our hex value is 0073D2. 2:44 Now recall that these first two characters, 2:50 the FF here adjust the opacity of the color. 2:53 Since we want this to be the full color, 2:57 we just want to keep those the way they are. 2:59 So with our color and our app color name, we can hit OK. 3:02 Great, our app color is in place. 3:08 Let's add a new view for the temperature to our layout. 3:11 So we'll select Text, in TextView, drag it down here to put it in about the center. 3:14 Let's change the ID. 3:21 We'll call it temperature value. 3:25 Change the placeholder text to 100. 3:29 We'll just do that for now since it will give us a nice size to work from. 3:35 Let's go back to all attributes. 3:42 We want to go down to text color. 3:46 Text color. 3:55 We want to color, we want to choose Android white. 3:57 And we'll change the text size to 150 sp. 4:03 And whoa, our preview really changed. 4:09 I thought we've lined it up pretty close to the center. 4:12 Yes, we forgot to add constraints to our text view. 4:15 Let's re-center this, just make it a little bit easier. 4:18 And add our constraints, so, the top, we'll go to the top. 4:24 And left and right. 4:31 Very nice, now our temperature value text view is constrained 4:38 to the center within our layout. 4:42 Next up, let's add the degree symbol. 4:45 That's part of the resources the design team has provided. 4:48 So we can add an ImageView. 4:52 Add an ImageView. 4:55 Drag it to about there. 4:57 Under Drawable Project, Degree. 5:00 Let's change the ID here to degree image view. 5:13 And now we need to constrain it to our temperature text view. 5:20 Recall that we need to set a minimum of two constraints on views. 5:23 We'll want the top of the degree symbol 5:28 to be constrained to the top of our temperature value. 5:31 Our other constraint will be the left side of the degree image with the right side of 5:35 the temperature value. 5:39 With that lined up, 5:46 it looks like we need to push it down from the top of the temperature value a bit. 5:47 We can do that by adding some margin to the top, there are two ways to do that. 5:51 Either here in the layout margin attribute under top. 5:57 So we can add 35dp in here. 6:09 And we see that it moves the degree image view down a bit. 6:12 We could have also done this in the view inspector. 6:17 They both accomplish the same thing. 6:22 I find that I just use whichever interface I have open. 6:24 This is off to a great start. 6:28 Since our app is only designed for portrait mode, let's head into the Android 6:30 manifest file and make sure that our activity is set to that orientation.. 6:34 So manifests > Android manifest. 6:40 If we look here under application, 6:45 we want android:screenOrientation, 6:50 and we want to set that to portrait. 6:56 With that set, let's take a quick break before we come back 7:02 to tackle the top portion of our layout. 7:06
You need to sign up for Treehouse in order to download course files.Sign up