TRICK: Drop real shadows in Titanium (iOS)

You must Login before you can answer or comment on any questions.

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.

— asked 3 years ago by Javier Rayon
6 Comments
  • screenshot from the sample

    — commented 3 years ago by Javier Rayon

  • Here you will find the module version incredible-fast-coded by @olivier_morandi

    — commented 3 years ago by Javier Rayon

  • When applying the shadow, it kills the border radius. How could I fix this?

    Thanks!

    — commented 3 years ago by Gorka MagaƱa

  • Show 3 more comments

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 3 years ago by Matt Apperson
answer permalink
5 Comments
  • thanks, Matt, I`ll start the proccess

    — commented 3 years ago by Javier Rayon

  • Sweet! Great to hear!

    — commented 3 years ago by Matt Apperson

  • This module is fantastic!

    Is there a shadowColor property? Or does it have to be black?

    — commented 3 years ago by Clifton Labrum

  • Show 2 more comments

Is there a version of this module for Titanium 3.0 ?

— answered 2 years ago by Thierry RUIZ
answer 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 2 years ago 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 2 years ago 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 2 years ago by Thierry RUIZ

  • Show 4 more comments

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 3 years ago by Matthew Hewes
answer 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 3 years ago 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 3 years ago 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 3 years ago by Javier Rayon

  • Show 1 more comment

Why is this feature not included in the official SDK? I guess it is just a copy & paste to do this.

— answered 2 years ago by Hans Knoechel
answer 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 2 years ago by Delete Me

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

— answered 3 years ago by Marcel Pociot
answer 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 3 years ago by Javier Rayon

have you seen this ?

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

— answered 3 years ago by Dan Tamas
answer permalink
6 Comments
  • first time I heard about, is it new? suspiciously... new?

    — commented 3 years ago by Javier Rayon

  • It is new. I thought it was yours????

    — commented 3 years ago by Arian Caraballo

  • Oh man, this is offensing. He has not even bothered to change the example :(

    — commented 3 years ago by Javier Rayon

  • Show 3 more comments

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

— answered 3 years ago by Matthew Hewes
answer 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 3 years ago by Matthew Hewes

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 3 years ago by Matthew Hewes
answer permalink
1 Comment
  • Try to use V0.2 of TiShadowView. should work just fine as we added some performance tweaks.

    — commented 3 years ago by Dan Tamas

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.

Are shadows on a view still not part of the core? :(

Your Answer

Think you can help? Login to answer this question!