title: Translucent system bars and content margin in KitKat
body: <p>I'm trying to take advantage of the new KitKat translucent system bars, to get a full screen image in the background of my app.</p>
  
  <p>I'm having problems figuring out the right settings to get the behaviour I want. Right now I have a <code>ViewPager</code> with three <code>Fragment</code>s each one composed of a <code>RelativeLayout</code> containing an <code>ImageView</code> (for the background image) and a <code>TextView</code> for the content.</p>
  
  <p>What I'm after is to have the content fit fully in the portion of the screen available for interactions, and the image to take the whole visible portion of the screen.</p>
  
  <p>If I just use <code>android:Theme.Holo.Light.NoActionBar.TranslucentDecor</code> as my theme it looks fine in portrait, but the navigation bar overlaps the content in landscape (see the screenshots below).</p>
  
  <p><img src="https://i.stack.imgur.com/HBkFs.jpg" alt="First attempt - portrait. Looks good."><img src="https://i.stack.imgur.com/DnziB.jpg" alt="First attempt - landscape. nav bar overlaps the content"></p>
  
  <p>Following <a href="http://developer.android.com/about/versions/android-4.4.html" rel="nofollow noreferrer">the recommendation in the docs</a>, I added <code>android:fitsSystemWindows = true</code> to my theme, but that generates some weird artifacts (see below)
  <img src="https://i.stack.imgur.com/3n3LM.jpg" alt="Second attempt - portrait. Artifacts!!">
  <img src="https://i.stack.imgur.com/mHTJf.jpg" alt="Second attempt - landscape. Artifacts!!"></p>
  
  <p>How can I make it behave like in the second example, but look good, without the visual artifacts?</p>