background color on Button in Jetpack Compose

Question

Button(backgroundColor = Color.Yellow) {
    Row {
        Image(asset = image)
        Spacer(4.dp)
        Text("Button")
    }
}

I can not figure out why I can't use background color on Button.

I followed the Compose Layout codelabs.
There is a problem in backgroundColor and asset in Image().

Answer 1

Use containerColor in place of backgroundColor when using Material 3

Button(
   onClick = {},
   colors = ButtonDefaults.buttonColors(containerColor = Color.Yellow)
) {
   /**/
}

Use ButtonDefaults which is available in 1.0.0-alpha09 to alpha11

Button(
   onClick = {},
   colors = ButtonDefaults.buttonColors(backgroundColor = Color.Yellow)
) {
   /**/
}

OLD VERSION

The backgroundColor for Button no longer work in 1.0.0-alpha7

Use the below instead

Button(
   onClick = {},
   colors = ButtonConstants.defaultButtonColors(backgroundColor = Color.Yellow)
) {
   /**/
}

Answer 2

The background color is defined by the colors paramenter using the ButtonDefaults.buttonColors function.

With M2 you can specify the backgroundColor value:

Button(
     onClick = {  },
     colors = ButtonDefaults.buttonColors(
          backgroundColor = Color.White,
          contentColor = Color.Red)
)

With M3 you can specify the containerColor value:

Button(
    onClick = {  },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.White,
        contentColor = Color.Red)
)

Answer 3

You can either use a pre-created colour or create your own using the RGB value of the colour. ContentColor is the button text and containerColor is the button's background:

    Button(onClick = { },
    colors = ButtonDefaults.buttonColors
             (contentColor = Color.Black,   //pre-created colour
              containerColor = Color(255,255,157)))  // custom colour

Answer 4

STEP 1: Simple only set bg:

    Button(
        colors = buttonColors(Color.Red),
        onClick = {}
    ) {
        Text(text = "Login")
    }

Full set colors:

        Button(
            colors = ButtonDefaults.buttonColors(
                backgroundColor = Color.Red,
                contentColor = Color.Green,
                disabledBackgroundColor = Color.Yellow,
                disabledContentColor = Color.Magenta
            ),
            onClick = {}
        ) {
            Text(text = "Login")
        }

STEP 2 (optional): but this best practice

Material 2 case:

    Color.Red change MaterialTheme.colors.primary

Material 3 case:

    Color.Red change MaterialTheme.colorScheme.tertiaryContainer

Answer 5

Compose background buttons color create a variable mainButtonColor and define background Color and content Color

implementation 'androidx.compose.material3:material3:1.0.0-alpha02'

    val mainButtonColor = ButtonDefaults.buttonColors(
        containerColor = androidx.compose.ui.graphics.Color.Red,
        contentColor = MaterialTheme.colorScheme.surface
    )

    Row {
        Button(colors = mainButtonColor, onClick = {}, modifier = Modifier.padding(8.dp)) {
            Text(text = "Custom colors")
        }
    }

Answer 6

The ButtonConstants.defaultButtonColor is Deprecated at 1.0.0-alpha09 use :

 colors = ButtonDefaults.buttonColors(backgroundColor = Color.Yellow)

Update version 1.3.0 :

colors = ButtonDefaults.buttonColors(containerColor = Color.Yellow),

Answer 7

Custom Colors

• To create a custom color you need the RGB value of that color.

         Button(
            onClick = {  },
            colors = ButtonDefaults.buttonColors(
                    backgroundColor = Color(red = 255, green = 169, blue = 0)
                )
            ) {}

• backgroundColor = Color(red = 255, green = 169, blue = 0) is how we change the background color of the button to a custom color

Answer 8

The background color is defined by the colors paramenter using the ButtonDefaults.buttonColors function.

eg.

Button(
    onClick = { /* click */ },
    colors = ButtonDefaults.elevatedButtonColors(
                containerColor = Color.White,
                contentColor = Color.Red
            )
) {
    /* Your code */
}

Refer androidx.compose.material3.Button's buttonColors composable here

Answer 9

The ButtonDefaults.buttonColors function returns a ButtonColors object, not a boolean value. Therefore, you need to pass the returned ButtonColors object to the colors parameter of the Button composable.

Here is an example of how you can use ButtonDefaults.buttonColors to set the background color of a Button:

    Button(
        onClick = { /* Do something */ },
        colors = ButtonDefaults.buttonColors(backgroundColor = Color(0xFFCA1212))
    ) {
        Text("Compose")
    }

This code sets the background color of the Button to #CA1212 and displays the text Compose in the button. Note that you need to import androidx.compose.material.Button and androidx.compose.material.ButtonDefaults to use this code.