Home > Enterprise >  Change background color of a Fragment from DialogFragment ColorPicker using Mutablelivedata not work
Change background color of a Fragment from DialogFragment ColorPicker using Mutablelivedata not work

Time:05-12

My app should be able to change color of one part of my screen in a Fragment (called Color Preview) from Color Picker that is DialogFragment and appears once a Button is clicked. I used the same ViewModel with MutableLiveData in it within Fragment and DialogFragment. However I am not able to get Data about color in Fragment when I pick some color in DialogFragment. Code below.

Dialog Fragment:

class ColorFragment : DialogFragment() {

private var _binding: FragmentColorBinding? = null
private val binding get() = _binding!!

private val viewModel: MainViewModel by lazy {
    getViewModel {
        MainViewModel()
    }
}

@SuppressLint("DialogFragmentInsteadOfSimpleDialog")
override fun onStart() {
    super.onStart()  
}

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
    FragmentColorBinding.inflate(inflater, container, false).apply {
        _binding = this
        lifecycleOwner = this@ColorFragment
        mainViewModel = getViewModel()

        return root
    }
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    
    binding.color02.setOnClickListener { 
        viewModel.currentLightProfileColor.value = "#00ffff"
    }
}

Main Fragment (where color should be shown) looks like this:

class MainFragment : Fragment() {
private var _binding: FragmentMainBinding? = null
private val binding get() = _binding!!
private var viewCreated = false

private val viewModel: MainViewModel by lazy {
    getViewModel {
        MainViewModel()
    }
}


override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
    FragmentMainBinding.inflate(inflater, container, false).apply {
        _binding = this
        lifecycleOwner = this@MainFragment
        mainViewModel = getViewModel()
        executePendingBindings()

        viewCreated = true

        return root
    }
}


override fun onViewCreated(view: View, savedInstanceState: Bundle?) {

        binding.colorPreview.holder?.addCallback(this)
       
        viewModel.currentLightProfileColor.observe(viewLifecycleOwner) { color ->
            Color.parseColor(color.toString()).let { color ->
                Timber.d("color LiveDataGet: ${color}")
                binding.colorPreview.setBackgroundColor(color)
                }
            }
      
    binding.color.setOnClickListener {
        findNavController().navigate(R.id.ColorFragment)
    }
}

In my ViewModel there is only MutableLiveData for color:

class MainViewModel : ViewModel() {
val currentLightProfileColor = MutableLiveData<String>()}

I dont get any errors but once I click on color2 I should get from Timber in Log: "color LiveDataGet: #00ffff" but I dont and color preview does not change color.

Did I miss something? I would appreciate if someone could quickly take a look at my code. Thanks!

CodePudding user response:

I found a solution. In Kotlin, data is not shared if viewModels() is instantiated without activityViewModels(). So I changed my code, instead of:

private val viewModel: MainViewModel by lazy {
    getViewModel {
        LightmvpViewModel()
    }
}

I wrote:

private val viewModel: MainViewModel by activityViewModels()

With that simple change, everything should work.

  • Related