[TIMOB-25461] Android - HEX backgroundColor with alpha channel act as a mask

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	In Review
Resolution	Unresolved
Affected Version/s	n/a
Fix Version/s	n/a
Components	Android
Labels	android, engSchedule, regression
Reporter	Andrea Vitale
Assignee	Joshua Quick
Created	2017-10-29T10:52:53.000+0000
Updated	2020-06-30T14:44:24.000+0000

Description

Here is my code:

".avatar-group": {
    top: 43,
    width: 100,
    height: 100
}

    ".avatar-radius": {
        width: 100,
        height: 100,
        borderRadius: 50,
        backgroundColor: "#33FFFFFF"
    }

    "#Avatar": {
        width: 90,
        height: 90,
        borderWidth: 3,
        borderColor: "white",
        borderRadius: 46.5,
        backgroundColor: Alloy.CFG.themes.colors.placeholder
    }

As you can see in attached screenshot, the View with class "avatar-radius" cut the current View and the container Window showing the previous activity. On iOS is working fine.

Attachments

File	Date	Size
Android.png	2017-10-29T21:33:54.000+0000	30889
iOS.png	2017-10-29T21:33:45.000+0000	24792
Screenshot_20171028-170024.png	2017-10-29T10:52:14.000+0000	138262
test.zip	2017-10-29T21:33:06.000+0000	9410974

Comments

Sharif AbuDarda 2017-10-29

Hello, Please share a full sample code or a sample project with only the problem section. Also, send the behavior screenshot in iOS. Thanks.
Andrea Vitale 2017-10-29

Here is the sample app: [^test.zip] that produces two different behavior on Android (wrong) and iOS (correct): !iOS.png|thumbnail! !Android.png|thumbnail!
Yordan Banev 2017-11-21

PR: https://github.com/appcelerator/titanium_mobile/pull/9588
Victor Vazquez Montero 2017-12-01

[~ybanev] would we be able to include this fix in SDk 7.0.1
Joshua Quick 2018-02-20

[~Andrea.Vitale], is your ultimate goal here is to draw circles? If so, then we're adding "radial" gradient support to Android in Titanium 7.1.0 (iOS already supports this) which can be used to draw solid circles/rings too. We're offering this to developers as an alternative to using "borderRadius" to draw circles, which has been proven to be buggy on Google's end.
Andrea Vitale 2018-02-20

Joshua, usually I use borderRadius to create a circle view. To fix this issue, at the moment, on Android I use a CardView. In this case: yes, I would like to draw circle with a semi-transparent white background under the circular avatar and a radial gradient could be a valid option.
Joshua Quick 2018-02-20

Okay. Just note that drawing a radial gradient won't clip the view's child contents from within the circle. It merely paints a circle in the view's background, but that seems like what you're really after. So, the idea is to avoid the "borderRadius" feature and use "backgroundGradient" set to "radial" instead. This way, the view remains square/rectangular and you're drawing a circle in its background instead (outer edge of circle will be transparent by default). So, I believe the following will be a close equivalent to what you're doing. I tested it on Android's upcoming radial gradient feature and the below exactly matches what I see on iOS. var window = Ti.UI.createWindow({ backgroundColor: "blue" }); window.add(Ti.UI.createView( { width: 100, height: 100, backgroundGradient: { type: "radial", startPoint: { x: 50, y: 50 }, startRadius: 0, endRadius: 50, colors: [ "#33FFFFFF", "#33FFFFFF" ], }, })); window.add(Ti.UI.createView( { width: 90, height: 90, backgroundGradient: { type: "radial", startPoint: { x: 45, y: 45 }, startRadius: 0, endRadius: 45, colors: [ "white", "white" ], }, })); window.open();

JSON Source