1 00:00:00,350 --> 00:00:03,660 We'll be using a new activity to view our list. 2 00:00:03,660 --> 00:00:06,500 First though, we need a way to navigate to it. 3 00:00:06,500 --> 00:00:09,760 To keep things simple, we're going to add a button to the bottom 4 00:00:09,760 --> 00:00:13,530 of our main activity layout for the hourly forecast. 5 00:00:13,530 --> 00:00:15,518 Let's go look at our layout. 6 00:00:18,585 --> 00:00:22,300 Stormy is designed with a constraint layout. 7 00:00:22,300 --> 00:00:25,970 Let's add a button at the bottom of the design and center it in the layout. 8 00:00:27,030 --> 00:00:32,710 We'll grab a button down here, let's zoom in a little bit. 9 00:00:34,920 --> 00:00:38,450 We'll constrain it to the right and the left. 10 00:00:39,700 --> 00:00:42,437 The top we'll constrain to our summary, and 11 00:00:42,437 --> 00:00:44,892 the bottom to our dark sky attribution. 12 00:00:48,200 --> 00:00:51,774 Let's change the ID to be hourlyButton. 13 00:00:56,111 --> 00:00:58,691 Go down to the background, 14 00:00:58,691 --> 00:01:04,197 we want the background color to be slightly transparent. 15 00:01:04,197 --> 00:01:10,520 So 40 and six fs, which will give us a slightly transparent white. 16 00:01:12,290 --> 00:01:17,055 We want the text to say HOURLY FORECAST. 17 00:01:21,330 --> 00:01:24,401 And we want the text to be an Android white. 18 00:01:29,165 --> 00:01:36,697 Color > Android White and we want our layout height to be 30 dp. 19 00:01:39,830 --> 00:01:42,780 Layout_height, we want 30 dp. 20 00:01:45,740 --> 00:01:50,490 Let's also add some left and right padding of about 5 dp so 21 00:01:50,490 --> 00:01:53,200 that our text isn't crowded so much inside the button. 22 00:01:54,640 --> 00:02:01,368 So padding left, we'll do 5 dp, and right we'll do 5 dp. 23 00:02:05,904 --> 00:02:10,390 Let's zoom out a little bit, that looks pretty good. 24 00:02:10,390 --> 00:02:14,877 Now we need a new activity, let's create a new one in the UI package. 25 00:02:17,453 --> 00:02:24,190 New > Activity > Basic activity. 26 00:02:24,190 --> 00:02:26,378 We'll name it HourlyForecastActivity. 27 00:02:30,801 --> 00:02:37,190 And we'll set the hierarchical parent to be MainActivity, just as a best practice. 28 00:02:37,190 --> 00:02:40,655 Even though for this app, we won't be utilizing navigation. 29 00:02:40,655 --> 00:02:42,640 Project> 30 00:02:51,595 --> 00:02:52,894 Main Activity. 31 00:02:54,194 --> 00:02:56,783 Everything else we can keep here just as default. 32 00:03:03,202 --> 00:03:07,950 Now we can setup the button configuration to handle on click events. 33 00:03:07,950 --> 00:03:13,980 We head over to the MainActivity's xml, 34 00:03:13,980 --> 00:03:18,725 go to Text, scroll down here to the hourlyButton. 35 00:03:20,500 --> 00:03:28,794 We'll want to add android.onClick = hourlyOnClick. 36 00:03:33,871 --> 00:03:36,740 Next we need to define that method. 37 00:03:36,740 --> 00:03:40,040 Remember from our previous courses, to utilize this method for 38 00:03:40,040 --> 00:03:45,640 setting onClick handling, we define a method in our activity by this same name. 39 00:03:45,640 --> 00:03:48,820 It has to be public, with a void return type. 40 00:03:48,820 --> 00:03:52,456 It also needs to take a view as its only parameter, so 41 00:03:52,456 --> 00:03:56,435 let's go back to MainActivity, and down at the bottom. 42 00:04:01,191 --> 00:04:07,860 Public void, we called it hourlyOnClick and it'll take our View. 43 00:04:12,541 --> 00:04:17,810 Inside this new method, we want it to start the HourlyForecastActivity. 44 00:04:17,810 --> 00:04:20,850 We can do that by creating a new Intent, and 45 00:04:20,850 --> 00:04:22,930 passing it into the start activity method. 46 00:04:24,210 --> 00:04:29,064 So we'll do Intent intent. 47 00:04:34,325 --> 00:04:38,459 new Intent, add our imports with the quick fix. 48 00:04:42,421 --> 00:04:43,870 Let's scroll up here a little bit. 49 00:04:45,630 --> 00:04:50,368 So inside this Intent context, we'll pass in this and 50 00:04:50,368 --> 00:04:55,015 we want to start the HourlyForecastActivity class. 51 00:04:58,149 --> 00:05:02,970 And then we startActivity and pass in our intent. 52 00:05:05,141 --> 00:05:07,390 That should do it for now, nice work. 53 00:05:08,670 --> 00:05:12,130 I encourage you to play around and customize this layout. 54 00:05:12,130 --> 00:05:15,810 The best way to learn is by trying something in a new or different way. 55 00:05:16,870 --> 00:05:20,040 If you come up with a new user interface you're really proud of, 56 00:05:20,040 --> 00:05:22,330 share it with the Treehouse community. 57 00:05:22,330 --> 00:05:23,400 Sharing your projects 58 00:05:23,400 --> 00:05:27,720 encourages others to share their projects as well, don't forget to let us know, too.