Jetpack Compose view not drawing when coming back to fragment

Question

Using a Compose view that inherent from AbstractComposeView inside an XML ui code of a fragment Knowing that this fragment is part of a navigation graph (Jetpack navigation) When i press the back button going back to my fragment, the compose view just disappeared. It's only drawing for the first time i open the fragment.

Bellow view code

class ProgressComposeView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AbstractComposeView(context, attrs, defStyleAttr) {

    private var steps = mutableStateOf(0)
    private var currentStep: Int = 0
    private var windowWidth: Int = 0

    @Composable
    override fun Content() {
        ProgressView(steps.value, currentStep, windowWidth)
    }

    fun setData(steps: Int, currentStep: Int, windowWidth: Int) {
        this.steps.value = steps
        this.currentStep = currentStep
        this.windowWidth = windowWidth
    }

}


@Composable
fun ProgressView(totalSteps: Int, currentStep: Int, windowWidth: Int) {

..... }

System

Could you provide the Fragment's code? Maybe you need to call the setContent in the onViewCreated method. – Lucky

have the same problem, the setContent{} code block is placed in onViewCreated method - it does not help – Peeve

@Peeve i answered this , please check my answer – System

actually using view pager(FragmentStatePagerAdapter) instead of manually adding fragments with fragmentManager solved my problem @System – Peeve

Answer 1

Solution :

You have to call .disposeComposition() on your ComposeView

In your onResume() function

Example :

 override fun onResume() {
    super.onResume()
    binding.composeHeader.disposeComposition()
}

System

You are my HERO! It takes so much time to find this solution – Cyst

Answer 2

@Oussaki's answer is correct. However, you might also try your luck with one of the ViewCompositionStrategys which take care of disposing for you.

Specifically, DisposeOnLifecycleDestroyed or DisposeOnViewTreeLifecycleDestroyed should be able to help you in your case.

Vidovic

Answer 3

Create:

val ViewCompositionStrategy.Companion.DisposeAbstractComposeViewOnAttachAndDetach get() = object :
    ViewCompositionStrategy {
    override fun installFor(view: AbstractComposeView): () -> Unit {
        val listener = object : View.OnAttachStateChangeListener {
            override fun onViewAttachedToWindow(v: View) {
                view.disposeComposition()
            }
            override fun onViewDetachedFromWindow(v: View) {
                view.disposeComposition()
            }
        }
        view.addOnAttachStateChangeListener(listener)
        return { view.removeOnAttachStateChangeListener(listener) }
    }
}

Usage:

class ProgressComposeView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AbstractComposeView(context, attrs, defStyleAttr) {

    private var steps = mutableStateOf(0)
    private var currentStep: Int = 0
    private var windowWidth: Int = 0

    @Composable
    override fun Content() {
setViewCompositionStrategy(ViewCompositionStrategy.DisposeAbstractComposeViewOnAttachAndDetach)
           ProgressView(steps.value, currentStep, windowWidth)
    }
    ...

Bedivere