1 00:00:01,300 --> 00:00:05,220 We set up our networking model and now we're ready to write our UI code. 2 00:00:05,220 --> 00:00:09,330 The app is going to display listings from Etsy in a scrolling list. 3 00:00:09,330 --> 00:00:12,210 To do this, we're going to use a recycler view. 4 00:00:12,210 --> 00:00:14,920 If you need to brush up on how to use recycler view, 5 00:00:14,920 --> 00:00:16,980 see the link in the teacher's notes. 6 00:00:16,980 --> 00:00:19,380 Let's start out by writing a layout file. 7 00:00:19,380 --> 00:00:22,592 This will be used to display for each item in the list. 8 00:00:22,592 --> 00:00:27,210 It's gonna go to my resource folder, in layout, and create a new file. 9 00:00:28,430 --> 00:00:33,182 I want to call mine, layout_listing. 10 00:00:37,066 --> 00:00:40,300 In here, we need three views. 11 00:00:40,300 --> 00:00:42,970 An image view, it's going to display the image from the listing. 12 00:00:46,350 --> 00:00:53,300 And I need a text view to display the title, so let's give this an ID. 13 00:00:53,300 --> 00:00:57,310 We'll give the image view an ID as well, so we can reference these later on in our 14 00:00:57,310 --> 00:01:00,660 adapter, so keep that in additional text views. 15 00:01:01,860 --> 00:01:06,270 This one is going to be the shop name. 16 00:01:09,297 --> 00:01:13,750 And, finally, I'm going to have one for the price. 17 00:01:16,270 --> 00:01:19,720 I'm going to use a combination of linear layout and relative layout to get 18 00:01:19,720 --> 00:01:25,078 the listing image to display nicely for each item in our scrolling list. 19 00:01:25,078 --> 00:01:28,030 I'm just gonna go ahead and use a relative layout around all the text. 20 00:01:32,160 --> 00:01:34,240 So it's width is going to be match parent, so 21 00:01:34,240 --> 00:01:37,720 it's going to go all the way across the full width for each item. 22 00:01:37,720 --> 00:01:39,410 The height is going to be wrap content, so 23 00:01:39,410 --> 00:01:42,030 it'll only be as tall as the text we put in there. 24 00:01:43,400 --> 00:01:46,200 Let's go ahead and move the text news into our relative layout. 25 00:01:47,520 --> 00:01:51,250 Now we need to add in some rules about how these text views are going to be laid out 26 00:01:51,250 --> 00:01:53,090 within our relative layout. 27 00:01:53,090 --> 00:01:55,830 I want the title to be the largest, on the top, and 28 00:01:55,830 --> 00:02:01,000 below that, I want the shop name on the left, and the price on the right. 29 00:02:01,000 --> 00:02:04,430 So, first, let's go ahead and make sure that the title's width 30 00:02:04,430 --> 00:02:08,610 is all the way across, so we're gonna make it match parent, and now the shop name is 31 00:02:08,610 --> 00:02:13,510 going to be aligned to the parent's left side. 32 00:02:13,510 --> 00:02:17,080 And we also want it to be below the title. 33 00:02:17,080 --> 00:02:24,630 So we give it the rule layout underscore below and we give it the ID of the title. 34 00:02:24,630 --> 00:02:28,910 We can go ahead and check In the design panel, 35 00:02:28,910 --> 00:02:31,900 if we put some text in here, this is working. 36 00:02:34,120 --> 00:02:36,130 Just gonna put some sample content in. 37 00:02:36,130 --> 00:02:40,580 You can use the tools namespace to put in some text, 38 00:02:40,580 --> 00:02:43,310 I'm just gonna put in some text right now and I'll delete it later on. 39 00:02:44,530 --> 00:02:47,230 Just want to make sure that my rules are set up correctly. 40 00:02:47,230 --> 00:02:50,000 And yes, the shop name is below the title. 41 00:02:53,460 --> 00:02:58,140 And let's go ahead and add in a rule for the price as well. 42 00:02:58,140 --> 00:03:02,010 It should also be below the listing title, 43 00:03:02,010 --> 00:03:05,730 only it should be aligned To the right hand side of the parent. 44 00:03:07,080 --> 00:03:11,210 To support left and right and right and left languages, you can also add in 45 00:03:11,210 --> 00:03:15,340 the start and end attributes that mirror left and right as well. 46 00:03:30,134 --> 00:03:32,330 Gonna put in some sample pricing here. 47 00:03:33,720 --> 00:03:34,640 Let's check this out. 48 00:03:36,170 --> 00:03:39,320 Yes, our price is to the right, shop name to the left, 49 00:03:39,320 --> 00:03:41,390 and listing titles above that. 50 00:03:41,390 --> 00:03:42,300 So that looks pretty good. 51 00:03:44,150 --> 00:03:46,080 Okay, this will work to start out. 52 00:03:46,080 --> 00:03:49,079 Since we're using recycler view to display listings, 53 00:03:49,079 --> 00:03:52,500 we need to go ahead and add this as a build dependency. 54 00:03:52,500 --> 00:03:58,304 Let's go to our build.gradle file, and add in a new compile statement for 55 00:03:58,304 --> 00:04:04,664 recycler view, which is part of the support library, com.android.support, 56 00:04:04,664 --> 00:04:10,155 recyclerview-v7 and the latest version 21.0.3. 57 00:04:10,155 --> 00:04:11,115 Again we need a sync. 58 00:04:12,575 --> 00:04:15,295 Okay, now that it's finished syncing we should be able to use recycler view.