Translucent Navigation Bar, increases layout margins

Question

I am trying to implement a translucent navigation bar in an app. The layout looks fine before:

enter image description here

The problem occurs when I add the following lines of code:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                Window w = getActivity().getWindow(); // in Activity's onCreate() for instance
                w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            }

My layout all of a sudden looks like this:

enter image description here

Note that I am using android:fitsSystemWindows="true" on the textview otherwise it slides under the action bar. Here is a portion of my layout:

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:layout_alignParentTop="true"
    android:gravity="center_vertical"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="20dp"
    android:textSize="15sp"
    android:id="@+id/missions_summary"
    android:text="@string/downloading"/>
<ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:layout_alignParentRight="true"
    android:id="@+id/loading"/>
<View style="@style/Divider_h"
    android:layout_below="@id/missions_summary"
    android:id="@+id/top_divider"
    />
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/top_divider"
    android:id="@+id/layout_power"
    android:layout_margin="5dp">
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/power_users"/>

...and so on

Does anyone know why this is occurring or how to stop it (other than not using translucent navigation bar of course)?

score 1 · Answer 1 · answered Aug 10 '14 at 18:23

1

Try the following:

Get the status bar height:

int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
statusBarHeight = getResources().getDimensionPixelSize(resourceId);

2.Set the height as padding/marging to the content view (android.R.id.content).

answered Aug 10 '14 at 18:23

Nikola Despotoski

49,966
15
119
148

Close, it led me to the right answer! Basically I had to account for the ActionBar as well and the original margin. See my answer for the full code. – easycheese Aug 10 '14 at 20:48
1

@easycheese Cool, dont forget to accept your own answer. :) – Nikola Despotoski Aug 10 '14 at 21:15
Thanks, can't for 48 hours though. And who knows, maybe someone will post a better answer. – easycheese Aug 10 '14 at 21:39

score 0 · Answer 2 · edited May 23 '17 at 12:29

Thanks to Nikola, I was put on the right track (at least programmatically, I was hoping there would be an easier way).

This SO answer helped me to get the ActionBar height.

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        Window w = getActivity().getWindow(); // in Activity's onCreate() for instance
        w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
    }
    int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
    int statusBarHeight = getResources().getDimensionPixelSize(resourceId);
    int actionBarHeight = 0;
    TypedValue tv = new TypedValue();
    if (getActivity().getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true))
    {
        actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data,getResources().getDisplayMetrics());
    }

    ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) rootView.getLayoutParams();
    params.topMargin = statusBarHeight + actionBarHeight + params.topMargin;
    rootView.requestLayout();

Translucent Navigation Bar, increases layout margins

2 Answers2