[TIMOB-25833] Android: Support percent based radius for android backgroundGradient

GitHub Issue	n/a
Type	Improvement
Priority	None
Status	Open
Resolution	Unresolved
Affected Version/s	n/a
Fix Version/s	n/a
Components	Android
Labels	n/a
Reporter	Lokesh Choudhary
Assignee	Joshua Quick
Created	2018-03-02T19:54:27.000+0000
Updated	2018-03-03T02:23:17.000+0000

Description

1. Use the code below in your app.js:

var win1 = Titanium.UI.createWindow({
    title:'Tab 1',
    backgroundColor:'#fff',
    layout: 'vertical'
});
var radialGradient = Ti.UI.createView({
    top: 10,
    width: 100,
    height: 100,
    backgroundGradient: {
        type: 'radial',
        startPoint: { x: 50, y: 50 },
        endPoint: { x: 50, y: 50 },
        colors: [ 'red', 'blue'],
        startRadius: '50%',
        endRadius: 0,
        backfillStart: true
    }
});
win1.add(radialGradient);
win1.open();

2. Build for android device. 3. After the app launches you do not see the backgroundGradient. 4. Change the startRadius to a number. 5. Rebuild the app for the device. 6. You see the backgroundGradient. We need to support percent based radius for backgroundGradient.

Comments

Joshua Quick 2018-03-02

Note that this is an undocumented feature in Titanium. Currently, startRadius and endRadius are documented to only support the Number type. http://docs.appcelerator.com/platform/latest/#!/api/Gradient-property-startRadius The docs would need to be updated to indicate support for Number/String. We also need to clearly indicate what the percentage is relative to or make it settable. _*Edit:* The sample code documented here shows that startRadius supports a percentage string. This is the only documentation discrepancy I've found._ http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.View-property-backgroundGradient On iOS, this percentage is relative to the distance from the center of the view to the corner. The way iOS is doing it (setting the radius to the view's corner) makes it impossible to draw a circle because it'll be clipped by the view's sides. https://github.com/appcelerator/titanium_mobile/blob/master/iphone/Classes/TiGradient.m#L225 There are 2 major use-cases here:
Completely fill the view with a radial gradient effect. In this case, the percent should be relative to one of the corners like iOS is doing it now. {quote}sqrt(width^2, height^2) / 2{quote}

Draw a circle/ring that fills the view with transparency outside the circle. In this case, the percent should be relative to the shortest dimension. {quote}min(width, height) / 2{quote}
We may want to make this settable so that we can satisfy both cases above.

JSON Source

[TIMOB-25833] Android: Support percent based radius for android backgroundGradient

Description

Comments

Completely fill the view with a radial gradient effect. In this case, the percent should be relative to one of the corners like iOS is doing it now. {quote}sqrt(width^2, height^2) / 2{quote}

Draw a circle/ring that fills the view with transparency outside the circle. In this case, the percent should be relative to the shortest dimension. {quote}min(width, height) / 2{quote}