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.

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.

Nice, add some screenshots :).

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

Regards

Nikunj

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 :)

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!

have you seen this ?

https://marketplace.appcelerator.com/apps/1398

Javier - apologies for this.

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

Many thanks

Would a trick something similar to this work for use on TiUIWindow? I need window to have shadow and it masks off the view...

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?

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.