CODEWITHSUNDEEP
androidandroid-buttonandroid-jetpack-compose
Renattele Renattele
Renattele Renattele

Reputation: 2286

Default Style Jetpack Compose

Does somebody know how to change default style to button? Style in xml:

<item name="materialButtonStyle">@style/ButtonStyle</item>

And I want to convert it to Jetpack Compose.

In default compose sample(Android Studio Canary) You can see ui.theme folder and it's a analog of values folder but without Strings and Dimens. So how I can add Strings and Dimens to this compose folder?

Upvotes: 5

Views: 7038

Answers (2)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364411

As described in the nglauber answer you can customize the shape, typography and color in your theme, or in the Button parameters.

Also you can override these values and build a default button style.
Something like:

@Composable
fun DefaultButtonStyle(content: @Composable () -> Unit) {
    MaterialTheme(
        //override the shape
        shapes = MaterialTheme.shapes.copy(small = CutCornerShape(12.dp)),
        //Override the typography.button using the merge method
        typography = MaterialTheme.typography.copy(
            button = MaterialTheme.typography.button.merge(TextStyle(fontSize = 20.sp))),
        //override the colors define in the material theme
        colors = MaterialTheme.colors.copy(
            primary = Color.Yellow,
            onPrimary = Color.Blue)
    ) {
        content()
    }
}

Then just use it with:

DefaultButtonStyle() {
    Button(onClick = { /*....*/ }) {
        Text(text = "BUTTON")
    }
}

Upvotes: 4

nglauber
nglauber

Reputation: 23964

If you look into the Button source, you'll notice that it uses a couple of default values that you can customize (via params or via custom style).

  • shape: Uses MaterialTheme.shapes.small (you can customized this field in your style);
val shapes = Shapes(
    small = CutCornerShape(4.dp), // << here
    medium = RoundedCornerShape(4.dp),
    large = RoundedCornerShape(0.dp)
)

  • colors: which is an instance of ButtonColors that provides backgroundColor, contentColor, disabledBackgroundColor and disabledContentColor. Look into the Button.buttonColors function to see how to customize the colors for your button.

  • In terms of text, the Button component gets the text style from MaterialTheme.typography.button, so you can override this field in your style to customize your button's text.

val typography = Typography(
    ...
    button = defaultTypography.button.copy(
        fontFamily = yourFontFamily, 
        color = Color.Yellow
    )
)

For text and dimensions you can continue using XML files (res/values) and refer to them using stringResource(id) and dimensionResource(id) functions respectively.

Upvotes: 1

Related Questions