CODEWITHSUNDEEP
kotlinandroid-jetpack-compose
Us3rL0sT
Us3rL0sT

Reputation: 65

How to set Background Color for Material3 TabRow in Android Compose?

I try to set the background color for the Material 3 Card in Android Jetpack Compose, using the backgroundColor parameter, "colors" also. modifier doesn't work. The color of the tab row elements is reddish, but I need white. Thanks

implementation("androidx.compose.material3:material3")

enter image description here

enter image description here

fun TabbedContent() {
    var selectedTabIndex by remember { mutableIntStateOf(0) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Bottom,
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.Black),

            ) {
            TabRow(

                selectedTabIndex = selectedTabIndex,
                modifier = Modifier.background(Color.White)
                backgroundColor = Color.White,
                colors = CardDefaults.cardColors(
                    containerColor = MaterialTheme.colorScheme.surfaceVariant,
                ),
                indicator = { tabPositions ->
                    TabRowDefaults.Indicator(
                        color = Color(3, 169, 244),
                        modifier = Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
                    )
                },

Cannot find a parameter with this name: backgroundColor && Cannot find a parameter with this name: colors.

Upvotes: 0

Views: 2473

Answers (1)

Chirag Thummar
Chirag Thummar

Reputation: 3242

You can change the TabRow background color Using containerColor attribute for Material3.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.TabRow
import androidx.compose.material3.TabRowDefaults
import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

@Composable
fun Ex18() {
    var selectedTabIndex by remember { mutableIntStateOf(0) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Bottom,
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.Black),

            ) {
            TabRow(
                selectedTabIndex = selectedTabIndex,
                modifier = Modifier.background(Color.White),
                containerColor = Color.White,
                indicator = { tabPositions ->
                    TabRowDefaults.Indicator(
                        color = Color(3, 169, 244),
                        modifier = Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
                    )
                },
                tabs = {}
            )
        }
    }
}

Upvotes: 2

Related Questions