Controls behind statusbar with ViewPager & fitsSystemWindow

Question

I have a ViewPager with Fragments which contain fullscreen images and some bottom aligned controls.

I want to make sure the controls do not disappear behind the translucent navigation bar with fitsSystemWindow but I can't seem to make it work...

It does work when I use the same xml without the ViewPager so it seems the ViewPager "breaks" the ability to use fitsSystemWindow.

Code I have for the activity:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</FrameLayout>

This is what I have for the fragment:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="#000"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/initial_background_image"
        android:scaleType="centerCrop"/>

    <RelativeLayout
        android:id="@+id/buttons_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/button_icon_offset"
        android:layout_marginBottom="@dimen/button_icon_offset"
        android:layout_marginRight="@dimen/button_icon_offset"
        android:fitsSystemWindows="true"
        android:layout_gravity="bottom">

        <Button
            android:id="@+id/info_button"
            style="@style/button_icon"
            android:layout_gravity="left|bottom"
            android:background="@drawable/button_info"
            android:textAlignment="center"/>

        <Button
            android:id="@+id/share_button"
            style="@style/button_icon"
            android:layout_alignTop="@id/info_button"
            android:layout_marginRight="@dimen/button_icon_divider"
            android:layout_toLeftOf="@+id/like_button"
            android:background="@drawable/button_share"/>

        <Button
            android:id="@+id/like_button"
            style="@style/button_icon"
            android:layout_alignParentRight="true"
            android:background="@drawable/button_like"/>
    </RelativeLayout>
</FrameLayout>

So this is what I end up with... But I want the buttons to appear above the navigation bar.

score 0 · Answer 1 · edited May 23 '17 at 11:54

0

First, see this answer concerning WindowInsets. Then you'll understand, that your root layout - FrameLayout, won't ever dispatch WindowInsets to ViewPager.

Use ViewCompat.setOnApplyWindowInsetsListener() API to dispatch WindowInsets to ViewPager and make your ViewPager fit window insets, i.e. apply android:fitsSystemWindows="true" to both ViewPager and it's parent.

edited May 23 '17 at 11:54

Community

1
1

answered May 08 '17 at 12:47

azizbekian

60,783
13
169
249

Thanks for you answer, I read up on it. What I don't get is that it works if I use a similar layout in an activity, even if I wrap my buttons inside a FrameLayout multiple times. Then `fitsSystemWindows` still works inside the nested child view. – Thijs May 08 '17 at 14:32

score 0 · Answer 2 · answered May 08 '17 at 13:03

Just change/remove this in your style.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...    
    <item name="android:windowDrawsSystemBarBackgrounds">false</item>
    ...
</style>

if still not working? and you're using NestedScrollView then add "android:clipToPadding"

<android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/light_green"
            android:clipToPadding="false" <--add this
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

score -1 · Answer 3 · answered May 08 '17 at 13:13

-1

You could add margin bottom to the buttons to place them above the nav bar.

android:layout_marginBottom="?attr/actionBarSize"

answered May 08 '17 at 13:13

beeb

1,615
1
12
24

He is looking for the navigation bar size, not the action bar. You should also avoid relying on system attributes, use WindowInsets instead. – Roland Szép Aug 09 '19 at 15:03

Controls behind statusbar with ViewPager & fitsSystemWindow

3 Answers3

Linked