Default Style Jetpack Compose

Issue

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?

Solution

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.

Answered By - nglauber