Hello guys. I would like to style my composables i...

# android

[Equilat]

Hello guys.
I would like to style my composables in Jetpack Compose using a similar mechanic to Swift UI’s styling like in this example.

struct DefaultButton: View {
   
   var body: some View {
     Button("Button"){}
       .buttonStyle(ButtonDefaultStyle())
   }
}

My style is in an external class.

struct ButtonDefaultStyle: ButtonStyle {
   func makeBody(configuration: Configuration) -> some View {
     configuration.label
       .frame(width: 100, height: 40)
       .foregroundColor(Color( colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)))
       .background(configuration.isPressed ? Color( colorLiteral(red: 0.1254901961, green: 0.4666666667, blue: 0.4235294118, alpha: 1)) : Color( colorLiteral(red: 0.1411764706, green: 0.6784313725, blue: 0.5529411765, alpha: 1)))
       .clipShape(RoundedRectangle(cornerRadius: 50))
       .font(Font.custom("EuclidSquare-Medium", size: 16))
   }
}

The best would be to be able to override a style by another style or by an attribute (Button().{}.style1(...).style2(...).color(...)...
Is there a way to do something similar in Compose ?
If not, did I misunderstood Compose philosophy or is it just something currently lacking ?

[Albert Chang]

You can create your own common components. For example:

@Composable
fun MyButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = RoundedCornerShape(percent = 50),
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(
        backgroundColor = myColor1,
        contentColor = myColor2
    ),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        onClick = onClick,
        modifier = modifier.size(width = 100.dp, height = 40.dp),
        enabled = enabled,
        interactionSource = interactionSource,
        elevation = elevation,
        shape = shape,
        border = border,
        colors = colors,
        contentPadding = contentPadding,
        content = content
    )
}

@Composable
fun MyApp() {
    MyButton(
        onClick = { /*TODO*/ },
        modifier = Modifier.size(200.dp, 50.dp)
    ) {
        Text(text = "MyButton")
    }
}

[Albert Chang]

Btw there is #compose.

[Joost Klitsie]

I would advice to go to the #compose channel for this question. Also, I would advice to first look into theming, see if that fits your needs and only after that ask the question 🙂 Usually a lot of things like colors, shapes and perhaps some sizes can already come from your theme. So basically you style a component by binding theme properties to certain parts of its stile, then changing the look and feel of a component is simply done by changing a theme. Custom styling should be only done if you absolutely need to customize something what wouldn't make sense to do with a theme.

[Equilat]

Thanks for your help, I reposted on the correct channel ^^

[Albert Chang]

I assume we already answered your question. Is there still anything not clear?