Jetpack Compose TabRow flickers when content is accompanist webview

Question

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)

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")

    }
}

score 3 · Answer 1 · answered Apr 19 '23 at 13:30

I am late to the party, but since it might help others coming from google: Another workaround might be to use Modifier.clip(RectangleShape) on the WebView.

I had a similar situation where my root LazyColumn (containing several items including the WebView) would initially display the WebView to be way bigger (even when using .height(X.dp)), pushing down other items. When the content finished loading, everything would jump up again (also causing the same flickering).

Apart from your workaround (using another LazyColumn inside my already existing LazyColumn), I was able to solve it by using modifier = Modifier.height(X.dp).clip(RectangleShape) on the WebView

Anyway thanks for this question. It helped me pinpoint the cause for my issue :)

score 1 · Accepted Answer · answered Feb 10 '23 at 08:11

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)
             }
         }
    }

Jetpack Compose TabRow flickers when content is accompanist webview

2 Answers2