CODEWITHSUNDEEP
androidnavigationandroid-jetpack-compose
Kristy Welsh
Kristy Welsh

Reputation: 8530

Can you use old nav graphs with jetpack compose

I am migrating a fragment from old Jetpack to Jetpack Compose. This fragment is part of an existing nav graph.

After migrating the fragment (using ComposeView) to Compose, the fragment directions are no longer available.

What do you do in this case? The fragment is part of a navigation graph, and several non compose fragments navigate to it.

Here is the onCreateView of the fragment:

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
) = ComposeView(requireContext()).apply {
    setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
    setContent {
        val surface = ThemeUtils.getColor(context, getBackgroundColor())
        val primaryText = ThemeUtils.getColor(context, R.attr.textColorPrimary)
        val secondaryText = ThemeUtils.getColor(context, R.attr.userEducationButtonTextColor)
        val userEducationFragmentButtonColor = ThemeUtils.getColor(context, R.attr.userEducationButtonColor)
        val colors = MaterialTheme.colors.copy(
            surface = Color(surface),
            primary = Color(ThemeUtils.getPrimaryColor(context)),
            onPrimary = Color(primaryText),
            onSecondary = Color(secondaryText),
            secondary = Color(userEducationFragmentButtonColor),
            )
        MaterialTheme(colors) {
            UserEducationScreen(
                title = viewModel.title,
                subtext = viewModel.subtext,
                backgroundIconUrl = viewModel.backgroundIconUrl,
                backgroundImage = viewModel.backgroundImage,
                imageUrl = viewModel.imageUrl,
                showIconImage = viewModel.showIcon,
                primaryButtonText = viewModel.primaryButtonText,
                primaryButtonClick = viewModel.primaryButtonClick ?: {},
                secondaryButtonText = viewModel.secondaryButtonText,
                secondaryButtonClick = viewModel.secondaryButtonClick ?: {},
                showArrow = viewModel.showArrow,
                showSecondaryButton = viewModel.showSecondaryButton,
                screenSizePercentage = getScreenPercent(),
                screenSize = api.getScreenSize(context)
            )
        }
    }
}

Upvotes: 1

Views: 670

Answers (1)

Mark Murillo
Mark Murillo

Reputation: 11

Navigation graphs done in XML only support navigating to fragments/activities/other graphs. If you want to work composables in there and still use xml nav graphs, you would still have to use a Fragment. However, the layout that the fragment uses to inflate its root can just have a ComposeView that fills the xml layout. I would imagine You could do something like this leveraging the AbstractComposeView:

Fragment's xml layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.my.app.CustomComposeView
        android:id="@+id/customView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

And then your CustomComposeView code:

class CustomComposeView @JvmOverloads constructor (
    context: Context,
    attrs: AttributeSet? = null,
    defStyle: Int = 0,
) : AbstractComposeView(context, attrs, defStyle) {
    
    @Composable
    override fun Content() {
        // Your compose code for your fragment here
    }
}

Upvotes: 1

Related Questions