Toolbar behind ViewPager kitkat

Question

This Activity runs in fullscreen. Since elevation is missing in Kitkat, the ViewPager is going above the Toolbar.

Here is my layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/PhotoPager_Layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:theme="@style/ThemeOverlay.AppCompat"
    >
    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar"
        android:background="@color/md_dark_appbar"
        android:windowActionBarOverlay="true"
        />

    <com.horaapps.leafpic.Views.HackyViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/photos_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

This is what it looks like:

Any advice on how I can solve this problem?

Answer 1

Items in RelativeLayout are z-ordered. Defaulr oder is: earlier items behind later ones. Your toolbar is first in RelativeLayout, so it is behind any other views.

There are three solutions. You can use any of them.

1. Reorder views in RelativeLayout: move toolbat to end:

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/PhotoPager_Layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:theme="@style/ThemeOverlay.AppCompat"
   >
   
       <com.horaapps.leafpic.Views.HackyViewPager
           xmlns:android="http://schemas.android.com/apk/res/android"
           android:id="@+id/photos_pager"
           android:layout_width="match_parent"
           android:layout_height="match_parent"/>
   
       <include
           android:id="@+id/toolbar"
           layout="@layout/toolbar"
           android:background="@color/md_dark_appbar"
           />
   </RelativeLayout>   
   

2. Call toolbar.bringToFront() somewhere in onCreate() (if you you use this layout for an activity). Example:

   @Override
   protected void onCreate(Bundle savedInstanceState) {
   
       setContentView(R.layout.layout_activity);// your resource name here
   
       View toolbar = findViewById(R.id.toolbar);
       toolbar.bringToFront();
   
       ....
   }
   

3. Call ViewGroup::bringChildToFront for parent of toolbar view somewhere in onCreate. If you use this layout in activity's onCreate, then the code should be:

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       setContentView(R.layout.layout_activity);// your resource name here
       RelativeLayout root = findViewById(R.id.PhotoPager_Layout);
       View toolbar = findViewById(R.id.toolbar);
       root.bringChildToFront(toolbar);
   
       ....
   }
   

Answer 2

You better provide the code for that your HackyViewPager custom view to better understand your issue. But my guess is that in there you don't consider different OS versions counting the soft-buttons at the bottom (HOME, BACK, MENU). Starting from Lollipop, the soft buttons are part of the screen, while in earlier versions they were out of the screen. Hope this helps.

Answer 3

For me the problem was coming from ScrollView layout which was the parent of ViewPager , when I removed ScrollView, it worked. options in accepted answer didn't help me to solve it