[SearchBar] Add a lift on scroll color to SearchBar when used with AppBarLayout

imhappi · dsn5ft · commit 36b285c9e3cf · 2025-03-26T16:20:02.000Z
PiperOrigin-RevId: 740478154
diff --git a/docs/components/Search.md b/docs/components/Search.md
@@ -107,6 +107,8 @@ Element                      | Attribute                   | Related method(s)
 **Search hint**              | `android:hint`              | `setHint`<br/>`getHint`                     | `null`
 **Search text centered**     | `app:textCentered`          | `setTextCentered`<br/>`getTextCentered`     | `false`
 **Color**                    | `app:backgroundTint`        | --                                          | `?attr/colorSurfaceContainerHigh`
+**Lift On Scroll**           | `app:liftOnScroll`          | --                                          | `false`
+**Lift On Scroll Color**     | `app:liftOnScrollColor`     | --                                          | `?attr/colorSurfaceContainerHighest`
 **Flag for default margins** | `app:defaultMarginsEnabled` | --                                          | `true`
 **Flag for navigation icon** | `app:hideNavigationIcon`    | --                                          | `false`
 
@@ -126,7 +128,8 @@ Search view toolbar height theme attribute:
 
 ### Scrolling Behavior
 
-The `SearchBar` can either be used as a fixed or scroll-away search field.
+The `SearchBar` can either be used as a fixed, scroll-away, or lift on scroll
+search field.
 
 #### Fixed Mode
 
@@ -153,6 +156,20 @@ Additionally, if your app is going edge-to-edge, consider adding
 `app:statusBarForeground="?attr/colorSurface"` to your `AppBarLayout` in order
 to avoid overlap between the `SearchBar` and status bar content on scroll.
 
+#### Lift On Scroll Mode
+
+To set up the lift on scroll mode, use a top-level `CoordinatorLayout` and place
+the `SearchBar` within an `AppBarLayout`. Then, place the `AppBarLayout` below
+the scrolling view (usually a `RecyclerView` or `NestedScrollView`) in the
+`CoordinatorLayout`, and set
+`app:layout_behavior="@string/appbar_scrolling_view_behavior"` on the scrolling
+view. On the `SearchBar`, set `app:liftOnScroll=true` and set a
+`app:liftOnScrollColor` to change the color of the `SearchBar` as the
+`AppBarLayout` is lifting.
+
+See the [Putting it all together](#putting-it-all-together) section below for an
+example of how to set up this behavior.
+
 ### Toolbar Transitions
 
 The `SearchBar` component also provides transitions to and from a `Toolbar`,
@@ -397,6 +414,45 @@ as well as the expand and collapse animations. If you can't use a
 `CoordinatorLayout`, instead you can call the `SearchView#setUpWithSearchBar`
 method to achieve the same result.
 
+Alternatively, an example of the lift on scroll mode is below:
+
+```xml
+<androidx.coordinatorlayout.widget.CoordinatorLayout
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+  <!-- NestedScrollingChild goes here (NestedScrollView, RecyclerView, etc.). -->
+  <androidx.core.widget.NestedScrollView
+      android:layout_width="match_parent"
+      android:layout_height="match_parent"
+      app:layout_behavior="@string/appbar_scrolling_view_behavior">
+    <!-- Screen content goes here. -->
+  </androidx.core.widget.NestedScrollView>
+
+  <com.google.android.material.appbar.AppBarLayout
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content">
+    <com.google.android.material.search.SearchBar
+        android:id="@+id/search_bar"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:hint="@string/searchbar_hint"
+        app:liftOnScroll="true"
+        app:liftOnScrollColor="?attr/colorSurfaceContainerHighest"/>
+  </com.google.android.material.appbar.AppBarLayout>
+
+  <com.google.android.material.search.SearchView
+      android:layout_width="match_parent"
+      android:layout_height="match_parent"
+      android:hint="@string/searchbar_hint"
+      app:layout_anchor="@id/search_bar">
+
+    <!-- Search suggestions/results go here (ScrollView, RecyclerView, etc.). -->
+
+  </com.google.android.material.search.SearchView>
+</androidx.coordinatorlayout.widget.CoordinatorLayout>
+```
+
 ## Predictive Back
 
 The `SearchView` component automatically supports
diff --git a/lib/java/com/google/android/material/appbar/AppBarLayout.java b/lib/java/com/google/android/material/appbar/AppBarLayout.java
@@ -52,6 +52,7 @@
 import androidx.annotation.ColorInt;
 import androidx.annotation.Dimension;
 import androidx.annotation.DrawableRes;
+import androidx.annotation.FloatRange;
 import androidx.annotation.IdRes;
 import androidx.annotation.IntDef;
 import androidx.annotation.NonNull;
@@ -77,10 +78,12 @@
 import com.google.android.material.resources.MaterialResources;
 import com.google.android.material.shape.MaterialShapeDrawable;
 import com.google.android.material.shape.MaterialShapeUtils;
+import com.google.errorprone.annotations.CanIgnoreReturnValue;
 import java.lang.annotation.Retention;
 import java.lang.annotation.RetentionPolicy;
 import java.lang.ref.WeakReference;
 import java.util.ArrayList;
+import java.util.LinkedHashSet;
 import java.util.List;
 
 /**
@@ -177,11 +180,30 @@ public interface OnOffsetChangedListener extends BaseOnOffsetChangedListener<App
   /**
    * Definition for a callback to be invoked when the lift on scroll elevation and background color
    * change.
+   *
+   * @deprecated Use {@link LiftOnScrollProgressListener} instead
    */
+  @Deprecated
   public interface LiftOnScrollListener {
     void onUpdate(@Dimension float elevation, @ColorInt int backgroundColor);
   }
 
+  /**
+   * Definition for a callback to be invoked when the lift on scroll progress has changed.
+   */
+  public abstract static class LiftOnScrollProgressListener {
+
+    /**
+     * Update method called when the lift progress is updated.
+     *
+     * @param elevation the elevation of the AppBarLayout
+     * @param backgroundColor the background color of the AppBarLayout
+     * @param progress the progress of the lift animation; 0 is unlifted, 1 is lifted.
+     */
+    public abstract void onUpdate(
+        @Dimension float elevation, @ColorInt int backgroundColor, @FloatRange(from = 0.0f, to = 1.0f) float progress);
+  }
+
   private static final int DEF_STYLE_RES = R.style.Widget_Design_AppBarLayout;
   private static final int INVALID_SCROLL_RANGE = -1;
 
@@ -209,6 +231,8 @@ public interface LiftOnScrollListener {
   @Nullable private ValueAnimator liftOnScrollColorAnimator;
   @Nullable private AnimatorUpdateListener liftOnScrollColorUpdateListener;
   private final List<LiftOnScrollListener> liftOnScrollListeners = new ArrayList<>();
+  private final LinkedHashSet<LiftOnScrollProgressListener> liftProgressListeners =
+      new LinkedHashSet<>();
 
   private final long liftOnScrollColorDuration;
   private final TimeInterpolator liftOnScrollColorInterpolator;
@@ -349,6 +373,12 @@ private void initializeLiftOnScrollWithColor(
               }
             }
           }
+
+          if (!liftProgressListeners.isEmpty()) {
+            for (LiftOnScrollProgressListener liftProgressListener : liftProgressListeners) {
+              liftProgressListener.onUpdate(0, mixedColor, liftProgress);
+            }
+          }
         };
 
     setBackground(background);
@@ -367,6 +397,10 @@ private void initializeLiftOnScrollWithElevation(
           for (LiftOnScrollListener liftOnScrollListener : liftOnScrollListeners) {
             liftOnScrollListener.onUpdate(elevation, background.getResolvedTintColor());
           }
+          for (LiftOnScrollProgressListener liftProgressListener : liftProgressListeners) {
+            liftProgressListener.onUpdate(
+                elevation, background.getResolvedTintColor(), elevation / appBarElevation);
+          }
         };
 
     setBackground(background);
@@ -415,21 +449,53 @@ public void removeOnOffsetChangedListener(OnOffsetChangedListener listener) {
   /**
    * Add a {@link LiftOnScrollListener} that will be called when the lift on scroll elevation and
    * background color of this {@link AppBarLayout} change.
+   *
+   * @deprecated Use {@link #addLiftOnScrollProgressListener(LiftOnScrollProgressListener)} instead.
    */
+  @Deprecated
   public void addLiftOnScrollListener(@NonNull LiftOnScrollListener liftOnScrollListener) {
     liftOnScrollListeners.add(liftOnScrollListener);
   }
 
-  /** Remove a previously added {@link LiftOnScrollListener}. */
+  /**
+   * Remove a previously added {@link LiftOnScrollListener}.
+   *
+   * @deprecated Use {@link #removeLiftOnScrollProgressListener(LiftOnScrollProgressListener)} instead.
+   */
+  @CanIgnoreReturnValue
+  @Deprecated
   public boolean removeLiftOnScrollListener(@NonNull LiftOnScrollListener liftOnScrollListener) {
     return liftOnScrollListeners.remove(liftOnScrollListener);
   }
 
-  /** Remove all previously added {@link LiftOnScrollListener}s. */
+  /**
+   * Remove all previously added {@link LiftOnScrollListener}s.
+   *
+   * @deprecated Use {@link #clearLiftOnScrollProgressListener()} instead.
+   */
+  @Deprecated
   public void clearLiftOnScrollListener() {
     liftOnScrollListeners.clear();
   }
 
+  /**
+   * Add a {@link LiftOnScrollProgressListener} that will be called when the lift on scroll progress changes
+   */
+  public void addLiftOnScrollProgressListener(@NonNull LiftOnScrollProgressListener liftProgressListener) {
+      liftProgressListeners.add(liftProgressListener);
+  }
+
+  /** Remove a previously added {@link LiftOnScrollProgressListener}. */
+  @CanIgnoreReturnValue
+  public boolean removeLiftOnScrollProgressListener(@NonNull LiftOnScrollProgressListener liftProgressListener) {
+    return liftProgressListeners.remove(liftProgressListener);
+  }
+
+  /** Remove all previously added {@link LiftOnScrollProgressListener}s. */
+  public void clearLiftOnScrollProgressListener() {
+    liftProgressListeners.clear();
+  }
+
   /**
    * Set the drawable to use for the status bar foreground drawable. Providing null will disable the
    * scrim functionality.
diff --git a/lib/java/com/google/android/material/search/SearchBar.java b/lib/java/com/google/android/material/search/SearchBar.java
@@ -44,6 +44,7 @@
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
+import android.view.ViewParent;
 import android.view.accessibility.AccessibilityNodeInfo;
 import android.widget.EditText;
 import android.widget.ImageButton;
@@ -63,9 +64,11 @@
 import androidx.core.widget.TextViewCompat;
 import androidx.customview.view.AbsSavedState;
 import com.google.android.material.appbar.AppBarLayout;
+import com.google.android.material.appbar.AppBarLayout.LiftOnScrollProgressListener;
 import com.google.android.material.color.MaterialColors;
 import com.google.android.material.internal.ThemeEnforcement;
 import com.google.android.material.internal.ToolbarUtils;
+import com.google.android.material.resources.MaterialResources;
 import com.google.android.material.shape.MaterialShapeDrawable;
 import com.google.android.material.shape.MaterialShapeUtils;
 import com.google.android.material.shape.ShapeAppearanceModel;
@@ -132,6 +135,10 @@ public class SearchBar extends Toolbar {
   private static final String NAMESPACE_APP = "http://schemas.android.com/apk/res-auto";
 
   private final TextView textView;
+  private final int backgroundColor;
+
+  private boolean liftOnScroll;
+  @Nullable private final ColorStateList liftOnScrollColor;
   private final boolean layoutInflated;
   private final boolean defaultMarginsEnabled;
   private final SearchBarAnimationHelper searchBarAnimationHelper;
@@ -148,6 +155,19 @@ public class SearchBar extends Toolbar {
   private MaterialShapeDrawable backgroundShape;
   private boolean textCentered;
 
+  private final LiftOnScrollProgressListener liftColorListener =
+      new LiftOnScrollProgressListener() {
+
+        @Override
+        public void onUpdate(float elevation, int appBarLayoutColor, float progress) {
+          if (liftOnScrollColor != null) {
+            int mixedColor =
+                MaterialColors.layer(backgroundColor, liftOnScrollColor.getDefaultColor(), progress);
+            backgroundShape.setFillColor(ColorStateList.valueOf(mixedColor));
+          }
+        }
+      };
+
   public SearchBar(@NonNull Context context) {
     this(context, null);
   }
@@ -175,7 +195,9 @@ public SearchBar(@NonNull Context context, @Nullable AttributeSet attrs, int def
 
     ShapeAppearanceModel shapeAppearanceModel =
         ShapeAppearanceModel.builder(context, attrs, defStyleAttr, DEF_STYLE_RES).build();
-    int backgroundColor = a.getColor(R.styleable.SearchBar_backgroundTint, 0);
+    backgroundColor = a.getColor(R.styleable.SearchBar_backgroundTint, 0);
+    liftOnScrollColor =
+        MaterialResources.getColorStateList(context, a, R.styleable.SearchBar_liftOnScrollColor);
     float elevation = a.getDimension(R.styleable.SearchBar_elevation, 0);
     defaultMarginsEnabled = a.getBoolean(R.styleable.SearchBar_defaultMarginsEnabled, true);
     defaultScrollFlagsEnabled = a.getBoolean(R.styleable.SearchBar_defaultScrollFlagsEnabled, true);
@@ -192,6 +214,7 @@ public SearchBar(@NonNull Context context, @Nullable AttributeSet attrs, int def
     float strokeWidth = a.getDimension(R.styleable.SearchBar_strokeWidth, -1);
     int strokeColor = a.getColor(R.styleable.SearchBar_strokeColor, Color.TRANSPARENT);
     textCentered = a.getBoolean(R.styleable.SearchBar_textCentered, false);
+    liftOnScroll = a.getBoolean(R.styleable.SearchBar_liftOnScroll, false);
 
     a.recycle();
 
@@ -225,6 +248,18 @@ private void validateAttributes(@Nullable AttributeSet attributeSet) {
     }
   }
 
+  @Nullable
+  private AppBarLayout getAppBarLayoutParentIfExists() {
+    ViewParent v = getParent();
+    while (v != null) {
+      if (v instanceof AppBarLayout) {
+        return (AppBarLayout) v;
+      }
+      v = v.getParent();
+    }
+    return null;
+  }
+
   private void initNavigationIcon() {
     // If no navigation icon, set up the default one; otherwise, re-set it for tinting if needed.
     setNavigationIcon(getNavigationIcon() == null ? defaultNavigationIcon : getNavigationIcon());
@@ -417,13 +452,56 @@ private int getNewMargin(int currentMargin) {
     return additionalMarginStart;
   }
 
+  /**
+   * Sets whether the {@link SearchBar} lifts when a parent {@link AppBarLayout} lifts on scroll.
+   */
+  public void setLiftOnScroll(boolean liftOnScroll) {
+    this.liftOnScroll = liftOnScroll;
+    if (liftOnScroll) {
+      addLiftOnScrollProgressListener();
+    } else {
+      removeLiftOnScrollProgressListener();
+    }
+  }
+
+  /**
+   * Returns whether or not the {@link SearchBar} lifts when a parent {@link AppBarLayout} lifts
+   * on scroll.
+   */
+  public boolean isLiftOnScroll() {
+    return liftOnScroll;
+  }
+
+  private void addLiftOnScrollProgressListener() {
+    AppBarLayout appBarLayout = getAppBarLayoutParentIfExists();
+    if (appBarLayout != null && liftOnScrollColor != null) {
+      appBarLayout.addLiftOnScrollProgressListener(liftColorListener);
+    }
+  }
+
+  private void removeLiftOnScrollProgressListener() {
+    AppBarLayout appBarLayout = getAppBarLayoutParentIfExists();
+    if (appBarLayout != null) {
+      appBarLayout.removeLiftOnScrollProgressListener(liftColorListener);
+    }
+  }
+
   @Override
   protected void onAttachedToWindow() {
     super.onAttachedToWindow();
 
     MaterialShapeUtils.setParentAbsoluteElevation(this, backgroundShape);
     setDefaultMargins();
     setOrClearDefaultScrollFlags();
+    if (liftOnScroll) {
+      addLiftOnScrollProgressListener();
+    }
+  }
+
+  @Override
+  protected void onDetachedFromWindow() {
+    super.onDetachedFromWindow();
+    removeLiftOnScrollProgressListener();
   }
 
   /**
diff --git a/lib/java/com/google/android/material/search/res/values/attrs.xml b/lib/java/com/google/android/material/search/res/values/attrs.xml
@@ -67,6 +67,10 @@
     <!-- Whether the text corresponding to the `android:text` attribute or `android:hint` attribute
          should be centered horizontally within the searchbar. Default is false.-->
     <attr name="textCentered" format="boolean"/>
+    <!-- Whether or not the search bar is lifted when a parent AppBarLayout is lifted when scrolling. -->
+    <attr name="liftOnScroll"/>
+    <!-- The color of the search bar when lifted. If null, the search bar color will not change.  -->
+    <attr name="liftOnScrollColor"/>
   </declare-styleable>
 
   <declare-styleable name="SearchView">
diff --git a/lib/java/com/google/android/material/search/res/values/styles.xml b/lib/java/com/google/android/material/search/res/values/styles.xml
@@ -30,6 +30,8 @@
     <item name="shapeAppearance">?attr/shapeAppearanceMediumComponent</item>
     <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.Material3.SearchBar</item>
     <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Search</item>
+    <item name="liftOnScroll">false</item>
+    <item name="liftOnScrollColor">?attr/colorSurfaceContainerHighest</item>
 
     <!-- On newer API levels, hide shadows while keeping elevation. -->
     <item name="android:outlineAmbientShadowColor" tools:targetApi="p">@android:color/transparent</item>
