在CollapsingToolbarLayout中，工具栏在折叠状态下不可见

Question

I have a ViewPager inside CollapsingToolbarLayout. When I scroll up the viewpager scrolls as normal but when it is collapsed the toolbar should be visible but it seems it stays behind the viewpager as I can see the snapping of the toolbar when I scroll up. I have gone through several discussions on stackoverflow but didn't find the solution. Please help me to identify what I'm missing here.

[ ][10][ ][10]

This is my layout xml -

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:background="@color/colorAppBg"
           android:fitsSystemWindows="true">
    <android.support.design.widget.AppBarLayout
              android:id="@+id/appBarLayout"
              android:layout_width="match_parent"
              android:layout_height="300dp"
              android:fitsSystemWindows="true"
              android:theme="@style/AppTheme">
        <android.support.design.widget.CollapsingToolbarLayout
                 android:id="@+id/toolBarLayout"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:fitsSystemWindows="true"
                 app:contentScrim="?attr/colorPrimary"
                 app:layout_scrollFlags="scroll|snap|enterAlways"
                 app:scrimAnimationDuration="200"
                 app:scrimVisibleHeightTrigger="@dimen/scrimTrigger">
            <FrameLayout
                    android:id="@+id/frame"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:elevation="@dimen/actionBarElevation"
                    android:fitsSystemWindows="true"
                    app:layout_collapseMode="parallax">
                <android.support.v4.view.ViewPager
                       android:id="@+id/locationPager"
                       android:layout_width="match_parent"
                       android:layout_height="match_parent"
                       app:layout_collapseMode="parallax"/>
                <com.viewpagerindicator.CirclePageIndicator
                       android:id="@+id/locationPagerIndicator"
                       android:layout_width="match_parent"
                       android:layout_height="wrap_content"
                       android:layout_gravity="bottom"
                       android:layout_marginBottom="8dp"
                       app:fillColor="@color/colorText"
                       app:layout_collapseMode="parallax"
                       app:pageColor="@color/colorText"
                       app:radius="3dp"
                       app:strokeWidth="0dp"/>
            </FrameLayout>
            <android.support.v7.widget.Toolbar
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin">
                <TextView
                       android:id="@+id/titleView"
                       style="@style/TextViewNormal"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:text="@string/app_name"
                       android:textColor="@color/colorPrimary"/>
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <TextView
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:lineSpacingExtra="8dp"
                 android:padding="10dp"
                 android:text="hh"
                 android:textColor="@android:color/white"
                 android:textSize="20sp"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Answer 1

Try this in your code .It worked ok in my code .

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="256dp"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <FrameLayout
            android:id="@+id/frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:elevation="@dimen/actionBarElevation"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax">
            <!-- add your code here -->
        </FrameLayout>


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <TextView
                android:id="@+id/titleView"
                style="@style/TextViewNormal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:textColor="@color/colorPrimary"/>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Answer 2

I found the problem. The problem was

android:elevation="@dimen/actionBarElevation"

in FrameLayout

<FrameLayout
     android:id="@+id/frame"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:elevation="@dimen/actionBarElevation"
     android:fitsSystemWindows="true"
     app:layout_collapseMode="parallax">

It is working as expected after removing this line of code. But I don't know what is the problem with this. However I get warning in editor saying Attribute elevation is only used in API level 21 and higher. I don't think it should create any problem as I'm running the app in device which has the api level 25. and the app's target sdk is 26 and min sdk is 16.