Project: Dogglers app

This codelab introduces a new app called Dogglers that you'll build on your own. This codelab walks you through the steps to complete the Dogglers app project, including project setup and testing within Android Studio.

Prerequisites

  • This project is for users who have completed Unit 2 of the Android Basics in Kotlin course.

What you'll build

  • You'll build an app called Dogglers that displays information in a RecyclerView using the skills you learned in Unit 2.

What you'll need

  • A computer with Android Studio installed.

Welcome to Project: Dogglers app!

At Google, we affectionately call our coworkers Googlers. With many Googlers owning dogs as pets, we thought it would be fun to create an app for our canine friends, called Dogglers. Your task is to implement Dogglers, which shows scrolling lists of Googlers' pet dogs along with a bit of information about each one, such as their name, age, hobbies, and a photo. In this project, you'll build layouts for the RecyclerView items in the Dogglers app, and implement an adapter so that the list of dogs can be presented three ways: by horizontal scrolling, vertical scrolling, and vertically scrolling grid layout.

When you launch the app, you're provided with options for horizontal, vertical, and grid layouts.

adf6ec8cce8cc655.png

The first option is a vertical scrolling recycler view with items that take up the full width of the screen.

51045288de047217.png

The second option shows the list of dogs in a horizontally scrolling recycler view.

ce534bc07ecba432.png

The third option shows the dogs in a vertically scrolling grid-style layout where two dogs are shown on each row.

6dac0c59577f6fbb.png

All of these layouts are powered by the same adapter class. Your task will be to build the layouts for the recycler view cards, and then implement the adapter so that each item is populated with the information about each dog.

Download the project code

Note that the folder name is android-basics-kotlin-dogglers-app. Select this folder when you open the project in Android Studio.

To get the code for this codelab and open it in Android Studio, do the following.

Get the code

  1. Click on the provided URL. This opens the GitHub page for the project in a browser.
  2. On the GitHub page for the project, click the Code button, which brings up a dialog.

5b0a76c50478a73f.png

  1. In the dialog, click the Download ZIP button to save the project to your computer. Wait for the download to complete.
  2. Locate the file on your computer (likely in the Downloads folder).
  3. Double-click the ZIP file to unpack it. This creates a new folder that contains the project files.

Open the project in Android Studio

  1. Start Android Studio.
  2. In the Welcome to Android Studio window, click Open an existing Android Studio project.

36cc44fcf0f89a1d.png

Note: If Android Studio is already open, instead, select the File > New > Import Project menu option.

21f3eec988dcfbe9.png

  1. In the Import Project dialog, navigate to where the unzipped project folder is located (likely in your Downloads folder).
  2. Double-click on that project folder.
  3. Wait for Android Studio to open the project.
  4. Click the Run button 11c34fc5e516fb1c.png to build and run the app. Make sure it builds as expected.
  5. Browse the project files in the Project tool window to see how the app is set-up.

The project is organized into separate packages. While most of the functionality is already implemented, you'll need to implement the DogCardAdapter. There are also two layout files that you'll need to modify. Other files are discussed as needed in the following instructions.

93c2c1fee50a493b.png

Implement the layout

Both the vertical and horizontal layouts are identical, so you only need to implement a single layout file for both. The grid layout displays all the same information, but the dog's name, age, and hobbies are stacked vertically, so you'll need a separate layout for this case. Both layouts require four different views to display information about each dog.

  1. An ImageView with the dog's picture
  2. A TextView with the dog's name
  3. A TextView with the dog's age
  4. A TextView with the dog's hobbies

You'll also notice some styling on each card to show a border and a shadow. This is handled by MaterialCardView, which is already added to the layout files in the starter project. Within each MaterialCardView is a ConstraintLayout where you'll need to add the remaining views.

There are two XML files you'll need to work with to implement the layouts: horizontal_vertical_list_item.xml for the horizontal and vertical layouts, and grid_list_item.xml for the grid layout.

  1. Build the layout for vertical and horizontal lists.

Open up vertical_horizontal_list_item.xml, and in the inner ConstraintLayout, build the layout to match the image.

73a663ae61811a4b.png

  1. Build the grid layout.

Open up grid_list_item.xml, and in the inner ConstraintLayout, build the layout to match the image.

50dd020683b63b1a.png

Implement the adapter

Once you've defined your layouts, your next task is to implement the RecyclerView adapter. Open up DogCardAdapter.kt in the adapter package. You'll see there are lots of TODO comments that help explain what you need to implement.

3192d25f55b403bc.png

There are five steps you'll need to implement the adapter.

  1. Define a variable or constant for the list of dog data. The list can be found in the data package in an object called DataSource, and looks like the following:
object DataSource {

   val dogs: List<Dog> = listOf( ...

}

The dogs property is of type List<Dog>. The Dog class is found in the model package, and defines four properties: an image (represented by a resource ID), and three String properties.

data class Dog(
   @DrawableRes val imageResourceId: Int,
   val name: String,
   val age: String,
   val hobbies: String
)

Set the variable you define in DogCardAdapter to the dogs list in the DataSource object.

  1. Implement the DogCardViewHolder. The view holder should bind the four views that need to be set for each recycler view card. The same view holder will be shared for both the grid_list_item and vertical_horizontal_list_item layouts, as all the views are shared between both layouts. The DogCardViewHolder should include properties for the following view IDs: dog_image, dog_name, dog_age, and dog_hobbies.
  2. In onCreateViewHolder(), you want to either inflate the grid_list_item or vertical_horizontal_list_item layout. How do you know which layout to use? In the adapter's definition, you can see that a value called layout of type Int is passed in when creating an instance of the adapter.
class DogCardAdapter(
   private val context: Context?,
   private val layout: Int
): RecyclerView.Adapter<DogCardAdapter.DogCardViewHolder>() {

This corresponds to a value defined in the Layout object, located in the const package.

object Layout {
   val VERTICAL = 1
   val HORIZONTAL = 2
   val GRID = 3
}

The value of layout will either be 1, 2, or 3, but you can check it against the identifiers VERTICAL, HORIZONTAL, and GRID, from the Layout object.

For the GRID layout, inflate the grid_list_item layout, and for HORIZONTAL and VERTICAL layouts, inflate the horizontal_vertical_list_item layout. The method should return a DogCardViewHolder instance representing the inflated layout.

  1. Implement getItemCount() to return the length of the list of dogs.
  2. Finally, you need to implement onBindViewHolder() to set data in each of the recycler view cards. Use the position to access the correct dog data from the list, and set the image and dog name. Use the string resources, dog_age, and dog_hobbies to format the age and hobbies appropriately.

Once you've finished implementing the adapter, run your app on the emulator to verify that everything is implemented correctly.

The Dogglers project contains an "androidTest" target with several test cases.

583b42ccd1e5b22.png

Running your tests

To run your tests, you can do one of the following:

For a single test case, open up a test case class and click the green arrow to the left of the class declaration. You can then select the Run option from the menu. This will run all of the tests in the test case.

a32317d35c77142b.png

Often you'll only want to run a single test, for example, if there's only one failing test and the other tests pass. You can run a single test just as you would the entire test case. Use the green arrow and select the Run option.

ac6244434cfafb60.png

If you have multiple test cases, you can also run the entire test suite. Just like running the app, you can find this option on the Run menu.

7a925c5e196725bb.png

Note that Android Studio will default to the last target that you ran (app, test targets, etc.) so if the menu still says Run > Run ‘app', you can run the test target, by selecting Run > Run.

ee1e227446c536fe.png

Then choose the test target from the popup menu.

d570c947769db65c.png

The results of running the tests are shown on the Run tab. In the pane on the left, you'll see a list of failing tests, if any. Failing tests are marked with a red exclamation point next to the function name. Passing tests are marked with a green check mark.

6d68f2bf589501ae.png

If a test fails, the text output provides information to help you fix the problem that caused the test to fail.

63f37b6428781c02.png

For example, in the above error message, the test is checking if a TextView is using a specific string resource. However, the test is failing. The text after "Expected" and "Got" do not match, meaning the value the test expected does not match the value from the running app.

We'd love to hear your opinions on this project. Take this short survey to give us feedback - your feedback will help guide future projects in this course.