Day75 of #100DaysOfCode

Day75 of #100DaysOfCode

Hii folks 🙌

Today I will be continuing the same pathway in which we will learn and implement the example of the advanced navigation app by building a cupcake app.

Unit 3: Navigation

Pathway 3: Advanced navigation app Examples

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

Shared ViewModel

We will start by populating the correct data in each of the fragments. We’ll be using a shared ViewModel to save the app's data in a single ViewModel. Multiple fragments in the app will access the shared ViewModel using their activity scope.

From looking at the app features, we can reason that it would be useful to store this order information in a single ViewModel, which can be shared across the fragments in this activity. The app data saved within the ViewModel is retained during configuration changes. To add a ViewModel to our app, we should create a new class that extends from the ViewModel class.

Create OrderViewModel

In this task, we will create a shared ViewModel for the Cupcake app called OrderViewModel. We will also add the app data as properties inside the ViewModel and methods to update and modify the data. Here are the properties of the class:

• Order quantity (Integer)
• Cupcake flavor (String)
• Pickup date (String)
• Price (Double)

Follow ViewModel best practices

In a ViewModel, it is a recommended practice to not expose view model data as public variables. Otherwise, the app data can be modified in unexpected ways by the external classes and create edge cases our app didn't expect to handle. Instead, we will make these mutable properties private, implementing a backing property, and expose a public immutable version of each property, if needed. The convention is to prefix the name of the private mutable properties with an underscore (_).

Here are the methods to update the properties above, depending on the user’s choice:

• setQuantity(numberCupcakes: Int)
• setFlavor(desiredFlavor: String)
• setDate(pickupDate: String)

We don’t need a setter method for the price because we will calculate it within the OrderViewModel using other properties. We will create a new package in the project called model and add the OrderViewModel class. This will separate the view model code from the rest of our UI code (fragments and activities).

1. In the Project window of Android Studio, right click on com.example.cupcake > New > Package.
2. A New Package dialog will be opened, give the package name as com.example.cupcake.model.

1. Then create the OrderViewModel Kotlin class under the model package. In the Project window, right-click on the model package and select New > Kotlin File/Class. In the new dialog, give the filename OrderViewModel.

• In OrderViewModel.kt, change the class signature to extend from ViewModel.

import androidx.lifecycle.ViewModel
class OrderViewModel : ViewModel() {
}

• Inside the OrderViewModel class, we will add the properties that were discussed above as private val.
• We will the change the property types to LiveData and add backing fields to the properties, so that these properties can be observable and UI can be updated when the source data in the view model changes.

private val _quantity = MutableLiveData<Int>(0)
val quantity: LiveData<Int> = _quantity
private val _flavor = MutableLiveData<String>("")
val flavor: LiveData<String> = _flavor
private val _date = MutableLiveData<String>("")
val date: LiveData<String> = _date
private val _price = MutableLiveData<Double>(0.0)
val price: LiveData<Double> = _price

• We will need to import these classes:

import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData

fun setQuantity(numberCupcakes: Int) {
    _quantity.value = numberCupcakes
}
fun setFlavor(desiredFlavor: String) {
    _flavor.value = desiredFlavor
}
fun setDate(pickupDate: String) {
    _date.value = pickupDate
}

• Build and run the app to make sure there are no compile errors. There should be no visible change in the UI yet.

That is all for Day75 ✅

Thanks for reading, See you tomorrow!