Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-15890] Android: Text shadow not working as expected

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2016-11-29T23:42:33.000+0000
Affected Version/sn/a
Fix Version/s2013 Sprint 24, 2013 Sprint 24 API, Release 6.1.0
ComponentsAndroid
Labelsandroid, button, label, qe-6.0.0, qe-6.1.0, qe-testadded, shadow, triage
ReporterFokke Zandbergen
AssigneeFarzad Merzadyan
Created2013-12-04T08:56:47.000+0000
Updated2016-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.

Comments

  1. Ingo Muschenetz 2013-12-04

    Solution is to set the default to something non-zero. Suggestions?
  2. Ping Wang 2013-12-05

    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. Ping Wang 2013-12-05

    3.2.X PR: https://github.com/appcelerator/titanium_mobile/pull/5073
  4. Ingo Muschenetz 2013-12-06

    Resolving as fixed.
  5. Paras Mishra 2013-12-11

    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
  6. Josh Longton 2016-10-19

    *Reopening* This issue has resurfaced where text shadow will not work without shadowRadius being 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}
  7. Farzad Merzadyan 2016-11-02

    PR: https://github.com/appcelerator/titanium_mobile/pull/8578 Use same testing code as posted earlier.
  8. Josh Longton 2016-12-02

    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.*

JSON Source