滑动收起Collapsing Toolbar时，能否在Toolbar左侧添加圆形ImageView？

There are two reliable ways to implement this, depending on whether you want the ImageView to fade in gradually or appear as the toolbar collapses:

1. Dynamic visibility/alpha with scroll offset listening #

This approach lets you control exactly when the circular ImageView appears (e.g., fade in as the toolbar collapses) by listening to the AppBarLayout's scroll offset.

Step 1: Update your layout #

Add the circular ImageView inside your Toolbar (we'll hide it initially):

<androidx.coordinatorlayout.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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:theme="@style/Theme.App.AppBarOverlay">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="My Title">

            <!-- Your header content (e.g., a large banner image) -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/header_bg"
                app:layout_collapseMode="parallax"/>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/Theme.App.PopupOverlay">

                <!-- Circular ImageView - hidden by default -->
                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/toolbar_profile_img"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:src="@drawable/avatar"
                    android:visibility="gone"
                    android:layout_marginStart="16dp"/>
            </androidx.appcompat.widget.Toolbar>

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

    <!-- Scrollable content (e.g., NestedScrollView/RecyclerView) -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <!-- Your content here -->
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Step 2: Add scroll offset listener in code #

Use the AppBarLayout.OnOffsetChangedListener to control the ImageView's visibility and alpha as the toolbar collapses:

val appBarLayout = findViewById<AppBarLayout>(R.id.app_bar)
val profileImg = findViewById<CircleImageView>(R.id.toolbar_profile_img)

appBarLayout.addOnOffsetChangedListener { _, verticalOffset ->
    // Calculate how much the AppBar has collapsed (0 = fully expanded, totalScrollRange = fully collapsed)
    val collapseProgress = Math.abs(verticalOffset).toFloat() / appBarLayout.totalScrollRange.toFloat()

    // Show the ImageView once the collapse is 50% complete, with a fade-in effect
    if (collapseProgress > 0.5f) {
        profileImg.visibility = View.VISIBLE
        // Fade from 0 to 1 as collapse goes from 50% to 100%
        profileImg.alpha = (collapseProgress - 0.5f) / 0.5f
    } else {
        profileImg.visibility = View.GONE
        profileImg.alpha = 0f
    }
}

2. Pin the ImageView directly in the layout #

If you want the circular ImageView to stay fixed in place and appear as the toolbar collapses (no fade animation), you can pin it directly in the CollapsingToolbarLayout:

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:title="My Title">

    <!-- Header image -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/header_bg"
        app:layout_collapseMode="parallax"/>

    <!-- Pinned circular ImageView - sits at the left of the Toolbar -->
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/fixed_profile_img"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/avatar"
        android:layout_marginStart="16dp"
        android:layout_gravity="left|center_vertical"
        app:layout_collapseMode="pin"/>

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/Theme.App.PopupOverlay"/>

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

With this setup, the ImageView stays pinned in place and becomes visible as the CollapsingToolbarLayout collapses over the header content. No extra code is needed!

Notes: #

• For the circular ImageView, you can use libraries like CircleImageView (as shown) or create a custom circular drawable if you prefer not to use third-party dependencies.
• Adjust the layout_marginStart and size values to match your app's design system.

内容的提问来源于stack exchange，提问作者Ravi Prakash