Day50 of #100DaysOfCode

#CodeTogether Day 50/100

Hii folks 🙌

Today I will be continuing the same pathway in which I will create an app called Dogglers app using the previously learned concept.

Also I’m excited today because I’m completing my 50th day of #100DaysOfCode ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨

Unit 2: Layouts

Pathway 3: Display a scrollable list

Source: https://developer.android.com/courses/android-basics-kotlin/course

Project: Dogglers app

We will start by downloading the repo from the given link in the course and setting it up in Android Studio.

Now we will move forward to implement the layout.

• Implement the layout

Both the vertical and horizontal layouts are identical, so we 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 we’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

This is handled by MaterialCardView, which is already added to the layout files in the starter project. Within each MaterialCardView is a ConstraintLayout where we'll need to add the remaining views.

• 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.

• Build the grid layout.

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

• Implement the adapter

Once we’ve defined our layouts, our next task is to implement the RecyclerView adapter. Open up DogCardAdapter.kt in the adapter package.

• Now we 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
)

• 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.
• In onCreateViewHolder(), we want to either inflate the grid_list_item or vertical_horizontal_list_item layout.

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
}

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

Now the app looks something like this:

Dogglers App

Now we will run our app on the emulator to verify that everything is implemented correctly.

That is all for Day50 ✅

Thanks for reading, See you tomorrow!