[Search] Add a placeholder textview to Searchbar that keeps track of searchview edit text in order to gracefully fade it out in searchview collapse animation

PiperOrigin-RevId: 752904135

Author: imhappi

catalog/java/io/material/catalog/search/SearchDemoUtils.java

@@ -184,7 +184,7 @@ private static List<SuggestionItem> getThisWeekSuggestions() {
 
   private static void submitSearchQuery(SearchBar searchBar, SearchView searchView, String query) {
     searchBar.setText(query);
-    searchBar.post(() -> searchView.hide());
+    searchView.hide();
   }
 
   private static class SuggestionItem {

lib/java/com/google/android/material/search/SearchBar.java

@@ -47,6 +47,7 @@
 import android.view.ViewParent;
 import android.view.accessibility.AccessibilityNodeInfo;
 import android.widget.EditText;
+import android.widget.FrameLayout;
 import android.widget.ImageButton;
 import android.widget.TextView;
 import androidx.annotation.ColorInt;
@@ -136,6 +137,8 @@ public class SearchBar extends Toolbar {
   private static final String NAMESPACE_APP = "http://schemas.android.com/apk/res-auto";
 
   private final TextView textView;
+  private final TextView placeholderTextView;
+  private final FrameLayout textViewContainer;
   private final int backgroundColor;
 
   private boolean liftOnScroll;
@@ -228,12 +231,18 @@ public SearchBar(@NonNull Context context, @Nullable AttributeSet attrs, int def
     layoutInflated = true;
 
     textView = findViewById(R.id.open_search_bar_text_view);
+    placeholderTextView = findViewById(R.id.open_search_bar_placeholder_text_view);
+    textViewContainer = findViewById(R.id.open_search_bar_text_view_container);
 
     setElevation(elevation);
     initTextView(textAppearanceResId, text, hint);
     initBackground(shapeAppearanceModel, backgroundColor, elevation, strokeWidth, strokeColor);
   }
 
+  void setPlaceholderText(String string) {
+    placeholderTextView.setText(string);
+  }
+
   private void validateAttributes(@Nullable AttributeSet attributeSet) {
     if (attributeSet == null) {
       return;
@@ -273,6 +282,7 @@ private void initNavigationIcon() {
   private void initTextView(@StyleRes int textAppearanceResId, String text, String hint) {
     if (textAppearanceResId != -1) {
       TextViewCompat.setTextAppearance(textView, textAppearanceResId);
+      TextViewCompat.setTextAppearance(placeholderTextView, textAppearanceResId);
     }
     setText(text);
     setHint(hint);
@@ -423,7 +433,7 @@ protected void onLayout(boolean changed, int left, int top, int right, int botto
     super.onLayout(changed, left, top, right, bottom);
 
     if (centerView != null) {
-      layoutViewInCenter(centerView, /* absolutePlacement= */ true);
+      layoutViewInCenter(centerView);
     }
     setHandwritingBoundsInsets();
     if (textView != null) {
@@ -432,7 +442,9 @@ protected void onLayout(boolean changed, int left, int top, int right, int botto
       // to be pushed to the side. In this case, we want the textview to be still centered on top of
       // any center views.
       if (textCentered) {
-        layoutViewInCenter(textView, /* absolutePlacement= */ false);
+        // Make sure textview does not overlap with any toolbar views (nav icon, menu) or
+        // padding/insets
+        layoutTextViewCenterAvoidToolbarViewsAndPadding();
       }
     }
   }
@@ -581,52 +593,72 @@ private ImageButton findOrGetNavView() {
     return navIconButton;
   }
 
+  private void layoutTextViewCenterAvoidToolbarViewsAndPadding() {
+    int textViewContainerLeft = getMeasuredWidth() / 2 - textViewContainer.getMeasuredWidth() / 2;
+    int textViewContainerRight = textViewContainerLeft + textViewContainer.getMeasuredWidth();
+    int textViewContainerTop = getMeasuredHeight() / 2 - textViewContainer.getMeasuredHeight() / 2;
+    int textViewContainerBottom = textViewContainerTop + textViewContainer.getMeasuredHeight();
+    boolean isRtl = getLayoutDirection() == LAYOUT_DIRECTION_RTL;
+    View menuView = findOrGetMenuView();
+    View navIconButton = findOrGetNavView();
+
+    int textViewLeft = textViewContainer.getMeasuredWidth() / 2 - textView.getMeasuredWidth() / 2;
+    int textViewRight = textViewLeft + textView.getMeasuredWidth();
+
+    // left and right refer to the textview's left and right coordinates within the searchbar
+    int left = textViewLeft + textViewContainerLeft;
+    int right = textViewContainerLeft + textViewRight;
+
+    View leftView = isRtl ? menuView : navIconButton;
+    View rightView = isRtl ? navIconButton : menuView;
+    int leftShift = 0;
+    int rightShift = 0;
+    if (leftView != null) {
+      leftShift = max(leftView.getRight() - left, 0);
+    }
+    left += leftShift;
+    right += leftShift;
+    if (rightView != null) {
+      rightShift = max(right - rightView.getLeft(), 0);
+    }
+    left -= rightShift;
+    right -= rightShift;
+    // Make sure to not lay out the view inside the SearchBar padding. paddingLeftAdded and
+    // paddingRightAdded will never be non-zero at the same time, as Toolbar.measure has already
+    // measured the children accounting for padding.
+    int paddingLeftShift = max(getPaddingLeft() - left, getContentInsetLeft() - left);
+    int paddingRightShift =
+        max(
+            right - (getMeasuredWidth() - getPaddingRight()),
+            right - (getMeasuredWidth() - getContentInsetRight()));
+    paddingLeftShift = max(paddingLeftShift, 0);
+    paddingRightShift = max(paddingRightShift, 0);
+
+    int totalShift = leftShift - rightShift + paddingLeftShift - paddingRightShift;
+    // Center the textViewContainer and shift over textViewContainer by the amount that textView
+    // needs to be shifted over; this shifts both the container and the textView, which is necessary so the textView doesn't get
+    // laid outside of the container.
+    textViewContainer.layout(
+        textViewContainerLeft + totalShift,
+        textViewContainerTop,
+        textViewContainerRight + totalShift,
+        textViewContainerBottom);
+  }
+
   /**
    * Lays out the given view in the center of the {@link SearchBar}.
    *
    * @param view The view to layout in the center.
-   * @param absolutePlacement Whether the view will be placed absolutely in the center (eg. ignoring
-   * other toolbar elements like the nav icon and menu, padding, content insets)
    */
-  private void layoutViewInCenter(View view, boolean absolutePlacement) {
+  private void layoutViewInCenter(View view) {
     if (view == null) {
       return;
     }
 
     int viewWidth = view.getMeasuredWidth();
     int left = getMeasuredWidth() / 2 - viewWidth / 2;
     int right = left + viewWidth;
-    if (!absolutePlacement) {
-      View menuView = findOrGetMenuView();
-      if (menuView != null) {
-        int diff =
-            getLayoutDirection() == LAYOUT_DIRECTION_RTL
-                ? max(menuView.getRight() - left, 0)
-                : max(right - menuView.getLeft(), 0);
-        left -= diff;
-        right -= diff;
-      }
-      View navIcon = findOrGetNavView();
-      if (navIcon != null) {
-        int diff =
-            getLayoutDirection() == LAYOUT_DIRECTION_RTL
-                ? max(right - navIcon.getLeft(), 0)
-                : max(navIcon.getRight() - left, 0);
-        left += diff;
-        right += diff;
-      }
 
-      // Make sure to not lay out the view inside the SearchBar padding. paddingLeftAdded and
-      // paddingRightAdded will never be non-zero at the same time, as Toolbar.measure has already
-      // measured the children accounting for padding.
-      int paddingStartAdded = max(getPaddingStart() - left, getContentInsetStart() - left);
-      int paddingEndAdded =
-          max(
-              right - (getMeasuredWidth() - getPaddingEnd()),
-              right - (getMeasuredWidth() - getContentInsetEnd()));
-      left += max(paddingStartAdded, 0) - max(paddingEndAdded, 0);
-      right += max(paddingStartAdded, 0) - max(paddingEndAdded, 0);
-    }
     int viewHeight = view.getMeasuredHeight();
     int top = getMeasuredHeight() / 2 - viewHeight / 2;
     int bottom = top + viewHeight;
@@ -690,6 +722,10 @@ public void setCenterView(@Nullable View view) {
     }
   }
 
+  TextView getPlaceholderTextView() {
+    return placeholderTextView;
+  }
+
   /** Returns the main {@link TextView} which can be used for hint and search text. */
   @NonNull
   public TextView getTextView() {
@@ -705,26 +741,31 @@ public CharSequence getText() {
   /** Sets the text of main {@link TextView}. */
   public void setText(@Nullable CharSequence text) {
     textView.setText(text);
+    placeholderTextView.setText(text);
   }
 
   /** Sets the text of main {@link TextView}. */
   public void setText(@StringRes int textResId) {
     textView.setText(textResId);
+    placeholderTextView.setText(textResId);
   }
 
-  /** Whether or not to center the text. */
+  /** Whether or not to center the text within the TextView. */
   public void setTextCentered(boolean textCentered) {
     this.textCentered = textCentered;
     if (textView == null) {
       return;
     }
-    Toolbar.LayoutParams lp = (LayoutParams) textView.getLayoutParams();
+    FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) textView.getLayoutParams();
     if (textCentered) {
+      lp.gravity = Gravity.CENTER_HORIZONTAL;
       textView.setGravity(Gravity.CENTER_HORIZONTAL);
     } else {
+      lp.gravity = Gravity.NO_GRAVITY;
       textView.setGravity(Gravity.NO_GRAVITY);
     }
     textView.setLayoutParams(lp);
+    placeholderTextView.setLayoutParams(lp);
   }
 
   /** Whether or not the text is centered. */
@@ -735,6 +776,7 @@ public boolean getTextCentered() {
   /** Clears the text of main {@link TextView}. */
   public void clearText() {
     textView.setText("");
+    placeholderTextView.setText("");
   }
 
   /** Returns the hint of main {@link TextView}. */

lib/java/com/google/android/material/search/SearchView.java

@@ -288,6 +288,9 @@ public void startBackProgress(@NonNull BackEventCompat backEvent) {
     if (isHiddenOrHiding() || searchBar == null) {
       return;
     }
+    if (searchBar != null) {
+      searchBar.setPlaceholderText(editText.getText().toString());
+    }
     searchViewAnimationHelper.startBackProgress(backEvent);
   }
 
@@ -893,7 +896,12 @@ public void hide() {
         || currentTransitionState.equals(TransitionState.HIDING)) {
       return;
     }
-    searchViewAnimationHelper.hide();
+    if (searchBar != null && searchBar.isAttachedToWindow()) {
+      searchBar.setPlaceholderText(editText.getText().toString());
+      searchBar.post(searchViewAnimationHelper::hide);
+    } else {
+      searchViewAnimationHelper.hide();
+    }
   }
 
   /** Updates the visibility of the {@link SearchView} without an animation. */

lib/java/com/google/android/material/search/SearchViewAnimationHelper.java

@@ -291,7 +291,8 @@ private AnimatorSet getExpandCollapseAnimatorSet(boolean show) {
         getDummyToolbarAnimator(show),
         getActionMenuViewsAlphaAnimator(show),
         getEditTextAnimator(show),
-        getSearchPrefixAnimator(show));
+        getSearchPrefixAnimator(show),
+        getTextAnimator(show));
     animatorSet.addListener(
         new AnimatorListenerAdapter() {
           @Override
@@ -302,6 +303,13 @@ public void onAnimationStart(Animator animation) {
           @Override
           public void onAnimationEnd(Animator animation) {
             setContentViewsAlpha(show ? 1 : 0);
+            // Reset edittext and searchbar textview alphas after the animations are finished since
+            // the visibilities for searchview and searchbar have been set accordingly.
+            editText.setAlpha(1);
+            if (searchBar != null) {
+              searchBar.getTextView().setAlpha(1);
+            }
+
             // After expanding or collapsing, we should reset the clip bounds so it can react to the
             // screen or layout changes. Otherwise it will result in wrong clipping on the layout.
             rootView.resetClipBoundsAndCornerRadii();
@@ -569,23 +577,40 @@ private Animator getEditTextAnimator(boolean show) {
     return getTranslationAnimatorForText(show, editText);
   }
 
+  private AnimatorSet getTextAnimator(boolean show) {
+    AnimatorSet animatorSet = new AnimatorSet();
+    addTextFadeAnimatorIfNeeded(animatorSet);
+    animatorSet.setDuration(show ? SHOW_DURATION_MS : HIDE_DURATION_MS);
+    animatorSet.setInterpolator(
+        ReversableAnimatedValueInterpolator.of(show, AnimationUtils.LINEAR_INTERPOLATOR));
+    return animatorSet;
+  }
+
+  private void addTextFadeAnimatorIfNeeded(AnimatorSet animatorSet) {
+    if (searchBar == null || TextUtils.equals(editText.getText(), searchBar.getText())) {
+      return;
+    }
+    // If the searchbar text is not equal to the searchview edittext, we want to fade out the
+    // edittext and fade in the searchbar text
+    ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
+    animator.addUpdateListener(
+        animation -> {
+          editText.setAlpha((Float) animation.getAnimatedValue());
+          searchBar.getTextView().setAlpha(1 - (Float) animation.getAnimatedValue());
+        });
+    animatorSet.playTogether(animator);
+  }
+
   private Animator getTranslationAnimatorForText(boolean show, View v) {
-    TextView textView = searchBar.getTextView();
-    int additionalMovement = 0;
-    // If the text is centered and the text's hint is not equal to the text (ie. if there's any
-    // extra space in between the textview's start and the actual text bounds)
-    if (!TextUtils.isEmpty(textView.getText())
-        && searchBar.getTextCentered()
-        && textView.getHint() != textView.getText()) {
-      String text = textView.getText().toString();
-      Rect bounds = new Rect();
-      textView.getPaint().getTextBounds(text, 0, text.length(), bounds);
-      additionalMovement = max(0, searchBar.getTextView().getMeasuredWidth() / 2 - bounds.width() / 2);
+    TextView textView = searchBar.getPlaceholderTextView();
+    // If the placeholder text is empty, we animate to the searchbar textview instead.
+    // Or if we're showing the searchview, we always animate from the searchbar textview, not
+    // from the placeholder text.
+    if (TextUtils.isEmpty(textView.getText()) || show) {
+      textView = searchBar.getTextView();
     }
     int startX =
-        getViewLeftFromSearchViewParent(searchBar.getTextView())
-            + additionalMovement
-            - (v.getLeft() + textContainer.getLeft());
+        getViewLeftFromSearchViewParent(textView) - (v.getLeft() + textContainer.getLeft());
     return getTranslationAnimator(show, v, startX, getFromTranslationY());
   }
 

lib/java/com/google/android/material/search/res/layout/mtrl_search_bar.xml

@@ -16,10 +16,24 @@
 -->
 <!-- This text view isn't exposed to accessibility because its attributes are mirrored on the
      parent container to more closely resemble the behavior of an EditText. -->
-<TextView xmlns:android="http://schemas.android.com/apk/res/android"
+<FrameLayout
+  xmlns:android="http://schemas.android.com/apk/res/android"
+  android:id="@+id/open_search_bar_text_view_container"
+  android:layout_width="wrap_content"
+  android:layout_height="wrap_content">
+  <TextView
     android:id="@+id/open_search_bar_text_view"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:ellipsize="end"
     android:importantForAccessibility="no"
     android:maxLines="1"/>
+  <TextView
+    android:id="@+id/open_search_bar_placeholder_text_view"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:ellipsize="end"
+    android:visibility="invisible"
+    android:importantForAccessibility="no"
+    android:maxLines="1"/>
+</FrameLayout>