Hello, I have a strange behavior with the Material3 topAppBar. My application is a mix of Fragment/X...

# compose

[jhiertz]

Hello,
I have a strange behavior with the Material3 topAppBar.
My application is a mix of Fragment/XML and composable, currently I am trying to display my composable TopAppBar inside a ComposeView of my layout.

The first time the TopAppBar is displayed, everything works fine. When I click on it, I open a new fragment and then when I go back to the previous one, the TopAppBar display is wrong. In the layout inspector we can see that the bar has moved down.

I attach a screenshot of the problem and in the thread the snippet of the layout and composable

[jhiertz]

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        android:background="@null">

        <androidx.compose.ui.platform.ComposeView
            android:id="@+id/compose_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_indicator"
            android:layout_width="match_parent"
            android:layout_height="@dimen/default_tab_layout_height"
            android:visibility="gone"
            app:tabPaddingBottom="16dp"
            app:tabPaddingEnd="16dp"
            app:tabPaddingStart="16dp"/>

    </com.google.android.material.appbar.AppBarLayout>
    ....

And my composable

setContent {
        AppTheme {
            Surface(
                tonalElevation = 3.dp,
                shadowElevation = 0.dp,
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
                    .height(50.dp)
                    .clip(RoundedCornerShape(6.dp))
                    .pointerInput(Unit) {
                        detectTapGestures(
                            onTap = { offset ->  onClicked?.invoke(offset.x, offset.y) },
                        )
                    }
                    .pointerInput(Unit) {
                        detectTapGestures(
                            onTap = { offset -> onClicked?.invoke(offset.x, offset.y) },
                        )
                    }
            ) {
                SearchTopAppBar(
                    title = title,
                    navigationIcon = navigationIcon,
                    navigationIconClicked = navigationIconClicked,
                    actionsState = actionsState,
                )
            }
        }
    }

@Composable
fun SearchTopAppBar(
    title: String,
    actionsState: MutableState<List<HomeMenuAction>>? = null,
    navigationIcon: ImageVector? = null,
    navigationIconClicked: (() -> Unit)? = null,
) {
    Scaffold(
        topBar = { TopAppBar(
            title = {
                Text(
                    text = title,
                    style = MaterialTheme.typography.bodyLarge
                )
            },
            navigationIcon = {
                if (navigationIcon != null) {
                    IconButton(onClick = { navigationIconClicked?.invoke() }) {
                        Icon(navigationIcon, contentDescription = "menu icon")
                    }
                }
            },
            actions = {
                actionsState?.value?.forEach { menuAction ->
                    IconButton(onClick = { menuAction.onIconClicked() }) {
                        Icon(
                            painter = painterResource(id = menuAction.icon),
                            contentDescription = stringResource(id = menuAction.label)
                        )
                    }
                }
            }
        )
    }) {

    }

}

[agrosner]

Coordinator layout? You probably want the nested scroll interop connection

[agrosner]

Modifier for compose

[jhiertz]

I tried to add app:layout_behavior="@string/appbar_scrolling_view_behavior" on my ComposeView and Modifier.nestedScroll(rememberNestedScrollInteropConnection()
on my top level Surface but the behaviour remains the same