One Cloudy Night5:16 with Ken Alger
Now that we have a solid anchor in the center of the screen, let's build outward from the middle. We'll start by adding a few labels and an icon on the top half of the screen.
We have a great starting point with the temperature in the center of the screen. 0:00 We can build outward from there and 0:04 make sure that everything is positioned properly regardless of screen size. 0:05 And looking here at the upper portion of the mockup, 0:10 we notice that it doesn't call for the action bar to be displayed. 0:12 Let's start here by removing that from our project and 0:16 then we can add in our other views. 0:19 So we'll navigate to resources > values > styles. 0:22 We want to update our app theme here to have no action bar. 0:32 So if we delete this past the period and type period. 0:37 We can select the NoActionBar option. 0:44 And we can close this file and head back to activity_main.xml to add our views. 0:47 So let's grab a text view, Drag it over the temperature. 0:54 Let's set the ID to timeValue. 1:03 Placeholder text will say at 5 PM, 1:08 it will be, We'll go into the attributes to select our text color. 1:15 If we look at the mockup though, it isn't a full white color but 1:23 more like a half opaque color. 1:26 So, let's create for our text color, A new color and 1:29 we'll call it half_white. 1:35 In the hex value, we'll want eight zero, which is hex for one two eight, or 128. 1:39 And then all Fs for white. 1:46 So 80, 1, 2, 3, 4, 5, 6 Fs. 1:53 And hit OK. 1:57 And our text size will be 18sp. 2:01 For the constraints, we'll want the left and 2:06 right to be constrained to their respective sides of the parent layout. 2:08 So we can add those in. 2:11 Actually, let's zoom in a little bit here. 2:15 Left, And right. 2:23 And bottom of time value, we'll constrain it to the top of the temperature value. 2:33 Next up is the location. 2:43 So another text view, put it over our time value. 2:46 Go up here. 2:48 Rename that location value. 2:58 We'll set the text to our hard coded location of Alcatraz Island, California. 3:05 For the color, We'll want this to be full white. 3:17 So we can select our Android white again. 3:27 For the tech size, 24sp. 3:33 Constraints are left and right again. 3:38 And the bottom here, we'll constrain to the top of our time value. 3:47 And it looks like we need to add some additional margin to the bottom of our 3:52 location value. 3:56 So let's increase that from the default 8 DP to 24 DP. 3:58 Go over here. 4:05 And do 24. 4:07 Now for the weather icon image. 4:11 Let's grab an image view and drag and drop it over to the left of our location. 4:13 So Image > ImageView. 4:18 From our drawable resources, let's select cloudy_night, Hit OK. 4:24 And while we're here, let's add the constraints. 4:30 We want the left to be the left side of the layout. 4:35 The bottom to be the bottom of the location layout. 4:40 And we'll need to increase the left margin to 32 4:45 DP Notice that we didn't constrain the right side of our icon to the location. 4:49 Should the size of the location text change, 4:58 we still want the icon to be in the same spot. 5:01 Okay, let's update the ID to IconImageView. 5:04 IconImageView. 5:11 And we're all set with this item. 5:14
You need to sign up for Treehouse in order to download course files.Sign up