Moster 04 display selected data items

[AnelCC]

4. Moster display selected data items

1. Handle RecyclerView click events

   override fun onMonsterItemClick(monster: Monster) {
        viewModel.selectedMonster.value = monster
        Log.i(LOG_TAG, "Selected monster value: ${viewModel.selectedMonster.value}")
        navController.navigate(R.id.action_mainFragment_to_detailFragment)
    }

2. Create and navigate to a detail fragment

DetailFragment.kl

3. Add an Up button to a secondary fragment

   (requireActivity() as AppCompatActivity).run {
            supportActionBar?.setDisplayHomeAsUpEnabled(true)
        }
        setHasOptionsMenu(true)

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        if (item.itemId == android.R.id.home) {
            navController.navigateUp()
        }
        return super.onOptionsItemSelected(item)
    }

4. Pass data in a shared ViewModel
   SharedViewModel is used in MainFragment and DetailFragment to share selectedMonster mutable data.
   Update selectedMonster from MainFragment

 viewModel.selectedMonster.value = monster

Instance the viewModel in DetailFragment

viewModel = ViewModelProvider(requireActivity()).get(SharedViewModel::class.java)

5. Display details with data binding

Gradle settings

  dataBinding {
        enabled = true
    }

Update the layout: instance a variable ViewModel

<layout
    ...
    <data>
    <variable
        name="viewModel"
        type="com.anelcc.monster.ui.share.SharedViewModel"/>
</layout> 

Bind info: apply viewModel in layout

<TextView
            android:id="@+id/nameText"
            android:text="@{viewModel.selectedMonster.name}"/>
<TextView
            android:text="@{viewModel.selectedMonster.description}"/>
<TextView
            android:rating="@{viewModel.selectedMonster.scariness}"/>

6. Customize data bindings with an adapter
   Create BindingAdapters.kt and link the data with the attribute name.

BindingAdapters.kt

@BindingAdapter("imageUrl")
fun loadImage(view: ImageView, imageUrl: String) {
}

@BindingAdapter("price")
fun itemPrice(view: TextView, value: Double) {
} 

fragment_detail.xml

app:imageUrl="@{viewModel.selectedMonster.imageUrl}"
app:price="@{viewModel.selectedMonster.price}"

@BindingAdapter("imageUrl") ....................... @BindingAdapter("price")