How To Make Tab Indicator Behind The Tab In TabRow – Jetpack Compose Android

With the introduction of Android Jetpack Compose, UI development has become more intuitive and flexible. One common requirement in UI design is to have full control over the rendering order of components to achieve complex layouts and interactions. In this blog post, we’ll explore how to use the zIndex modifier in Jetpack Compose to place the tab indicator behind the tab, a common scenario in tabbed interfaces.

Understanding the Problem

In Jetpack compose, the tab indicator is rendered in front of the tabs by default. Thus, if you wanted to create your own custom indicator that fills the tab you will notice that the tab is covered behind it. Fixing this issue is as easy as adding just a single modifier called zIndex.

The Solution: Using zIndex

The zIndex modifier in Jetpack Compose allows us to control the rendering order of components within a layout. Components with a higher zIndex value are rendered on top of components with a lower value.

By default, every composable has 0 zIndex, thus it is enough to set it to 1.0 on the Tab for the problem to be solved.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun TabScreen() {
    val tabs = listOf("Home", "About", "Settings")
    val pagerState = rememberPagerState(initialPage = 0) {
        tabs.size
    }
    val scope = rememberCoroutineScope()
    val indicator = @Composable { tabPositions: List<TabPosition> ->
    // my custom indicator
        Box(
            Modifier
                // you need implementation("com.google.accompanist:accompanist-pager-indicators:0.32.0") in build gradle
                .pagerTabIndicatorOffset(
                    pagerState,
                    tabPositions
                )
                .fillMaxHeight()
                .clip(RoundedCornerShape(54.dp))
                .background(color = MaterialTheme.colors.primary)
        )
    }
    Column(modifier = Modifier.fillMaxWidth()) {
        TabRow(selectedTabIndex = pagerState.currentPage) {
            tabs.forEachIndexed { index, title ->
                Tab(
                    modifier = Modifier.zIndex(1f),
                    text = { Text(title) },
                    selected = pagerState.currentPage == index,
                    onClick = {
                        scope.launch {
                            pagerState.scrollToPage(index)
                        }
                    }
                )
            }
        }
        HorizontalPager(
            state = pagerState,
        ) { index ->
            when (index) {
                0 -> HomeScreen()
                1 -> AboutScreen()
                2 -> SettingsScreen()
            }
        }
    }
}

Conclusion

Finally, Using the zIndex modifier in Jetpack Compose, we can control the rendering order of components within a layout. This allows us to place the tab indicator behind the tab content, creating a visually pleasing and more natural tabbed interface. Experiment with different zIndex values to achieve the desired visual hierarchy in your UI.

Jetpack Compose continues to empower developers with its declarative and flexible approach to UI development. By understanding and using modifiers like zIndex, you can tackle complex UI challenges and create stunning user interfaces for your Android applications.

Happy coding!