Lesson 8 - App Architecture (UI Layer)

Lesson 8:
App architecture
(UI layer)
Android Development with Kotlin v1.0 This work is licensed under the Apache 2 license. 1
About this lesson
Lesson 8: App architecture (UI layer)
● Android app architecture
● ViewModel
● Data binding
● LiveData
● Transform LiveData
● Summary
Android Development with Kotlin This work is licensed under the Apache 2 license. 2
Android app architecture
Avoid short-term hacks
● External factors, such as tight deadlines, can lead to poor

decisions about app design and structure.
● Decisions have consequences for future work (app can be
harder to maintain long-term).
● Need to balance on-time delivery and future maintenance
burden.
Examples of short-term hacks
● Tailoring your app to a specific device

● Blindly copying and pasting code into your files
● Placing all business logic in activity file
● Hardcoding user-facing strings in your code
Why you need good app architecture
● Clearly defines where specific business logic belongs

● Makes it easier for developers to collaborate
● Makes your code easier to test
● Lets you benefit from already-solved problems
● Saves time and reduces technical debt as you extend your app
Android Jetpack
● Android libraries that incorporate best practices and provide

backward compatibility in your apps
● Jetpack comprises the androidx.* package libraries
Separation of concerns
res/layout
UI Controller
(Activity/Fragment) ViewModel
LiveData
Data Layer
Architecture components
● Architecture design patterns, like MVVM and MVI, describe a

loose template for what the structure of your app should be.
● Jetpack architecture components help you design robust,
testable, and maintainable apps.
ViewModel
Gradle: lifecycle extensions
In app/build.gradle file:
ViewModel
● Prepares data for the UI

● Must not reference activity, fragment, or views in view hierarchy
● Scoped to a lifecycle (which activity and fragment have)
● Enables data to survive configuration changes
● Survives as long as the scope is alive
Lifetime of a ViewModel
Kabaddi Kounter
ViewModel class
abstract class ViewModel
Implement a ViewModel
Load and use a ViewModel
Using a ViewModel
Within MainActivity onCreate():
Data binding
ViewModels and data binding
● App architecture without data binding
UI Controller
Views
ViewModel (activity/fragment with
(defined in XML layout)
click listeners)
● ViewModels can work in concert with data binding
Views
ViewModel (defined in XML layout)
Data binding in XML revisited
Specify ViewModels in the data tag of a binding.
Attaching a ViewModel to a data binding
Using a ViewModel from a data binding
In activity_main.xml:
ViewModels and data binding
LiveData
Observer design pattern
● Subject maintains list of observers to notify when state changes.

● Observers receive state changes from subject and execute
appropriate code.
● Observers can be added or removed at any time.
Observer design pattern diagram
Observable
notify observe() notify observe()
Observer Observer
LiveData
● A lifecycle-aware data holder that can be observed
● Wrapper that can be used with any data including lists
(for example, LiveData<Int> holds an Int)
● Often used by ViewModels to hold individual data fields
● Observers (activity or fragment) can be added or removed
○ observe(owner: LifecycleOwner, observer: Observer)
removeObserver(observer: Observer)
LiveData versus MutableLiveData
LiveData<T> MutableLiveData<T>
● getValue() ● getValue()
● postValue(value: T)
● setValue(value: T)
T is the type of data that’s stored in LiveData or MutableLiveData.
Use LiveData in ViewModel
Add an observer on LiveData
Set up click listener to increment ViewModel score:
Create observer to update team A score on screen:
Add the observer onto scoreA LiveData in ViewModel:
Two-way data binding
● We already have two-way binding with ViewModel and

LiveData.
● Binding to LiveData in XML eliminates need for an observer in
code.
Example layout XML
Example Activity
Example ViewModel
Transform LiveData
Manipulating LiveData with transformations
LiveData can be transformed into a new LiveData object.

● map()
● switchMap()
Example LiveData with transformations
Summary
Summary
In Lesson 8, you learned how to:
● Follow good app architecture design, and the separation-of-concerns
principle to make apps more maintainable and reduce technical debt
● Create a ViewModel to hold data separately from a UI controller
● Use ViewModel with data binding to make a responsive UI with less
code
● Use observers to automatically get updates from LiveData
Learn More
● Guide to app architecture

● Android Jetpack
● ViewModel Overview
● Android architecture sample app
● ViewModelProvider
● Lifecycle Aware Data Loading with Architecture Components
● ViewModels and LiveData: Patterns + AntiPatterns
Pathway
Practice what you’ve learned by

completing the pathway:
Lesson 8: App architecture (UI layer)

Lesson 8 - App Architecture (UI Layer)

Uploaded by

Copyright:

Available Formats

Lesson 8 - App Architecture (UI Layer)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson 8 - App Architecture (UI Layer)

Uploaded by

Copyright:

Available Formats

Lesson 8:

● External factors, such as tight deadlines, can lead to poor

● Tailoring your app to a speciﬁc device

● Clearly deﬁnes where speciﬁc business logic belongs

● Android libraries that incorporate best practices and provide

● Architecture design patterns, like MVVM and MVI, describe a

● Prepares data for the UI

Within MainActivity onCreate():

● ViewModels can work in concert with data binding

Specify ViewModels in the data tag of a binding.

● Subject maintains list of observers to notify when state changes.

notify observe() notify observe()

T is the type of data that’s stored in LiveData or MutableLiveData.

Create observer to update team A score on screen:

Add the observer onto scoreA LiveData in ViewModel:

● We already have two-way binding with ViewModel and

LiveData can be transformed into a new LiveData object.

● Guide to app architecture

Practice what you’ve learned by

You might also like