Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

2.2 RecyclerView

The RecyclerView widget is a modern alternative to the ListView widget. We’ll be using it to display the shopping items in our app. In this lesson, you’ll learn how to create layouts for RecyclerView items, and how to add them to an Activity. In creating this layout, we’ll refer to the material design specifications for lists.

Related Links

2.2 RecyclerView

Welcome back, in this lesson I will be showing you how to create a RecyclerView. A RecyclerView is a UI widget which can display a list of items. We will obviously be using the RecyclerView to display this list of shopping items. Note that this is not a simple list. In fact this type of lists are called multisection lists. Our will list has two different sections, one for the activity items and one for the completed items. Therefore it must be capable of handling multiple layouts, the first layout looks like this. The second layout is similar but it has only one line of text. And the third layout is the sub header which also includes a divider. Throughout this lesson, I will be using values for attributes like height, padding and margin based on the material design specifications for lists. All those values that are available in this page. Okay, let us start by creating the three layouts. Right-click on the layouts folder and select New > Layout resource file. This is going to represent the active items. So I'll call this file active_item and set its root element to relative layout. Add a CheckBox to it and place it at the center of the layout on the left corner. Next add a linear layout and place it again in the same position. Add a medium text view to it. And then add a plain text view. The layout is too big, so change its width and height to wrap content. Finally, add an image view at the center but right corner of the layout. Let us now add IDs to all the widgets of our layout. The imageView can be called item_action because it represents an action. The first textView can be called item_name and the second textView can be called item_quantity. The checkBox can be called item_status because it represents the status of the shopping list item. Remove the label of the checkbox by resetting its text attribute. Next set the margin left of the LinearLayout to 72dp, this is the recommended left margin. Change the textColor of the medium text view to @android:color/black. To display the Edit icon in the ImageView, set its source property to @drawable/ic_create_24dp. To make it a lighter shade of gray, change its alpha to 0.26. Finally, this entire layout should have a height of 72dp according to the material design guidelines, because it has two lines of text. The layout for the active items is now ready. The layout for inactive items is gonna be very similar. Therefore, let us simply create a copy of this layout and call it inactive_item. The item status check box of a completed item must always be checked, so set its checked attribute to true. We don't want the user to uncheck this check box, so set the clickable property to false. This layout should not display the item's quantity. Therefore delete the second TextView. The item action image view should display the undo icon instead of the edit icon. So change its source accordingly. Because this list item has only a single line of text, its recommended height is 5060p. We will add the strikethrough effect later. Let's create the subheaders layouts now. Create a new layout and set its name to subheader. Its root element can be a relative layout. Use an empty linear layout to represent the divider, position it at the top of the layout and set its height to 1 dp. That's the recommended height for dividers. Give it a black background and change its alpha to 0.12. This is again the recommend opacity of a divider. Next add a plaintext view at the center of the layout at the left corner. This text view should read recently completed. Change its text color to add color/colorPrimary and make it bold. Change the height of the layout to 48dp, the recommended height for a single line, text-only list item. We have now finished creating the layouts of the individual items of the RecyclerView and can move on to creating the RecyclerView itself. So open content_main.xml. Here, create a new tag for the RecyclerView. Set its width and height to match parent, because we want it to fill the screen. Call it shopping_items. Let us now initialize the RecyclerView in MainActivity.java. Add the RecyclerView as a member variable of the class. Inside the onCreate method, initialize it like any other UI widget, using the findViewById method. Every RecyclerView must have a layout manager associated with it. To set the layout manager, call the set layout manager method. To display a vertical list of items, we can use a new instance of linear layout manager, as the layout manager. You now know how to add a RecycleView to an activity. However, if you tried running the app, you won't to be able to see the RecyclerView because it doesn't have an adapter associated with it. In the next lesson, you're going to learn what an adapter is and how to create one.

Back to the top