Collapsing toolbar ImageView scrolls with the WebView instead of collapsing

I'm using the collapsing toolbar layout in my activity with an ImageView and a WebView. I want the ImageView to stay the same while the WebView scrolls OVER it. But currently Both views scroll together. How do I achieve the effect I need?

Layout:

<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    android:animateLayoutChanges="true"
    android:fitsSystemWindows="true"
    app:layout_collapseMode="parallax"
    tools:context=".RecipeView">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
            app:statusBarScrim="@color/white">

            <ImageView
                android:id="@+id/recipeImage"
                android:layout_width="match_parent"
                android:layout_height="325dp"
                android:layout_marginBottom="-50dp"
                android:background="@color/greenPrimary"
                android:scaleType="centerCrop" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="32dp"
        android:contentDescription="save recipe"
        android:src="@drawable/ic_save"
        android:tint="@color/white"
        app:backgroundTint="@android:color/holo_green_dark"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|end" />

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:fillViewport="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ProgressBar
                android:id="@+id/progressBar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginVertical="16dp"/>

            <WebView
                android:id="@+id/webView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

activity code:

public class RecipeView extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recipe_view);

        ImageView imRecipeImage = findViewById(R.id.recipeImage);
        FirebaseStorage storage = FirebaseStorage.getInstance();
        StorageReference storageRef = storage.getReference();
        StorageReference pathRef = storageRef.child("images/image"+getIntent().getIntExtra("imageUrlId", 0)+".jpg");
        GlideApp.with(this)
                .load(pathRef)
                .placeholder(R.drawable.ic_placeholder)
                .into(imRecipeImage);

        String url = getIntent().getStringExtra("contentUrl");
        WebView webView = findViewById(R.id.webView);
        WebViewClient webViewClient = new MyWebViewClient();
        webView.setWebViewClient(webViewClient);
        webView.loadUrl(url);
    }

    class MyWebViewClient extends WebViewClient {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            findViewById(R.id.progressBar).setVisibility(View.GONE);
        }
    }
}

I already tried removing the following properties but no change.

android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:fillViewport="true"

Also I'm not using a toolbar because I want to hide the ImageView completely.



Read more here: https://stackoverflow.com/questions/65717544/collapsing-toolbar-imageview-scrolls-with-the-webview-instead-of-collapsing

Content Attribution

This content was originally published by Tashila Pathum at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: