[TIMOB-15890] Android: Text shadow not working as expected
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | Critical |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2016-11-29T23:42:33.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | 2013 Sprint 24, 2013 Sprint 24 API, Release 6.1.0 |
| Components | Android |
| Labels | android, button, label, qe-6.0.0, qe-6.1.0, qe-testadded, shadow, triage |
| Reporter | Fokke Zandbergen |
| Assignee | Farzad Merzadyan |
| Created | 2013-12-04T08:56:47.000+0000 |
| Updated | 2016-12-02T18:47:44.000+0000 |
Description
It is great to see 3.2.0 brings text shadows for Buttons and Labels on Android. However, I does not work as I expected it to work. Only if you set the Android (and MobileWeb) specific
shadowRadius property, the shadow will show. I would assume that leaving it out would default it to 0 and result in a hard shadow, [just like in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow#Values). But instead it doesn't show at all, also when I set it to 0 myself.
Steps to reproduce
1. Create new project:ti create -p android,ios -n shadow --id test.shadow -d .
2. Add the shadow properties to label1 in the default app.js:
shadowColor: '#F00',
shadowOffset: {
x: 2,
y: 2
}
3. Run the app on both iOS and Android and notice the shadow is not there on Android.
4. Add the Android (and MobileWeb) specific shadowRadius property:
shadowRadius: 0
5. Try again and see the shadow is still not there on Android.
6. Change the radius to 0.00001 or higher:
shadowRadius: 0.000001
7. Try again and see it now finally works.
Solution is to set the default to something non-zero. Suggestions?
PR: https://github.com/appcelerator/titanium_mobile/pull/5070 For FR, run the below test case. Click the button "change the shadow of the label and button". Should see the shadow.
var win = Ti.UI.createWindow({ backgroundColor : 'white', exitOnClose : true, fullscreen : false, layout : 'vertical', title : 'Label Demo' }); var label = Ti.UI.createLabel({ color : '#900', font : { fontSize : 48 }, text : 'A simple label', textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER, top : 30, width : 500, height : 200 }); var button = Ti.UI.createButton({ color : 'blue', font : { fontSize : 48 }, width : 500, height : 200, title : 'A simple button', }); var change = Ti.UI.createButton({ top: 50, title: "change the shadow of the label and button" }); change.addEventListener("click", function(){ label.shadowColor = "#aaa"; label.shadowOffset = {x: 10, y: 10}; button.shadowColor = "#aaa"; button.shadowOffset = {x: 10, y: 10}; }); win.add(label); win.add(button); win.add(change); win.open();3.2.X PR: https://github.com/appcelerator/titanium_mobile/pull/5073
Resolving as fixed.
Text shadow is working as expected, hence closing the issue. Verified the fix on: Device : Google Nexus 4, Android Version: 4.0.4, SDK: 3.2.0.v20131210191510 CLI version : 3.2.0-cr OS : MAC OSX 10.9 Alloy: 1.3.0-cr ACS: 1.0.10 Appcelerator Studio, build: 3.2.0.201312101708 titanium-code-processor: 1.1.0-cr XCode : 5.0.2
*Reopening* This issue has resurfaced where text shadow will not work without
shadowRadiusbeing set more that zero on 6.0 devices and emulators. *Note* The issue is not present on 4.4.2 emulator. *ENV* {noformat} Mac OSX Sierra 10.12 Nexus 5X 6.0 android emulator 6.0 Ti SDK: 6.0.0.v20161017093533 Appc Studio: 4.8.0.201610171310 Appc NPM: 4.2.8-8 App CLI: 6.0.0-61 Node v4.4.7 {noformat}PR: https://github.com/appcelerator/titanium_mobile/pull/8578 Use same testing code as posted earlier.
Verified as fixed thanks [~fmerzadyan]. Tested on: {noformat} macOS Sierra 10.12.1 Nexus 5X(6.0.1) Nexus 6p (7.0) android emulator (6.0) Studio: 4.8.0.201611121409 Ti SDK: 6.1.0.v20161202081834 Appc NPM: 4.2.8 App CLI: 6.1.0-302 Node v4.4.7 {noformat} *Closing Ticket.*