Translucent system bars and content margin in KitKat

android android-layout user-interface android-4.4-kitkat
Krzysztof Kozmic picture Krzysztof Kozmic · Dec 26, 2013 · Viewed 20.2k times · Source

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.

I'm having problems figuring out the right settings to get the behaviour I want. Right now I have a ViewPager with three Fragments each one composed of a RelativeLayout containing an ImageView (for the background image) and a TextView for the content.

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.

If I just use android:Theme.Holo.Light.NoActionBar.TranslucentDecor as my theme it looks fine in portrait, but the navigation bar overlaps the content in landscape (see the screenshots below).

First attempt - portrait. Looks good.First attempt - landscape. nav bar overlaps the content

Following the recommendation in the docs, I added android:fitsSystemWindows = true to my theme, but that generates some weird artifacts (see below) Second attempt - portrait. Artifacts!! Second attempt - landscape. Artifacts!!

How can I make it behave like in the second example, but look good, without the visual artifacts?

Answer

Tanner Perrien picture Tanner Perrien · Dec 27, 2013

My solution was to disable translucent navigation in landscape mode. You still get a translucent status bar, but it fixes the issue where the nav bar is opaque and overlaps in landscape.

res/values-v19/styles.xml (these values are in my theme)

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">@bool/translucentNavBar</item>

res/values-v19/bools.xml (enable translucent nav)

<bool name="translucentNavBar">true</bool>

res/values-land-v19/bools.xml (disable translucent nav in landscape)

<bool name="translucentNavBar">false</bool>

res/values-sw600dp-land-v19/bools.xml (enable translucent nav for tablets in landscape)

<bool name="translucentNavBar">true</bool>

Related questions

What is the difference between "px", "dip", "dp" and "sp"?

What is the difference between Android units of measure? px dip dp sp

Read More
How do I align views at the bottom of the screen?

Here's my layout code; <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:text="@string/…

Read More
Move layouts up when soft keyboard is shown?

I have a few elements in a RelativeView with the align bottom attribute set, when the soft keyboard comes up the elements are hidden by the soft keyboard. I would like them to move up so that if there is …

Read More