Dogglers app uses a RecyclerView in horizontal, vertical and grid view to show a group of CardViews

Overview

Welcome to DogglersApp!

This app is the final project from Unit 2 of Android Basics in Kotlin given by Google codelabs: https://developer.android.com/courses/android-basics-kotlin/course

What is it about?

Dogglers app uses a RecyclerView in horizontal, vertical and grid view to show a group of CardViews with the dog image, name, age and hobbies.

How has Dogglers app been done?

Dogglers app comes with some prebuilt-in code, so I had some specific tasks I had to accomplish in order to finish the project:

Design part:

In this part of the project I had to make the xml designs for horizontal/vertical view and also for the grid one.

For the vertical/horizontal RecyclerView, I used the MaterialCardView with a ConstraintLayout inside it to place the information about the dog, here's the final design:

Vertical/Horizontal dog cardivew design

For the grid layout, using the same information as stated above, this is the design I came up with:

Grid dog cardview design

Code part:

In the coding section, I had to implement the adapter in order to show the dogs in the frontend design I made before.

Firstly, I declared a variable called dogList which holds the list of dogs information.

Imgur

Secondly, I created the class DogCardViewHolder, which extends from RecyclerView.ViewHolder. There I defined the different views we need to modify: the dog image, and texts from name, age and hobbies.

Imgur

Thirdly, I implemented the onCreateViewHolder method from the DogCardViewHolder class (Which was inherited from its parent class RecyclerView.ViewHolder). For this scenario I had a problem, which was, what layout should I inflate (Vertical/Horizontal or Grid), for this, I used a when expression that checked whether the layout variable from the DogCardAdapter was Layout.Grid or any other value like Layout.Vertical or Layout.Horizontal. This can be seen in the Layout.kt file inside the const package.

Imgur

Fourthly i implemented the getItemCount() method which is trite.

Imgur

Finally, the last step was to implement the onBindViewHolder() method which sets the different values across the ViewHolder UI items. The first thing I did was to get the current position dog that is holded in the dogData variable, then i set the image of the dog, the name, the age, and the hobbies, always using the .? safe call operator for null-safety.

Imgur

Final project overview

  • Launcher app view:

Imgur

  • Vertical View:

Imgur

  • Horizontal View:

Imgur

  • Grid View:

Imgur

You might also like...
Android library for RecyclerView to manage order of items and multiple view types.
Android library for RecyclerView to manage order of items and multiple view types.

recyclerview-binder Android Library for RecyclerView to manage order of items and multiple view types. Features Insert any items to wherever you want

Android library defining adapter classes of RecyclerView to manage multiple view types
Android library defining adapter classes of RecyclerView to manage multiple view types

RecyclerView-MultipleViewTypeAdapter RecyclerView adapter classes for managing multiple view types Release Note [Release Note] (https://github.com/yqr

Android Development by using Kotlin, this App uses the concept of API, Recycler Methods and Databases.
Android Development by using Kotlin, this App uses the concept of API, Recycler Methods and Databases.

Bookstore App by using Kotlin This Project is made using Kotlin, and it uses main concepts of API, Databases, Fragments and many more. This Applicatio

Handy library to integrate pagination, which allow no data layout, refresh layout, recycler view in one view and easy way to bind pagination in app.
Handy library to integrate pagination, which allow no data layout, refresh layout, recycler view in one view and easy way to bind pagination in app.

Pagination View Handy library to integrate pagination, which allow no data layout, refresh layout, recycler view in one view and easy way to bind pagi

RecyclerView extension library which provides advanced features. (ex. Google's Inbox app like swiping, Play Music app like drag and drop sorting)
RecyclerView extension library which provides advanced features. (ex. Google's Inbox app like swiping, Play Music app like drag and drop sorting)

Advanced RecyclerView This RecyclerView extension library provides Google's Inbox app like swiping, Play Music app like drag-and-drop sorting and expa

Using RecyclerView to display data instead of ScrollView or lInearLayout for a strong app. It replaces the ScrollView used in trackMySleep app.
Using RecyclerView to display data instead of ScrollView or lInearLayout for a strong app. It replaces the ScrollView used in trackMySleep app.

RecyclerView - SleepQualityTracker with RecyclerView app This is the toy app for Lesson 7 of the Android App Development in Kotlin course on Udacity.

A RecyclerView(advanced and flexible version of ListView in Android) with refreshing,loading more,animation and many other features.
A RecyclerView(advanced and flexible version of ListView in Android) with refreshing,loading more,animation and many other features.

UltimateRecyclerView Master branch: Dev branch: Project website:https://github.com/cymcsg/UltimateRecyclerView Description UltimateRecyclerView is a R

RecyclerView with DiffUtil is a way to improve the performance of your app
RecyclerView with DiffUtil is a way to improve the performance of your app

RecylerViewSamples RecyclerView with DiffUtil is a way to improve the performanc

[] Super fast and easy way to create header for Android RecyclerView

DEPRECATED I created this library back in the day when I thought RecyclerView was all new and difficult. Writing an adapter that could inflate multipl

Owner
David Ortega Farrerons
I'm a junior developer looking to improve my skills in Kotlin with Android app development
David Ortega Farrerons
A layout manager for the RecyclerView with interchangeable linear, grid, and staggered displays of views, all with configurable section headers including the sticky variety as specified in the material design docs.

SuperSLiM This is the version 5 development branch. Project Plan Support me on Patreon Blog What is Version 5 Version 5 is the current development bra

Tonic Artos 2.1k Jan 2, 2023
TikTok-RecyclerView - This is a demo app built using 'Koin' a new dependency injection framework for Android along with RecyclerView and ExoPlayer2.

TikTok-RecyclerView Demo About This is a demo app built using 'Koin' a new dependency injection framework for Android along with RecyclerView and ExoP

Baljeet Singh 19 Dec 28, 2022
the library is a loop RecyclerView(expression), can show some effects when display

CircleRecyclerView the library is a loop RecyclerView, can show some effects when display screenshot CircularViewMode ScaleXViewMode & ScaleYViewMode

Matt Yao 704 Jan 5, 2023
RecyclerView : SleepQualityTracker with RecyclerView app

RecyclerView - SleepQualityTracker with RecyclerView app SleepQualityTracker with RecyclerView This app builds on the SleepQualityTracker developed pr

Kevin 2 May 14, 2022
A RecyclerView that implements pullrefresh and loadingmore featrues.you can use it like a standard RecyclerView

XRecyclerView a RecyclerView that implements pullrefresh , loadingmore and header featrues.you can use it like a standard RecyclerView. you don't need

XRecyclerView 5.3k Dec 26, 2022
A RecyclerView that implements pullrefresh and loadingmore featrues.you can use it like a standard RecyclerView

XRecyclerView a RecyclerView that implements pullrefresh , loadingmore and header featrues.you can use it like a standard RecyclerView. you don't need

XRecyclerView 5.3k Dec 26, 2022
Pagination-RecyclerView - Simple and easy way to Paginating a RecyclerView

Pagination-RecyclerView Simple and easy way to Paginating a RecyclerView Android

Rakshit Nawani 0 Jan 3, 2022
ANDROID. ChipsLayoutManager (SpanLayoutManager, FlowLayoutManager). A custom layout manager for RecyclerView which mimicric TextView span behaviour, flow layouts behaviour with support of amazing recyclerView features

ChipsLayoutManager This is ChipsLayoutManager - custom Recycler View's LayoutManager which moves item to the next line when no space left on the curre

Oleg Beloy 3.2k Dec 25, 2022
Carousel Recyclerview let's you create carousel layout with the power of recyclerview by creating custom layout manager.

Carousel Recyclerview let's you create carousel layout with the power of recyclerview by creating custom layout manager.

Jack and phantom 504 Dec 25, 2022