This course will be retired on June 1, 2025.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Build a Weather App

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

One Cloudy Night

5: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.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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 text 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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up