Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.6 Create Cards

By using CardView items in the RecyclerView, you can dramatically change the look of the app. In this lesson, you’ll learn how to replace an ordinary layout file with one that contains a CardView.

Related Links

2.6 Create Cards

Hello and welcome back. Cards are used very frequently in material designed user interfaces. In this lesson we are going to replace these simple list items with cards. As you already know each item in this list makes use of the question layout. It looks like this. If you want to you can directly modify this layout and add a card view to it. However, it would be easier and cleaner to start from scratch. So create a new layout resource file and call it question_card. Set it's root element to RelativeLayout. Set the ID of the relative layout to question to make sure that the click handler we added in the previous lesson continues to work. Now throughout this lesson we will be using the recommended values for paddings and margins mentioned in the material design spec. Let's get started now. Give this related layout a padding of 16dp. Next, switch to the text mode and add a circle image view widget, it's width and height can be 36dp. Position it at the top left corner of the layout using the alignParentTop and alignParentLeft attributes. This widget will display the profile photo of daughter, so I'll call it question_profile_photo. I'll also give it a marginRight of 16dp, and a marginBottom of 16dp. Switch back to the design view. Now you can simply drag and drop other UI widgets, positioning them relative to the CircleImageView. Lets start with a small text, place it beside the CircleImageView, next drag another small text and drop it beside the CircleImageView. Now drag a large text and drop it below the CircleImageView. Drag a small text now and place it below the large text. Next, drag a medium text and place it below the small text. Finally drag another medium text and drop it at the same level as the previous medium text, but at the right color. Let's assign IDs to all these text views now. The first small text shall display the question's author so call it question_author. If this dialogue pops up, select don't ask again and press yes. The next text will display the creation date of the question so call it question_date. The large text will of course display the question's title, so call it question_title. The next small text can be called question_tags. Call the first medium text question_views. And the last medium text can be called question_score. We'll now change the alpha of question date so that it looks a little lighter, set it to 0.6. You can change the alpha of question tags too. Set it to something slightly higher says 0.8. Change the text color of the last text to color accent. Lastly, add some space between the title, tags and the views. So set padding bottom of question to 16dp and the padding top to 8dp. It is now time to move this and tie a layout into a card. So let's switch to the text mode and create a new CardView widget above the relative layout. Set it's width to match_parent and height to wrap_content. You must now cut the RelativeLayout and paste it inside the card view. If you switch back to the design mode you can see the card layout is ready. So go back to the main activity class. Here, inside the onCreateViewHolder method replace the question layout with the question_card layout. The QuestionViewHolder class doesn't match our layout anymore. Therefore, you must modify it. These four views are still present in our new layout so that aren't gonna change them. We just need to add the remaining TextViews cell add one for the view count And one for the creation date and one for the tags. You must also add a circle image view for the profile photo. The question view holder is ready, so get back to main activity. Here, initialize the new TextViews using findViewById. And finally initialize the profile photo CircleImageView as well, using findViewById. We must now set the text properties of all the newly added TextViews. But first let's change the text of the score to getScoreAsString. You can also remove this asked by string. Next, set the text of the tags text view to the value, returned by gettagsAsString. We want to display the creation date as a relative time span string. In other words, instead of the actual time, we must display string such as two minutes ago, one hour ago, or something similar. Therefore, let's call a method here called getCreationDateAsString. This method doesn't exist yet, so create it. Inside the method, use the dateUtils class and call it, getRelativeTimeSpanString method. Pass the value of the getCreationDate method to it. The value must be in milliseconds so multiply it by 1,000. Get back to main activity now. The only remaining TextView is views, so set its text to the value returned by the getViewCountAsString method. Displaying the profile photo in the circle image view is really easy, thanks to Picasso. First, you need to initialize Picasso with the context of the activity. Next, call its load method and pass the URL of the profile photo to it. And finally, call the into method to let Picasso know that the photo must be loaded into the circle image view our cards are ready. If you're in the app now however you will see that there is no space between the cards. To fix this first open activity_main.xml. Here, give the recycler view a pattern of 16dp. Next, get back to MainActivity. We must now create an item decoration that can add a vertical gap between all the cards of the recycler view. So right after the call to the set layout manager method, add a call to the add item decoration method and pass a new instance of item decoration class to it. We need to overwrite only the get item offsets methods, so select it and press OK. We must now set the value of outRect.bottom. The value you specify here will become the vertical gap between the cards. Now we want to use a value of 16 density independent pixels. This variable, however, can only take a number in our in ordinary pixels. Therefore, we must convert 16dp to pixels. The type value class has an applied dimension method that facilitates this conversion. As the first argument passed typedValue.COMPLEX_UNIT_DIP to it. That is nothing but complex unit density independent pixels. As the second argument pass 16 because we want the gap to be 16dp. As the last argument. We must pass a display metric subject so call getResources first and then call getDisplayMetrics. If you run the app again, you'll see that the card interface is ready. You now know how to display carts inside a recycler view. In the next lesson I'll show you how do refresh this list of cards using a swipe gesture. Thanks for watching.

Back to the top