@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SimpleTabSwitcher(
    tabs: List<SimpleTab>,
    selectedTab: SimpleTab,
    onTabSelected: (SimpleTab) -> Unit
) {
    Box(
        modifier = Modifier
            .clip(shape = RoundedCornerShape(16.dp))
            .background(color = MaterialTheme.colors.onSurface.copy(alpha = 0.05f))
            .fillMaxWidth()
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {

            tabs.forEach { tab ->
                SimpleTabBox(
                    text = tab.name.lowercase().replaceFirstChar { it.uppercase() },
                    selected = tab == selectedTab,
                    modifier = Modifier
                        .weight(1f)
                        .onClick {
                            onTabSelected(tab)
                        }
                )
            }
        }
    }
}

@Composable
internal fun SimpleTabBox(
      text: String, 
      selected: Boolean, 
      modifier: Modifier
) {
    val backColor: Color = if (selected)
        MaterialTheme.colors.accent.copy(alpha = 0.5f)
    else
        Color.Transparent

    val textColor: Color = MaterialTheme.colors.onSurface.copy(alpha = if (selected) 0.8f else 0.5f)

    Box(
        modifier = modifier
            .clip(shape = RoundedCornerShape(16.dp))
            .background(color = backColor)
            .padding(8.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = text,
            style = MaterialTheme.typography.caption,
            color = textColor
        )
    }
}

enum class SimpleTab {
    ALL,
    LOG
}

How to integrate into Compose code:

 val selectedTab = remember { mutableStateOf(SimpleTab.ALL) }

SimpleTabSwitcher(
     tabs = listOf(SimpleTab.ALL, SimpleTab.LOG),
      selectedTab = selectedTab.value,
      onTabSelected = { tab -> 
            selectedTab.value = tab
       }
)

Listen for the selected tab state:

when (selectedTab.value) {
   //show Composable component for each tab
   SimpleTab.ALL -> FirstComposableComponentHere()
   SimpleTab.LOG -> SecondComposableComponentHere()
}

Video how it works:

https://youtu.be/4_KngS_eg_k

📧 Subscribe to get more posts like this

Reach out to me:

Instagram - Behind the scenes of building apps
Twitter - about Compose UI
GitHub and more links

0 comments

Kotlin | Ktor | Websocket Client | Source code

Kotlin | Compose UI | Candlestick Chart | Source code

See all posts from Dmitri | Android Developer ⚡️