Search code examples
androidandroid-jetpack-compose

Android & Jetpack Compose - TabRow Tabs have bottom default shadow

I'm using Jetpack Compose on my Android app. On my screen (background is white) I have simple TabRow with 2 Tabs in inside. Its functionality works perfectly, I can switch between the tabs and I can change their colors.

The problem is; this TabRow has a very thin shadow on bottom edge. The current result is like:

actual result

What I want is; no shadow on bottom & add 2dp padding in selected tab. You can see the expected result below:

expected result

You can see my current code below:

    val pagerState = rememberPagerState()
    val pages = listOf("ABC", "DEF")
                        TabRow(
                            selectedTabIndex = pagerState.currentPage,
                            backgroundColor = Color(0xFFDDDDDD),
                            modifier = Modifier
                                .background(Color.White)
                                .height(32.dp)
                                .width(150.dp)
                                .clip(RoundedCornerShape(24.dp)),
                            indicator = { tabPositions ->
                                TabRowDefaults.Indicator(
                                    Modifier
                                        .pagerTabIndicatorOffset(pagerState, tabPositions)
                                        .width(0.dp)
                                        .height(0.dp)
                                )
                            }
                        ) {
                            pages.forEachIndexed { index, title ->
                                val color = remember {
                                    Animatable(Color(0xFFDDDDDD))
                                }
                                LaunchedEffect(pagerState.currentPage == index) {
                                    color.animateTo(
                                        if (pagerState.currentPage == index) {
                                            Color.Cyan
                                        } else {
                                            Color(0xFFDDDDDD)
                                        }
                                    )
                                }
                                Tab(
                                    text = {
                                        Text(
                                            text = title,
                                            style = buttonXSmallStyle.copy(
                                                color = if (pagerState.currentPage == index) {
                                                    Color.White
                                                } else {
                                                    Color.DarkGray
                                                }
                                            )
                                        )
                                    },
                                    selected = pagerState.currentPage == index,
                                    modifier = Modifier.background(
                                        color = color.value,
                                        shape = RoundedCornerShape(24.dp)
                                    ),
                                    onClick = {
                                        coroutineScope.launch {
                                            pagerState.animateScrollToPage(index)
                                        }
                                    }
                                )
                            }
                        }

TabRow and Tab uses androidx.compose.material:material:1.4.3

What am I missing ?

Solution

  • That would be the divider parameter in TabRow

     TabRow(
    ...
    divider = {}, //set it to an empty composable
    ...
 ){
    ...
 }