Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
About the book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Who this book is for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Questions and contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
About the source code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Change log . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Chapter 1: Design principles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
“State” is the heart of declarative views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Applying “State hoisting” to delegate states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Defining the “Source of Truth”. Who is responsible for providing the states? . . . . . . . . . 6
ViewModel as Source of truth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Understanding data flow, “Unidirectional Data Flow Pattern” . . . . . . . . . . . . . . . . . . . . . . 9
Let’s connect View and ViewModel components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Structures represented as states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Modeling and grouping events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Chapter 2: Codelab - Practicing with states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
“Views” as source of truth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
“ViewModel” as source of truth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Grouping the “States” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Grouping the “Events” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Bonus extra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Chapter 3: OrderNow, A Real Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
About the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Screens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Chapter 4: Application Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 36
Choosing a style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Definition of the layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
General architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
CONTENTS
Organizing directories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Nomenclature and naming elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Chapter 5: Skeleton: Main structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Creating Screens and ViewModels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
UI patterns: TopAppBar y BottomAppBar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Putting all together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Chapter 6: Designing navigation in App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
App’s State: A general state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Defining the navigation map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Navigation from other UI elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Chapter 7: Implementing “Features” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Before starting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Home Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Product List Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Product Detail Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Cart Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Checkout Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Place Order Screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Revision 1 (06-27-2022) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
I must confess that I had to rethink the edition of the book several times before I managed to structure it to the current version.
The reason was straightforward. While I was writing the book’s content, the announcement appeared for improvements in the architecture components with Jetpack; later, from Kotlin, more powerful tools were introduced, and later enabled Flow Coroutines as an option for reactive programming. As if that were not enough, the introduction of Compose is announced.
Mind Blown!
I did not hesitate twice. We had to reinvent ourselves (yes, also that typical phrase around here).
And it is that Compose and the advent of declarative views in both Android and iOS were inescapable.
Therefore, I decided that for this book to serve as a guide in developing applications for Android, I had to involve the latest and best tools available in the ecosystem to design and implement mobile applications.
I think that the first reader who benefited from this book was me.
It has allowed me to explore and build components differently from how they had been until a few years ago and take advantage of the maximum of these recent changes that both Google and JetBrains have been contributing to the solutions and software development industry.
I have tried to be practical in the presentation of the topics, without much theory, rather, leaving the references for readers to investigate and delve into a particular topic and presenting the code of a project of e-commerce application without going into much detail.
However, leaving the functional and complete source code in a repository for the reader on their own to analyze, digest, and understand in their own time.
I am sincere in admitting that I have been quite excited about the capabilities Compose, Kotlin, Jetpack Components, and these other modern tools provide when implementing a native mobile app.
Once you learn to dominate this set of technologies, there is no going back. This modern style is my first choice of mobile app design, even though I’m older of experience working with the old style.
I admit that it was not easy at the beginning; reviewing and studying a concept several times as necessary until I understood it clearly.
Fortunately, Google’s engineering team has documented and shared vital design guides as an implementation reference, many of which I have referenced in the sections of this book.
Whether you are an experienced developer or new to the arena, this book will provide an initial understanding of adopting the modern style of building native mobile applications for Android.
I hope you like this work and find it helpful and, above all, practical.