Placing View Underneath Action Bar

Question

I have a custom camera activity in my Android app. For android devices using KitKat, I needed to account for the visible navigation bar at the bottom of the screen. To do this, I use the following line to ensure my views are below the navigation bar:

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN );

However, when I do this, one of my views becomes hidden behind the action bar. I'm trying to account for the height of the action bar by adding a top margin to this view, but it doesn't appear to be correct.

What am I doing wrong?

This is what I would like the view to look like (works on pre-KitKat devices):

And this is what it currently looks like on Kit Kat devices (you can see that the top of my view is cut off):

Here is my layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="left"
    android:orientation="vertical" >

    <HorizontalScrollView
        android:id="@+id/gallery_scroll_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:scaleType="fitXY" >

        <com.example.helperClass.PictureHorizontalLayout
            android:id="@+id/mygallery"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:scaleType="fitXY" >
        </com.example.helperClass.PictureHorizontalLayout>
    </HorizontalScrollView>

    <FrameLayout
        android:id="@+id/camerapreview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@color/black" />   

    <LinearLayout
        android:id="@+id/button_holder_customized_cam"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"
        android:background="#838B8B"
        android:gravity="bottom"
        android:orientation="horizontal"
        android:weightSum="0.9"
        >

        <ImageButton
            android:id="@+id/gallery_customized_camera"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginRight="1dp"
            android:layout_weight="0.3"
            android:adjustViewBounds="true"
            android:background="@null"
            android:contentDescription="@string/add"
            android:maxWidth="75dp"
            android:scaleType="center"
            android:src="@drawable/ic_action_picture" >

            <!-- android:background="@drawable/custom_button_blue" -->

        </ImageButton>

        <ImageButton
            android:id="@+id/shutter_customized_camera"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginRight="1dp"
            android:layout_weight="0.3"
            android:adjustViewBounds="true"
            android:background="@drawable/custom_button_blue"
            android:contentDescription="@string/add"
            android:maxWidth="75dp"
            android:scaleType="center"
            android:src="@drawable/ic_action_camera" >
        </ImageButton>

        <ImageButton
            android:id="@+id/video_customized_camera"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="0.3"
            android:adjustViewBounds="true"
            android:background="@null"
            android:contentDescription="@string/add"
            android:maxWidth="75dp"
            android:scaleType="center"
            android:src="@drawable/ic_action_video" >

            <!-- android:background="@drawable/custom_button_blue" -->

        </ImageButton>
    </LinearLayout>

    <TextView
        android:id="@+id/camera_timer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button_holder_customized_cam"
        android:layout_alignParentRight="true"
        android:padding="15dp"
        android:text="@string/no_time"
        android:textColor="@color/red"
        android:textSize="20sp"
        android:visibility="invisible" >
    </TextView>

</RelativeLayout>

And here is how I set margins for the HorizontalScrollView:

  myHorizontalLayout = (PictureHorizontalLayout) findViewById(R.id.mygallery);
  // apply margin to horizontal scroll view to take into account height of status bar
    TypedValue tv = new TypedValue();
    int actionBarHeight  = 0;
    if (getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true))
    {
        actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data,getResources().getDisplayMetrics());
        Log.d(TAG, "actionbarHeight before: " + actionBarHeight);
        FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) myHorizontalLayout.getLayoutParams();
        Log.d(TAG, "actionbarHeight after: " + actionBarHeight);
        params.setMargins(0, actionBarHeight, 0, 0);
        Log.d(TAG, "ADJUST MARGINS OF HORIZONTAL LAYOUT");
        myHorizontalLayout.setLayoutParams(params);
    }     

NOTE: I also tried adding android:layout_marginTop="?attr/actionBarSize" to the HorizontalScrollView in my layout file, but this didn't work either (the vertical offset was still incorrect)

Answer 1

Change your RelativeLayout to use the android:fitsSystemWindows="true" attribute.

From the View.SYSTEM_UI_FLAG_LAYOUT_STABLE docs:

When using other layout flags, we would like a stable view of the content insets given to fitSystemWindows(Rect).

Also, the attribute android:orientation isn't inherited by RealtiveLayout and android:scaleType isn't inherited by HorizontalScrollView.

Answer 2

The best way to do what you want, is to use ActionBar in Overlay Mode. Then, you can use the following margin in your view to make sure it does not hide behind the action bar.

<!-- Support library compatibility -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">
    ...
</RelativeLayout>