Collapsing Toolbar and Fragment

Question

I have an app that is laid out like this, the mainactivity hosts 2 tabs with accompanied fragments, the first fragment has a recycler view that works, I'm trying to add the parallax effect as the person scrolls up or down, wasn't sure if I should add it to the fragment's xml or the mainactivity's xml, I added it to the mainactivity's xml and included the fragment as my recyclerview, needless to say that the parallax didn't work and now the app doesn't open and I get a NullPointerException now but I didn't touch the code.Please point me in the correct direction.

XML Below

frag1.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


</RelativeLayout>

MainActivity.xml

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

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

            <ImageView
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                app:layout_collapseMode="parallax"
                />



            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:background="@color/ColorPrimary"
                android:elevation="6dp"
                android:minHeight="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"/>





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

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


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">


        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/toolbar"
            android:background="?attr/colorPrimary"
            android:elevation="6dp"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="enterAlways"
            />

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




        </LinearLayout>


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

crash log excerpt

07-08 19:43:54.671    2264-2264/com.example.dimple.test E/AndroidRuntime﹕ FATAL EXCEPTION: main
Process: com.example.dimple.test, PID: 2264
java.lang.NullPointerException: Attempt to invoke virtual method 'void android.support.v7.widget.RecyclerView$LayoutManager.onMeasure(android.support.v7.widget.RecyclerView$Recycler, android.support.v7.widget.RecyclerView$State, int, int)' on a null object reference
        at android.support.v7.widget.RecyclerView.onMeasure(RecyclerView.java:1764)
        at android.view.View.measure(View.java:17430)
        at android.widget.RelativeLayout.measureChildHorizontal(RelativeLayout.java:727)
        at android.widget.RelativeLayout.onMeasure(RelativeLayout.java:463)
        at android.view.View.measure(View.java:17430)

Full log can be found here http://pastebin.com/4cPGTx2z

pls upload crash log – Muthukrishnan Suresh Jul 08 '15 at 19:38 — Muthukrishnan Suresh, Jul 08 '15 at 19:38
@MuthukrishnanSuresh updated – the_islander Jul 08 '15 at 19:50 — the_islander, Jul 08 '15 at 19:50

AndyRoid · Accepted Answer · 2015-07-08T20:04:28.840

24

You want to set something up like this:

<android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.AppBarLayout>

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

            <ImageView
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar />

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

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

    <LinearLayout
        app:layout_behavior="@string/appbar_scrolling_view_behavior" >

        <android.support.design.widget.TabLayout />
        <android.support.v4.view.ViewPager />

    </LinearLayout>

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

This will give you a parallax effect with Fragments inside the ViewPager.

Make sure you add the:

android:fitsSystemWindows="true"

Attribute to both AppBarLayout and CollapsingToolbarLayout, and this attribute to the Toolbar:

app:layout_collapseMode="pin"

If you want to add another Fragment you can add a FrameLayout like so:

<android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.AppBarLayout>
        <!-- CollapsingToolbarLayout -->
    </android.support.design.widget.AppBarLayout>

    <LinearLayout >
        <android.support.design.widget.TabLayout />
        <android.support.v4.view.ViewPager />
    </LinearLayout>

    <FrameLayout />

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

edited Jul 08 '15 at 20:04

answered Jul 08 '15 at 19:59

AndyRoid

5,062
8
38
73

I did what you mentioned, but the toolbar now covers the tabs and upon scrolling it doesn't minimize – the_islander Jul 08 '15 at 20:46
1

It is working fine for me, did you add the fitsSystemWindows property and the scroll flags on the CollapsingToolbarLayout? If so post your modified XML and I can look at it for any error. Make sure you are setting the height of the AppBarLayout to the height of the image, and setting the AppBarLayout's orientation to vertical. AppBarLayout inherits from LinearLayout. Also note that I have the TabLayout and ViewPager encased in a LinearLayout outside of AppBarLayout, and it has a layout_behavior set to "appbar_scrolling_view_behavior" – AndyRoid Jul 08 '15 at 21:01
firstly thanks for helping me, I updated to code in the original post to reflect the changes you suggested – the_islander Jul 08 '15 at 23:05
No need to add the `app:layout_behavior` tag to the ViewPager the parent layout should be the only view to receive that attribute. Also add `android:fitsSystemWindows="true"` to the `ImageView` inside `CollapsingToolbarLayout` as well. `TabLayout` should not have any scroll flags. – AndyRoid Jul 09 '15 at 12:03
It helped me as well. Awesome! Thanks! – jean d'arme Sep 11 '15 at 17:30
Hey could you check out my question please!? I have kind of the same issue, but I don't know how the OP got it to work. http://stackoverflow.com/questions/36931366/collapsing-toolbar-in-an-activity-with-viewpager – Aftab Safdar Apr 29 '16 at 06:49

Collapsing Toolbar and Fragment

1 Answers1

Linked