TRICK: Drop real shadows in Titanium (iOS)

Hi,

This is a beauty trick to drop real soft shadows in Titanium mobile for iOS. Requires a small hack in titanium sdk, but you will find that the effort really worths it.

1- Open the file TiUIView.m in your Titanium sdk installation, usually located at /Library/Application\ Support/Titanium/mobilesdk/osx/1.8.0.1/iphone/Classes/TiUIView.m

2- Add this code to the file. For convention, add it after the line #pragma mark Public APIs

3- It's done! all views in Titanium, such as Views, Buttons, and so on, has a shadow property with three properties: shadowRadius, shadowOpacity and shadowOffset. You can assign them on creation or with a setShadow() method.

Here is a sample app:


var win = Ti.UI.createWindow({backgroundColor:'#fff'});

var view = Ti.UI.createView({
    height:100,
    width:100,
    left:100,
    top:100,
    backgroundColor:"blue",
    shadow:{
        shadowRadius:10,
        shadowOpacity:0.5,
        shadowOffset:{x:5, y:10}
    }
})

var btn = Ti.UI.createButton({
    title:'I\m a button',
    height:60,
    width:100,
    left:100,
    top:300
});

btn.setShadow({
    shadowRadius:10,
    shadowOpacity:0.5,
    shadowOffset:{x:5, y:10}
});
win.add(view);

win.add(btn);

This includes a really cool effect: if the view has a solid background, it drops the shadow. But if the view has a transparent background and it contains other controls, then the controls drops the shadows. Really nice when building forms.

Note that this method is experimental and I don't have tested yet in deep. Use it under your own responsability.

13 Answers

IMHO this should be in the core, to do that you must file a jira ticket, add documentation in the SDK for it, and write a test case. You also need to sign the CLI found here. Then just submit a pull request.
— answered January 17th 2012 by Matt Apperson
permalink

5 Comments
- thanks, Matt, I`ll start the proccess
  
  — commented January 17th 2012 by Javier Rayon
- Sweet! Great to hear!
  
  — commented January 17th 2012 by Matt Apperson
- This module is fantastic!
  
  Is there a shadowColor property? Or does it have to be black?
  
  — commented February 21st 2012 by Clifton Labrum
- shadowColor is in the "to do" list, I'll implement as soon as I can
  
  — commented February 22nd 2012 by Javier Rayon
- I implemented the shadowColor :)
  Here is the module's fork:
  
  https://github.com/rborn/TiViewShadow
  
  — commented February 23rd 2012 by Dan Tamas
8 Votes
Is there a version of this module for Titanium 3.0 ?
— answered January 22nd 2013 by Thierry RUIZ
permalink

7 Comments
- The version 0.4 of ti.viewshadow (https://github.com/omorandi/TiViewShadow) works with SDK3.0.0.
  
  You can get it here:
  
  ti.viewshadow-iphone-0.4.zip
  
  — commented January 22nd 2013 by Florian Walter
- Does is work in .tss file ? like this:
```
"#vwActivity":{
    borderRadius:'8px',
    width:Titanium.UI.FILL,
    height:'90%',
    left:10,
    right:10,
    backgroundColor:'#000000',
    backgroundRepeat:true,
    shadow:{
        shadowRadius:3,
        shadowOpacity:1,
        shadowOffset:{x:5, y:5},
        shadowColor:"#000000"
    }
}
```
  — commented January 22nd 2013 by Thierry RUIZ
- I've tried in in the TSS and in the VIEW.XML…. Failed
  
  The module is correctly load. I didn't forget the require() instruction (i putted it at the top of Alloy.js and View.js)… Failed again…
  
  any idea ?
  
  — commented January 22nd 2013 by Thierry RUIZ
- The shadow must be added after the postlayout event. So, in Alloy you have to do this in your controller .js file:
```
function addShadow(){
    $.vwActivity.removeEventListener('postlayout', addShadow);
    $.vwActivity.setShadow({
            shadowRadius:3,
            shadowOpacity:1,
            shadowOffset:{x:5, y:5},
            shadowColor:"#000000"
    });
}

$.vwActivity.on('postlayout', addShadow);
```
  — commented January 22nd 2013 by Javier Rayon
- I'm able to get this to work on buttons and other UI elements within windows. But it doesn't put a dropshadow on windows. Is there a way to implement this?
  
  — commented March 1st 2013 by Jamal Neufeld
- Can someone tell me how to do this from scratch in Titanium 3.1.2. I just can't get this to work, too confusing.
  
  Thanks,
  
  — commented August 30th 2013 by martin kami
- Tested with iOS ViewShadow 0.4 and Ti 3.1.3GA
  
  assuming you have a basic view eg:
```
...
  <View id="box">
    <Label>Box Shadow</Label>
  </View>
...
```
  This will do the trick
```
require('ti.viewshadow');
function addShadow() {
  $.box.removeEventListener('postlayout', addShadow);
  $.box.setShadow({
    shadowRadius : 3,
    shadowOpacity : .7,
    shadowOffset : {
      x : 2,
      y : 2
    },
    shadowColor : "#000000"
  });
}
$.box.addEventListener('postlayout', addShadow);
```
  — commented December 7th 2013 by Jerod Fritz
2 Votes
This is awesome! Thanks so much for this discover - saving my app tons of space from not including images…

One Question… I have noticed on views with rounded corners it sometimes un-rounds them while still rounding the border… Ideas on a solution?

Thanks again!
— answered January 18th 2012 by Matthew Hewes
permalink

4 Comments
- I haven't notice that, can you send a sample code? Some components, such as buttons, must have a transparent background color (default).
  
  — commented January 18th 2012 by Javier Rayon
- ```
var headerTable = Ti.UI.createTableView({
    top: '15dp',
    left: '10dp',
    right: '10dp',
    backgroundColor: '#ffffff',
    borderColor: '#bfbfbf',
    borderRadius: 8,
    height: '280dp',
    shadow: {
        shadowRadius:4,
        shadowOpacity:0.2,
        shadowOffset:{x:0, y:0}
    }
});

view.add(headerTable);
```
  Above is the code that breaks the borderRadius property… Any ideas? Thanks!
  
  — commented February 15th 2012 by Matthew Hewes
- Yes, some components have a strange behavior with shadows (i.e. buttons with backgroundImage set to transparent and round border).
  
  Anyway, what I do is to put all the stuff inside a transparent window and add the shadow to that window. All its contents will drop shadows correctly, even if they have round corners. I didn't tried with tableviews, but should be the same.
  
  — commented February 22nd 2012 by Javier Rayon
- where I said "windows" I mean "views"…
  
  — commented February 22nd 2012 by Javier Rayon
1 Vote
Why is this feature not included in the official SDK? I guess it is just a copy & paste to do this.
— answered February 13th 2013 by Hans Knoechel
permalink

1 Comment
- Agreed. Having come back to Titanium for a project (having not used it for about 6 months) its pretty obvious that its been left to die. There are so many great contributions, not a single one has been added. There are also so many massive bugs, that are blatantly obvious, and most of which are a quick fix - they havent been fixed either.
  
  God knows what the appcelerator developers actually do all day, because its certainly not bug fixing! No offense to the team, its just well…nothing has been done to fix issues that have existed with Titanium since day 1.
  
  — commented April 23rd 2013 by Delete Me
1 Vote
Nice, add some screenshots :).

— answered January 17th 2012 by Dan Tamas
permalink

0 Comments

0 Votes
Cool loved the trick now atleast i can give the shadow look to the popup windows….

Regards

Nikunj

— answered January 17th 2012 by Nikunj Sakhrelia
permalink

0 Comments

0 Votes
Cool, thank you!
It would be better if this get's added as a module, so we don't have to hack the Titanium core classes

Or maybe you can do a fork on github and add a pull request. Maybe this feature gets added to the next version :)
— answered January 17th 2012 by Marcel Pociot
permalink

1 Comment
- thanks, Marcel. I agree, in fact this was the previous step for that. I would like to hear from appcelerator pros and cons for each option (i.e., possibilities to be merged with main branch) and code fixes. In the meanwhile, all we can debug the code.
  
  — commented January 17th 2012 by Javier Rayon
0 Votes
have you seen this ?

https://marketplace.appcelerator.com/apps/1398
— answered January 18th 2012 by Dan Tamas
permalink

6 Comments
- first time I heard about, is it new? suspiciously… new?
  
  — commented January 18th 2012 by Javier Rayon
- It is new. I thought it was yours????
  
  — commented January 18th 2012 by Arian Caraballo
- Oh man, this is offensing. He has not even bothered to change the example :(
  
  — commented January 18th 2012 by Javier Rayon
- @Javier Let's see how fast the guys that put your module in Marketplace will update with the shadowColor add-on :)
  
  — commented February 23rd 2012 by Dan Tamas
- LOL, In fact, I think they have already done. So, you are right, they did it very fast! :D
  
  — commented February 23rd 2012 by Javier Rayon
- This plugin above didn't work for me and they don't even have a proper documentation. Stay away from it.
  
  I'll follow up if I hear from them.
  
  — commented January 4th 2013 by Elie Khoury
0 Votes
Javier - apologies for this.

Please give us time to investigate. I will report back to you with our actions.

Many thanks

— answered January 18th 2012 by Paul Dowsett
permalink

0 Comments

0 Votes
Would a trick something similar to this work for use on TiUIWindow? I need window to have shadow and it masks off the view…
— answered February 3rd 2012 by Matthew Hewes
permalink

1 Comment
- Just answered my own question - it Worked! I added the code to TiUIWindow.m right before '-(UIView *)gradientWrapperView' and it works perfectly!
  
  — commented February 3rd 2012 by Matthew Hewes
0 Votes
Has anyone had any memory issues while using shadows? The odd thing for me is that memory usage (according to Ti.Platform.availableMemory) is only slightly higher but the app is crawling when shadows are used - speedy without.

Any ideas?
— answered March 20th 2012 by Matthew Hewes
permalink

1 Comment
- Try to use V0.2 of TiShadowView. should work just fine as we added some performance tweaks.
  
  — commented March 20th 2012 by Dan Tamas
0 Votes
This trick cause a resolution problem on the new iPad retina.

View and it's inside content are pixelated if the shadow property is applied.
— answered April 3rd 2012 by Stefano Di Luca
permalink

1 Comment
- Same issue for me on iphone 4S :(
  
  — commented April 18th 2012 by Yvic Pineau
0 Votes
Are shadows on a view still not part of the core? :(

— answered November 23rd 2012 by Luke Peek
permalink

0 Comments

0 Votes

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

TRICK: Drop real shadows in Titanium (iOS)

13 Answers