Default Style Jetpack Compose

Question

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?

Answer 1

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

Answer 2

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.