Darshan Miskin Darshan Miskin - 2 months ago 29
Android Question

Toolbar not displaying from inside collapsing toolbar

Here is the code.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main"
android:layout_height="match_parent"
android:layout_width="match_parent">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="100dp">

<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">

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

<android.support.design.widget.TabLayout
android:id="@+id/main_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_collapseMode="none"/>


</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<!--<android.support.v4.widget.NestedScrollView-->
<!--android:id="@+id/nestedscroll"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent"-->
<!--android:fillViewport="true"-->
<!--android:scrollbars="horizontal"-->
<!--app:layout_behavior="@string/appbar_scrolling_view_behavior">-->

<android.support.v4.view.ViewPager
android:id="@+id/main_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

<!--</android.support.v4.widget.NestedScrollView>-->

<android.support.design.widget.FloatingActionButton
android:id="@+id/main_fab"
android:layout_margin="16dp"
android:src="@android:drawable/ic_media_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/main_viewpager"
app:layout_anchorGravity="bottom|end"/>

</android.support.design.widget.CoordinatorLayout>


The problem:

1) Toolbar is not visible.

2) Collapsing toolbar doesn't collapse at all. [Solved]

3) Viewpager and FAB also not visible if put inside nestedScrollView. [Solved]

Extra detail:

Layout for fragments of Viewpager have Linearlayout as root and inside that have a recyclerview.

Everything seems to be alright as per the code. Unable to understand what is missing. A good explanation of how coordinator layout and collapsing toolbar work together would also indeed help.

Answer

1) Toolbar is not visible.

First of all you need define what Toolbar do you want to use in your activity class:

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);

Change existing xml code:

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:title="@string/app_name"
            app:layout_collapseMode="parallax">
        </android.support.v7.widget.Toolbar>

to:

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"  //set initial height
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" //this might be also useful
            app:title="@string/app_name"
            app:layout_collapseMode="parallax" />

2) Collapsing toolbar doesn't collapse at all.

Did your activity using correct theme. Set to your AppBarLayout:

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

as in this example: include_list_viewpager.xml

3) Viewpager and FAB also not visible if put inside nestedScrollView.

There's no reason to do that. Adding these lines:

android:layout_marginTop="?attr/actionBarSize" 
app:layout_behavior="@string/appbar_scrolling_view_behavior" 

to ViewPager should be enough.

Both of them should be direct children of CoordinatorLayout.

Follow this example: http://blog.nkdroidsolutions.com/collapsing-toolbar-with-tabs-android-example/

If you're new to Material Design or feel a bit lost with some its behaviours, I highly recommend to check Chris Banes Material Design project cheesequare: https://github.com/chrisbanes/cheesesquare/

Hope it will help