watchOS Button background color in SwiftUI?

Question

Created Aug ’20

Replies 3

Boosts 0

Views 4.9k

Participants 3

How can I set the background color of a Button in watchOS using SwiftUI? If I use the regular .background(Color.blue) modifier (using blue as an example), the background draws as a sharp rectangle, ignoring the cornerRadius of the button (though you can see the cornerRadius faintly in the rectangle, which is almost worse).

The cornerRadius is supposed to be 22.0 pt on Series 4 and 5 watches, but 9.0 pt on Series 3 and earlier. I'd rather not try to conditionally set the corner radius based on device (and I'm not even sure how to determine the type of device I'm running on).

Boost

Answer 1

Frameworks Engineer OP

Apple

Aug ’20

You can use BorderedButtonStyle and a tint to achieve this effect:

Code Block Button("My Button") {
    // Do something here
}.buttonStyle(BorderedButtonStyle(tint: .blue))

1

Answer 2

UberJason OP

Aug ’20

Hi Frameworks Engineer, thank you for your response! The BorderedButtonStyle does properly set the cornerRadius, but the tint color doesn't appear to set directly - since it's a tint, it seems to have a very low alpha, so the overall button is still very dark. I'm hoping to produce an effect more like the Weather app on watchOS 6 and 7, where you notice the "Add City" button is a very bright blue with alpha 1.0. Is there a way to do this?

1

Answer 3

vadimbelyaev OP

Dec ’20

I've managed to achieve this by building upon the advice to use BorderedButtonStyle, however I also call the .opacity(_:) method of the Color with the value way higher than 1.0:

Code Block swiftButton("My Button") {
    // Do something here
}
.buttonStyle(BorderedButtonStyle(tint: Color.blue.opacity(255)))

Works great for me in Xcode 12.3 with the watchOS 7.2 simulator. I didn't test it on the older versions of watchOS or on a real device.

I played with the different values of opacity and seems like the color changes when the value is in range 0...10, but anything larger than 10 always yields the same color. I used 255 because I like this number.

Unfortunately, the Color.opacity(_:) method is not documented as of December, 2020, so I have no idea whether this is an expected behavior or just a dirty hack that will break in the future releases. Would be great to have some insights on that from the SwiftUI team.

3