Making a List8:56 with Ben Deitch
In this video we create the layout for our list of recipes!
Let's take a look at what we're going to need in order to add a list 0:00 to our list fragment. 0:04 First, instead of the Text View, our fragment's layout should 0:06 probably have a ListView, or even better, a RecyclerView. 0:09 Then will need an adapter to help manage the views in our list, and 0:14 we'll also need a layout for what we want our list items to look like. 0:17 Let's start with the layout for our list item. 0:22 In the layout folder, let's create a new layout resource file named list_item. 0:25 Remember from the mockups, 0:33 that each list item is a picture of the recipe followed by its name. 0:34 So let's drag out an image view, and then a text view. 0:39 Then I'm going to switch to the text tab. 0:47 And if you want to open a preview like this 0:49 just hit the preview button over here on the right. 0:53 Next let's change the orientation of the linear layout to horizontal. 0:56 Change its layout height to wrap content. 1:02 And give our two new views better IDs. 1:08 Let's name the image view, item image and the text view, item text. 1:11 To make the text view take up most of the width, 1:20 let's change both layout width properties to 0dp. 1:22 0dp for the TextView, and 0dp for the ImageView. 1:25 And let's give our ImageView a layout_weight of 1. 1:32 And the TextView a layout_weight of 3. 1:35 Looking good, 1:45 now let's finish off the image view by setting layout height to 50dp. 1:46 Then let's add the scale type attribute and set it equal to fitCenter 1:53 and let's set layout_margin to 8dp to add some padding. 1:59 Setting the layout height to 50dp and 2:05 the scaleType to fitCenter means that our images will be 50dp tall. 2:08 And they will be scaled to fit nicely inside our image view. 2:12 Lastly, let's finish off our text view by setting layout margin to 12dp. 2:16 And text size to 24 sp. 2:27 Now that we're done with our layout for our list item, 2:36 let's create the adapter which will serve up these list items to our recycler view. 2:39 Let's make a new class and name it ListAdapter 2:44 and make it extend RecyclerView.Adapter, which doesn't seem to exist. 2:51 Over in our apps, build.Gradle file 3:01 let's add the RecyclerView support library as a dependency. 3:06 You can just copy and paste the code from the teacher's notes if you'd like. 3:11 Then hit Sync Now. 3:17 And then, we can close the build.gradle file. 3:18 Back in our list adapter class lets use alt enter to import the recycler view. 3:24 Then lets use alt enter again to implement the required methods. 3:31 But before we get to these methods we should probably create our view holder 3:36 class. 3:40 At the bottom of this class, let's create a new private class, 3:42 named ListViewHolder. 3:50 And let's make it extend the RecyclerView.Viewholder class. 3:54 And let's also implement the View.OnClickListener interface. 4:03 When we tap on the list item, we want it to show us that recipe, so 4:14 we'll need an OnClickListener. 4:18 Then let's use Alt + Enter to create the onClick method. 4:21 And let's use it again to create the constructor. 4:27 Next, let's create a field for each of the views in our listItem. 4:32 Private TextView, we'll call it mTextView. 4:41 Alt enter to import TextView and 4:46 private ImageView mImageView. 4:50 And let's set these fields in the constructor. 4:56 mTextView = itemView.findViewById(R.id.itemText). 4:58 Alt enter to add the cast. 5:07 And then mImageView = 5:19 itemView.findViewById(R.id.itemImage) equals item view. 5:21 And alt enter to add the cast. 5:29 Then let's finish off the constructor, 5:32 by setting our view holder as the itemViews on ClickListener. 5:34 ItemView.setOnClickListener and pass and this. 5:37 All right, let's get back to our list adapter methods 5:47 starting with onCreateViewHolder. 5:50 Since we need to return a ViewHolder let's start by returning a new list view holder. 5:53 Which requires a view as a parameter. 6:02 So let's pass in the word view, and 6:05 then use alt enter to create it as a local variable. 6:08 To get our view we'll need to inflate it just like we did with our fragment. 6:14 Let's set it equal to layoutinflator.from and 6:19 pass in parent.getcontext. 6:25 Then, now that we've got our inflater. 6:30 Let's call .inflate and pass in our list 6:32 item layout R.layout.listitem. 6:38 The parent view group. 6:42 Parent. 6:46 And false. 6:49 Since this time we really don't want to attach our view to the parent view group. 6:50 Moving onto onBindViewHolder this is where we should update the view and 6:55 our view holder to reflect which position it's in on the screen. 7:00 And since we can't do this with the list view holder class we have now, 7:05 let's add a bindView method to our list ViewHolder. 7:09 public void bindView. 7:12 And it takes on a position. 7:20 Inside this method, we'll need to update our TextView and 7:25 ImageView to display the right recipe. 7:28 Luckily, our Recipe class has an array for the recipe names, and an array for 7:32 the resource IDs of the images, so this isn't too difficult. 7:37 mTextView.setText and 7:40 passing in Recipes.names. 7:46 At index position will take care of the text view. 7:50 And mImageView.setImageResource, and 7:57 passing in Recipe.resourceIds at index 8:02 position will take care of the image view. 8:06 Now that that's done let's call this method from OnbindView holder. 8:13 First we'll need to cast the holder parameter to a list view holder. 8:18 So two left parentheses list view holder Which is going to be the cast, 8:23 and we're casting our holder, which is now a ListViewHolder, and 8:30 then we can call .bindView, and pass along the position. 8:35 Last but not least, let's update getItemCount to return 8:40 Recipes.names.length. 8:44 For this app, the recipes are totally static and 8:49 will never change, so it's okay to use the names array when setting the item count. 8:52
You need to sign up for Treehouse in order to download course files.Sign up