CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-buttonandroid-compose-buttonandroid-jetpack-compose-button
shotmeinthehead
shotmeinthehead

Reputation: 1291

background color on Button in Jetpack Compose

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().

Upvotes: 104

Views: 118064

Answers (10)

Julio Fernandez
Julio Fernandez

Reputation: 11

Button( onClick = {
                 Log.i("___TAG", "Email: $email success")
}, colors = ButtonDefaults.buttonColors(containerColor = Color.White, contentColor = Color.Black)) {
    Text("Login")
}

Upvotes: 1

Elye
Elye

Reputation: 60251

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)
) {
   /**/
}

Upvotes: 169

Siriana
Siriana

Reputation: 21

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

Upvotes: 1

Hitesh K
Hitesh K

Reputation: 51

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

Upvotes: 5

Karan M
Karan M

Reputation: 51

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.

Upvotes: 5

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364730

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)
)

Upvotes: 85

Fortran
Fortran

Reputation: 2336

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

Upvotes: 4

Oussema Aroua
Oussema Aroua

Reputation: 5339

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),

Upvotes: 22

Tristan Elliott
Tristan Elliott

Reputation: 951

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

Upvotes: 1

Bolt UIX
Bolt UIX

Reputation: 7032

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")
        }
    }

Change button color

Upvotes: 13

Related Questions