RecyclerView and CardView in Android

Duration

10 minutes

Tip: If you are doing this exercise live in a session, make sure to make good use of the instructor, they are online to answer any questions you have!

Goals

The goal here is to code an item-layout file to display information about a restaurant (name and rating). This file will eventually be used by your adapter to display an item inside your RecyclerView.

Required assets

The provided Resources folder for this part contains a subfolder named Completed with a solution you can use to check your work. There is also a folder named Assets which contains some pre-written code you will utilize. Please make sure you have these folders before you begin. This lab is a continuation of the previous one. If you did not complete the previous exercise, you can use the Completed solution from the previous part as starter code for this part.

Steps

Below are the step-by-step instructions to implement the exercise.

Sample data

  1. Add the provided file Assets/Restaurant.cs to your project.
  2. Open Restaurant.cs.
  3. Take a moment to examine the code. Note that it contains a simple Restaurant class and a method to create some sample data.

Layout file

  1. Add a new Android layout file to your Resources/layout folder. Name it Restaurant.axml
  2. Use a horizontal LinearLayout for the root of your layout file. (If your new file already includes a LinearLayout, make sure to set orientation to `horizontal` and the height to `wrap_content`.)
  3. Add the code shown below to the root layout. Notice how it matches the sample restaurant data: a TextView for the name and a RatingBar for the rating.
    <TextView
      android:id                      ="@+id/nameTextView"
      android:layout_alignParentBottom="true"
      android:textAppearance          ="?android:attr/textAppearanceLarge"
      android:layout_marginLeft       ="16dp"
      android:layout_marginRight      ="16dp"
      android:layout_width            ="200dp"
      android:layout_height           ="wrap_content" />
    
    <RatingBar
      android:id                     ="@+id/ratingBar"
      android:layout_alignParentRight="true"
      android:layout_width           ="wrap_content"
      android:layout_height          ="wrap_content"
      style                          ="?android:attr/ratingBarStyleSmall"
      android:numStars               ="5" />
    
  4. Compile your app. You do not need to run it since it will not display any output.

Summary

In this exercise, you created a layout file to display information about a Restaurant object. This file defines the item UI that RecyclerView will display for you.

Go Back