How to add a shadow effect for UINavigation bar

Question

Hello, I want to add this kind of shadow for my NAvigationBar How can I do that.

This is how I tried to add shadow.

[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage=[UIImage new];

self.navigationController.navigationBar.translucent=YES;

self.navigationController.navigationBar.topItem.titleView.tintColor=[UIColor whiteColor];
self.navigationController.navigationBar.titleTextAttributes=[NSDictionary dictionaryWithObject:[UIFont fontWithName:@"HelveticaNeue" size:15.0f] forKey:NSFontAttributeName];
self.navigationController.navigationBar.topItem.title=strNavigtionTitle;
self.navigationController.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:NSForegroundColorAttributeName];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"backarrow"] style:UIBarButtonItemStylePlain target:self action:@selector(revealToggle :)];
[self.navigationController navigationBar].tintColor = [UIColor whiteColor];

[self.navigationController navigationBar].layer.shadowColor=[UIColor colorWithRed:53.0/255.0 green:108.0/255.0 blue:130.0/255.0 alpha:1.0f].CGColor;
[self.navigationController navigationBar].layer.shadowOffset=CGSizeMake(0, 20);
[self.navigationController navigationBar].layer.shadowOpacity=0.8;
[self.navigationController navigationBar].layer.shadowRadius=5.5;

But this only add a shadow for the arrow and my Apply Leave title. But I want to add a drop shadow like in this image.It should be between the NavigationBar and my main UIView How can I do this? Please help me. Thanks

Mcintyre

canu u show your output image – Woolworth

I will ask partner gives me a background image with shadow. – Haemocyte

background image for the navigation bar? – Mcintyre

Answer 1

I could achieve that in this way. I removed adding a shadow to the Navigation bar. Instead of that I put a same size view under the navigation bar. Set the background color of it to to the navigation bar color. Then added the shadow for that view. This worked perfectly.

-(void)setupNavigationBar
{
    [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    self.navigationController.navigationBar.shadowImage=[UIImage new];

    self.navigationController.navigationBar.translucent=YES;
    self.navigationController.navigationBar.topItem.titleView.tintColor=[UIColor whiteColor];
    self.navigationController.navigationBar.titleTextAttributes=[NSDictionary dictionaryWithObject:[UIFont fontWithName:@"HelveticaNeue" size:15.0f] forKey:NSFontAttributeName];
    self.navigationController.navigationBar.topItem.title=strNavigtionTitle;
    self.navigationController.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:NSForegroundColorAttributeName];
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"backarrow"] style:UIBarButtonItemStylePlain target:self action:@selector(revealToggle :)];
    [self.navigationController navigationBar].tintColor = [UIColor whiteColor];

    UIView *shadow=[[UIView alloc] initWithFrame:CGRectMake(0, 0, dm.screenWidth, 64)];
    [shadow setBackgroundColor:[UIColor colorWithRed:62.0/255.0 green:81.0/255.0 blue:119.0/255.0 alpha:1.0]];
    shadow.layer.shadowColor=[UIColor colorWithRed:51/255 green:76/255 blue:104/255 alpha:1.0].CGColor;
    shadow.layer.shadowOffset=CGSizeMake(0, 15);
    shadow.layer.shadowOpacity=0.12;
    shadow.layer.shadowRadius=4.5;
    [self.view addSubview:shadow];
}

Mcintyre

Answer 2

Here you'll need to import the QuartzCore framework.

self.navigationController.navigationBar.layer.borderColor = [[UIColor whiteColor] CGColor];
self.navigationController.navigationBar.layer.borderWidth = 2; //Set border you can see the shadow 
self.navigationController.navigationBar.layer.shadowColor = [[UIColor blackColor] CGColor];
self.navigationController.navigationBar.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);
self.navigationController.navigationBar.layer.shadowRadius = 3.0f;
self.navigationController.navigationBar.layer.shadowOpacity = 1.0f;
self.navigationController.navigationBar.layer.masksToBounds = NO;

Another thing You have to

set self.layer.masksToBounds = NO;

The default value for this property is YES, which means that even though the shadow is rendered, it won't be rendered outside the bounds of the view, which means effectively that you don't see it at all.

If you're animating this view in any way, you should also add this line:

self.layer.shouldRasterize = YES;

Murial

This adds the shadow just to the navigation bar title and the arrow icon,, not to the bar – Mcintyre

its adding to the whole bar below the bar its showing.Please check have u set masksTobound to NO... – Murial

Yeas I set masksTobound to NO – Mcintyre

And how should I change the appearence of the navigationbar is it correct what I have done ? – Mcintyre

self.navigationController.navigationBar.layer.borderColor = [[UIColor whiteColor] CGColor]; self.navigationController.navigationBar.layer.borderWidth=2; set border you can see the shadow – Murial

With and without borderColor and borderWidth I experienced the same result, it works and in the same way. – Phosgene

Answer 3

self.navigationController.navigationBar.layer.shadowColor = [[UIColor blackColor] CGColor];
self.navigationController.navigationBar.layer.shadowOffset = CGSizeMake(2.0f, 2.0f);
self.navigationController.navigationBar.layer.shadowRadius = 4.0f;
self.navigationController.navigationBar.layer.shadowOpacity = 1.0f;

Grantinaid

If the navigation bar is translucent this code applies the shadow to text and button icons. – Spoilage