Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Writing Your UI Code with RecyclerView4:16 with Jamie Huson
Now that you have setup your networking model, you are ready to write your UI code using a RecyclerView
We set up our networking model and now we're ready to write our UI code. 0:01 The app is going to display listings from Etsy in a scrolling list. 0:05 To do this, we're going to use a recycler view. 0:09 If you need to brush up on how to use recycler view, 0:12 see the link in the teacher's notes. 0:14 Let's start out by writing a layout file. 0:16 This will be used to display for each item in the list. 0:19 It's gonna go to my resource folder, in layout, and create a new file. 0:22 I want to call mine, layout_listing. 0:28 In here, we need three views. 0:37 An image view, it's going to display the image from the listing. 0:40 And I need a text view to display the title, so let's give this an ID. 0:46 We'll give the image view an ID as well, so we can reference these later on in our 0:53 adapter, so keep that in additional text views. 0:57 This one is going to be the shop name. 1:01 And, finally, I'm going to have one for the price. 1:09 I'm going to use a combination of linear layout and relative layout to get 1:16 the listing image to display nicely for each item in our scrolling list. 1:19 I'm just gonna go ahead and use a relative layout around all the text. 1:25 So it's width is going to be match parent, so 1:32 it's going to go all the way across the full width for each item. 1:34 The height is going to be wrap content, so 1:37 it'll only be as tall as the text we put in there. 1:39 Let's go ahead and move the text news into our relative layout. 1:43 Now we need to add in some rules about how these text views are going to be laid out 1:47 within our relative layout. 1:51 I want the title to be the largest, on the top, and 1:53 below that, I want the shop name on the left, and the price on the right. 1:55 So, first, let's go ahead and make sure that the title's width 2:01 is all the way across, so we're gonna make it match parent, and now the shop name is 2:04 going to be aligned to the parent's left side. 2:08 And we also want it to be below the title. 2:13 So we give it the rule layout underscore below and we give it the ID of the title. 2:17 We can go ahead and check In the design panel, 2:24 if we put some text in here, this is working. 2:28 Just gonna put some sample content in. 2:34 You can use the tools namespace to put in some text, 2:36 I'm just gonna put in some text right now and I'll delete it later on. 2:40 Just want to make sure that my rules are set up correctly. 2:44 And yes, the shop name is below the title. 2:47 And let's go ahead and add in a rule for the price as well. 2:53 It should also be below the listing title, 2:58 only it should be aligned To the right hand side of the parent. 3:02 To support left and right and right and left languages, you can also add in 3:07 the start and end attributes that mirror left and right as well. 3:11 Gonna put in some sample pricing here. 3:30 Let's check this out. 3:33 Yes, our price is to the right, shop name to the left, 3:36 and listing titles above that. 3:39 So that looks pretty good. 3:41 Okay, this will work to start out. 3:44 Since we're using recycler view to display listings, 3:46 we need to go ahead and add this as a build dependency. 3:49 Let's go to our build.gradle file, and add in a new compile statement for 3:52 recycler view, which is part of the support library, com.android.support, 3:58 recyclerview-v7 and the latest version 21.0.3. 4:04 Again we need a sync. 4:10 Okay, now that it's finished syncing we should be able to use recycler view. 4:12
You need to sign up for Treehouse in order to download course files.Sign up