How to make transparent NestedScrollView when adding layout_behavior

Question

I want to make NestedScrollView transparent, but when I use app:layout_behavior="@string/appbar_scrolling_view_behavior" then it add white background. When I remove layout_behavior, my design is broken but it shows as transparent background and shows NestedScrollView inside top of the view.

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinatorRootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="?attr/actionBarSize"
    android:background="@android:color/transparent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/android_appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayoutAndroidExample"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@android:color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="@android:color/transparent">

            <ImageView
                android:id="@+id/parallax_header_imageview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:src="@drawable/greeting_card3"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nested_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/android_appbar_layout"
        android:layout_gravity="fill_vertical"
        android:fillViewport="true"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <GridView
            android:id="@+id/gridview_parallax_header"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:horizontalSpacing="16dp"
            android:numColumns="2"
            android:padding="16dp"
            android:scrollbars="vertical"
            android:verticalSpacing="16dp" />
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Did you figure out the solution to this problem? – Rachit Apr 26 '19 at 12:25 — Rachit, Apr 26 '19 at 12:25

score 0 · Answer 1 · answered Aug 16 '20 at 12:54

I was struggling with this same problem when I realized the problem.

If you set transparent background to NestedScrollView it will be transparent. You will see the activity/fragment background color, but you will not see your image background from AppBarLayout. And this is not a bug, the thing is your AppBarLayout is collapsing, althougth you set a parallax multiplier of 1, the view collapse and the NestedScrollView fills all the screen.

So, what can you do? It's easy! You just have to set your image outside and let the AppBarLayout as a placeholder to see the image while it's not collapsed.

This works pretty well when using app:layout_collapseParallaxMultiplier="1.0" because setting the image outside AppBarLayout implies losing the parallax effect for the image.

How to make transparent NestedScrollView when adding layout_behavior

1 Answers1