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);
   
       ....
   }