Android: Anti-aliasing when setting View borderRadius

[m1ga]

I have searched and made sure there are no existing issues for the issue I am filing

• [X] I have searched the existing issues

Description

When setting a borderRadius on a View or Button with a backgroundColor I have some dimmed corners. Looks like there is an anti-aliasing issue.

There is a "hack" in the code:

https://github.com/appcelerator/titanium_mobile/blob/fe3deddcea07ecb3555673cf2dba8d676fd79611/android/titanium/src/java/org/appcelerator/titanium/view/TiBorderWrapperView.java#L106-L110

https://github.com/appcelerator/titanium_mobile/blob/fe3deddcea07ecb3555673cf2dba8d676fd79611/android/titanium/src/java/org/appcelerator/titanium/view/TiBorderWrapperView.java#L112-L114

but when I remove it it looks better (left side):

Not sure if it has some side-effects yet but it is something we need to look for!

Expected Behavior

Smooth corners, no dark colors

Actual behavior

Dark corner pixels

Reproducible sample

<Button title="connect"/>

"Button" : {
  borderRadius: 10,
  backgroundColor: "#399",
  height: 40
}

Steps to reproduce

create a button with the code above

Platform

Android

SDK version you are using

10.1.1.GA

[hansemannn]

This is a major parity issue happening since years. I always thought it's a general Android issue, interesting! As a workaround, users can use a CardView component.

[m1ga]

Maybe the issue was just on lower DPI screens in the past. The example from: https://jira.appcelerator.org/browse/TIMOB-16909 looks fine too without the "hack" lines.

CardView workaround is fine too. But using a plain Button with a custom borderRadius should look fine on Android too, so you don't need to differentiate for both platforms.

I'll keep an eye on it :mag:

[hansemannn]

For buttons, the new material button styles are also fine. But bad for cross platform

[m1ga]

Just compiled my app with the patch. Only saw two places where there was a difference - but it's better with the patch: (top: patched version, bottom: 10.1.1.GA)

[joecorriere]

The "patched" version does look much better. Where is the "patch" from? The JIRA ticket seems to have a closed PR.

[hansemannn]

@joecorriere It's the changes in https://github.com/appcelerator/titanium_mobile/blob/fe3deddcea07ecb3555673cf2dba8d676fd79611/android/titanium/src/java/org/appcelerator/titanium/view/TiBorderWrapperView.java#L106-L110 and https://github.com/appcelerator/titanium_mobile/blob/fe3deddcea07ecb3555673cf2dba8d676fd79611/android/titanium/src/java/org/appcelerator/titanium/view/TiBorderWrapperView.java#L112-L114

[m1ga]

@joecorriere I'll do a PR later so you can get the SDK from the artifact and test it yourself. Might add minLevel check around it if it is useful for older Android SDKs

[hansemannn]

The ticket mentioned Android 4.2.2, so it'be interesting to know if it was still an issue with Android 6/7/x (to add the guard based on where it was fixed)

[m1ga]

In my tests this issue was only with Android12+ https://github.com/appcelerator/titanium_mobile/pull/13283

[m1ga]

As the description in the original ticket says:

While the PR does not fully fix the issue for all use cases, the problem is mitigated.

the is (and was) still a small white border (e.g. in the right view) but it is not really visible on your device. So at some point we might need to make a proper fix for that. But Android 12+ has a dark corner that is very visible and the PR above removes that. Tested it with 12 and 13