Using primary tabs using jetpack compose

Question

I'm just wondering if primary tabs are possible using jetpack compose?

If not, is it reasonable to inflate an xml with primary tabs?

https://m3.material.io/components/tabs/overview#42aff813-9141-464d-b00e-d4fdb585c2cb

I tried looking up resources/implementations but couldn't find any regarding primary tabs. I tried implementing it as secondary tabs which worked but they aren't meant for what I am planning to do according to Google (and also don't look modern)

Unexpressed

composables.com/components/material3/tab -- Tab() offers a slot for an icon. – Warmedover

Yes, those are secondary tabs – Unexpressed

Secondary tabs don't have icons. Where does the icon show up on a Tab()? – Warmedover

Exactly and the link you shared doesn't have icons. wdym – Unexpressed

Presumably Alex's demo did not use the icon slot parameter. Have you tried using that? – Warmedover

Answer 1

Continuing with Abhimanyu's answer, it's not possible to use the primary indicator look unless you use 1.2 alpha.

Deprecate Indicator and add Primary/SecondaryIndicator to match the M3 specs. PrimaryIndicator matches the width of the tab's content whereas SecondaryIndicator spans the full available width. SecondaryIndicator is equivalent to the now deprecated Indicator and can be a direct replacement

https://developer.android.com/jetpack/androidx/releases/compose-material3

In Gradle, you need to use:

androidx.compose.material3:material3-*:1.2.0-alpha03

Clie

Thanks, I'll check if that works for me :) – Unexpressed

Answer 2

The primary Tab in Jetpack compose for reference,

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.TabRowDefaults
import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp

@Composable
fun PrimaryTabRowDemo() {
    var periodIndex by remember {
        mutableStateOf(0)
    }
    val periodLabels = listOf(
        "Upcoming",
        "Past",
    )

    TabRow(
        selectedTabIndex = periodIndex,
        indicator = { tabPositions ->
            if (periodIndex < tabPositions.size) {
                TabRowDefaults.PrimaryIndicator(
                    modifier = Modifier
                        .tabIndicatorOffset(tabPositions[periodIndex]),
                    shape = RoundedCornerShape(
                        topStart = 3.dp,
                        topEnd = 3.dp,
                        bottomEnd = 0.dp,
                        bottomStart = 0.dp,
                    ),
                )
            }
        },
    ) {
        periodLabels.forEachIndexed { index, title ->
            Tab(
                selected = periodIndex == index,
                onClick = {
                    periodIndex = index
                },
                text = {
                    Text(
                        text = title,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                        color = MaterialTheme.colorScheme.onSurface,
                    )
                }
            )
        }
    }
}

Credendum

Thanks for your answer! It motivates me to continue :) I get the error "Unresolved reference: PrimaryIndicator". Do you have an idea if I forgot to import something? Or do you have the definition of that? – Unexpressed

@Pablo, Added import statements – Credendum

Thanks! For some odd reason I still get the same error tho. I imported everything and it just won't work. I looked up the google docs and it should be correct, but I don't know what's wrong. – Unexpressed

@Unexpressed you might have an older compose version, try updating to the latest version – Hathcock