Day77 of #100DaysOfCode

Day77 of #100DaysOfCode

Hii folks 🙌

Today I will be continuing the same pathway in which we will use the ViewModel with data Binding.

Unit 3: Navigation

Pathway 3: Advanced navigation app Examples

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

Use the ViewModel with Data Binding

Today we will use data binding to bind the view model data to the UI. We will also update the shared view model based on the selections the user makes in the UI.

Update flavor with user choice

1. In layout/fragment_flavor.xml, we will add a <data> tag inside the root <layout> tag. We will then add a layout variable called viewModel of the type com.example.cupcake.model.OrderViewModel.

<layout ...>
    <data>
        <variable
            name="viewModel"
            type="com.example.cupcake.model.OrderViewModel" />
    </data>
    <ScrollView ...>
    ...

• Similarly, we will repeat the above step for fragment_pickup.xml, and fragment_summary.xml to add the viewModel layout variable.
• In the FlavorFragment class, inside onViewCreated(), we will bind the view model instance with the shared view model instance in the layout. Now, we will add the following code inside the binding?.apply block.

binding?.apply {
    viewModel = sharedViewModel
    ...
}

Apply scope function

The apply is a scope function in the Kotlin standard library. It executes a block of code within the context of an object. It forms a temporary scope, and in that scope, we can access the object without its name. The common use case for apply is to configure an object. Such calls can be read as "apply the following assignments to the object."

For Example:

clark.apply {
    firstName = "Clark"
    lastName = "James"
    age = 18
}

// The equivalent code without apply scope function would look like the following.

clark.firstName = "Clark"
clark.lastName = "James"
clark.age = 18

• We will do the same step for the onViewCreated() method inside the PickupFragment and SummaryFragment classes.

binding?.apply {
    viewModel = sharedViewModel
    ...
}

• In fragment_flavor.xml, we will use the new layout variable, viewModel to set the checked attribute of the radio buttons based on the flavor value in the view model. If the flavor represented by a radio button is the same as the flavor that's saved in the view model, then we will display the radio button as selected (checked = true). The binding expression for the checked state of the Vanilla RadioButton would look like the following:

<RadioGroup
   ...>

   <RadioButton
       android:id="@+id/vanilla"
       ...
       android:onClick="@{() -> viewModel.setFlavor(@string/vanilla)}"
       .../>

   <RadioButton
       android:id="@+id/chocolate"
       ...
       android:onClick="@{() -> viewModel.setFlavor(@string/chocolate)}"
       .../>

   <RadioButton
       android:id="@+id/red_velvet"
       ...
       android:onClick="@{() -> viewModel.setFlavor(@string/red_velvet)}"
       .../>

   <RadioButton
       android:id="@+id/salted_caramel"
       ...
       android:onClick="@{() -> viewModel.setFlavor(@string/salted_caramel)}"
       .../>

   <RadioButton
       android:id="@+id/coffee"
       ...
       android:onClick="@{() -> viewModel.setFlavor(@string/coffee)}"
       .../>
</RadioGroup>

We will now run the app and will notice how the Vanilla option is selected by default in the flavor fragment.

That is all for Day77 ✅

Thanks for reading, See you tomorrow!