android-jetpack-composeandroid-tabsjetpack-compose-accompanist

Jetpack Compose TabRow flickers when content is accompanist webview


I am experiencing flicker or overlapping when having a compose tabBar implementation with webviews as content. If I change the webviews with another view (ex. Box{Text}) it does not happen.

It seems as if the webview is filling more than it's border for a short while (See .gif below)

enter image description here

Update: I have been looking into if it was a recomposition issue (hence the simple test project) and I cannot identify any reason why it should recompose the tab bar. When I add height to the tab bar, I can see the text is in the tab bar at all times.

A test project can be fetched here: https://github.com/msuhl/ComposeTabTest and is a very standard implementation

@Composable
private fun MyTabRow(
    pagerState: PagerState,
    coroutineScope: CoroutineScope,
) {
    TabRow(
        selectedTabIndex = pagerState.currentPage,
        indicator = { tabPositions ->
            TabRowDefaults.Indicator(
                Modifier.pagerTabIndicatorOffset(pagerState, tabPositions),
                color = MaterialTheme.colors.secondary
            )
        },
        ) {
        tabRowItems.forEachIndexed { index, item ->
            Tab(
                selected = pagerState.currentPage == index,
                onClick = { coroutineScope.launch { pagerState.animateScrollToPage(index) } },
                icon = {
                    Icon(imageVector = item.icon, contentDescription = "")
                },
                text = {
                    Text(
                        text = item.title,
                        maxLines = 2,
                        overflow = TextOverflow.Ellipsis,
                    )
                },
                )
        }
    }
    HorizontalPager(
        count = tabRowItems.size,
        state = pagerState,
    ) {
        ShowWebView("http://google.com")

    }
}

Solution

  • It was related to the lazy loading of webview and I was not able to make a direct fix. Instead I ended up with a working, although kind og hackish, solution

    If a LazyColumn is introduced around the webview, the issue does not occur.

    In code:

        HorizontalPager(
            count = tabRowItems.size,
            state = pagerState,
        ) {
             LazyColumn {
                 item {
                      ShowWebView(url)
                 }
             }
        }