Note that there are some explanatory texts on larger screens.

plurals
  1. POTranslucent system bars and content margin in KitKat
    text
    copied!<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>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload