title: How to get the blurred and translucent effect on a navigation bar in iOS 7?
body: <h1>Problem</h1>
  
  <p>My app appears to be laid out correctly, but I cannot achieve the blurry translucent effect that iOS 7 is famous for. Mine appears opaque.</p>
  
  <p><img src="https://i.stack.imgur.com/ZouTA.png" alt="enter image description here"></p>
  
  <h1>Desired Effect</h1>
  
  <p>I'm trying to get a more obvious blur effect such as Apple's Trailers app:</p>
  
  <p><img src="https://i.stack.imgur.com/WrHNQ.jpg" alt="enter image description here"></p>
  
  <h1>Translucency</h1>
  
  <p>In my subclass of UINavigationController, I make the navigation bar translucent:</p>
  
  <pre><code>- (id)initWithRootViewController:(UIViewController *)rootViewController
  {
      if (self = [super initWithRootViewController:rootViewController]) {
          self.navigationBar.translucent = YES;
      }
      return self;
  }
  </code></pre>
  
  <h1>Tint Color</h1>
  
  <p>In my subclass of UIApplicationDelegate, I set the tint color of the navigation bar. I discovered that the alpha of the tint color makes no difference. That is, using an alpha of 0.1 would not cause the bar to become more translucent. </p>
  
  <pre><code>- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
  {
      [[UINavigationBar appearance] setTintColor:[UIColor greenColor]];
  }
  </code></pre>
  
  <h1>Edges</h1>
  
  <p>In my content view controller, I set the edge to <code>UIRectEdgeNone</code> so the top doesn't get <a href="https://stackoverflow.com/questions/19081697/ios-7-navigation-bar-hiding-content">chopped off</a> by the navigation bar. If I were to use the default <code>UIRectEdgeAll</code>, the navigation bar would permanently cover the top of my content. Even if I were to live with this abnormality, <code>UIRectEdgeAll</code> still does not enable the translucency effect.</p>
  
  <pre><code>- (void) viewDidLoad
  {
      [super viewDidLoad];
      self.edgesForExtendedLayout = UIRectEdgeNone;
  }
  </code></pre>
  
  <h1>Edit: Experimenting with Edges</h1>
  
  <p>Ad pointed out by @rmaddy in the comments, the problem may be with the edgesForExtendedLayout. I found a <a href="https://stackoverflow.com/a/19585104/1390119">comprehensive tutorial edgesForExtendedLayout</a> and attempted to implement it:</p>
  
  <pre><code>- (void) viewDidLoad
  {
      [super viewDidLoad];
  
      self.edgesForExtendedLayout = UIRectEdgeAll;
      self.automaticallyAdjustsScrollViewInsets = YES;
      self.extendedLayoutIncludesOpaqueBars = NO;
  }
  </code></pre>
  
  <p>It did not work. Firstly, there was no translucency effect. Secondly, the top of my content was chopped off. On the following example page with the above code, the avatar was initially covered by the navigation bar and it was very hard to scroll to. You could pull down to see the top of the avatar, but when you let go, the page would automatically bounce back up and the avatar would be obscured again.</p>
  
  <p><img src="https://i.stack.imgur.com/0uV2R.png" alt="enter image description here"></p>