[Catalog] Added search/filter functionality to MDC Catalog.

This speeds up our development process and enhances the user experience of our catalog.

Also added a bottom line to the last row of boxes in the table of contents grid in order to avoid this visual breakage when the grid does not fill up the screen: screenm/9V8HPkufqM9BkVc.png. Previously, GridDividerDecoration avoided drawing the bottom line of the grid in the last row of the grid, but now that there can be less boxes than the screen size it's important to handle that case.

PiperOrigin-RevId: 465643774

Author: afohrman

catalog/java/io/material/catalog/application/theme/res/values/ids.xml

@@ -17,4 +17,5 @@
 <resources>
   <string name="toolbar_navigation_close_description">Close demo</string>
   <string name="cat_choose_preferences_description">Open preferences dialog</string>
+  <string name="cat_search_description">Open the search bar</string>
 </resources>

catalog/java/io/material/catalog/application/theme/res/values/strings.xml

@@ -14,7 +14,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
   -->
-<resources xmlns:tools="http://schemas.android.com/tools">
+<resources>
 
   <!-- For the catalog we know that toolbars will always be on top of a "surface" color,
        so it's better for them to have no background, especially because it's common for
@@ -27,16 +27,9 @@
   </style>
 
   <style name="Widget.Catalog.TocButton" parent="Widget.AppCompat.ImageButton">
-    <item name="android:layout_width">@dimen/mtrl_min_touch_target_size</item>
-    <item name="android:layout_height">@dimen/mtrl_min_touch_target_size</item>
+    <item name="android:minWidth">@dimen/mtrl_min_touch_target_size</item>
+    <item name="android:minHeight">@dimen/mtrl_min_touch_target_size</item>
     <item name="android:background">?attr/actionBarItemBackground</item>
   </style>
 
-  <style name="Widget.Catalog.ChoosePreferencesButton" parent="Widget.Catalog.TocButton">
-    <item name="android:id">@id/cat_toc_preferences_button</item>
-    <item name="android:layout_gravity">center_vertical|end</item>
-    <item name="srcCompat">@drawable/ic_settings_24px</item>
-    <item name="android:contentDescription">@string/cat_choose_preferences_description</item>
-  </style>
-
 </resources>

catalog/java/io/material/catalog/application/theme/res/values/styles.xml

@@ -36,7 +36,7 @@
  * will only draw dividers that are internal to the grid, meaning it will not draw lines for the
  * outermost left, top, right, or bottom edges.
  */
-public class GridDividerDecoration extends RecyclerView.ItemDecoration {
+public final class GridDividerDecoration extends RecyclerView.ItemDecoration {
 
   private final int spanCount;
   private final Paint dividerPaint;
@@ -58,16 +58,10 @@ public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state)
   }
 
   private void drawHorizontal(Canvas canvas, RecyclerView parent) {
-    final int itemCount = parent.getAdapter().getItemCount();
     final int childCount = parent.getChildCount();
-    final int lastRowChildCount = getLastRowChildCount(itemCount);
     for (int i = 0; i < childCount; i++) {
       final View child = parent.getChildAt(i);
 
-      if (isChildInLastRow(parent, child, itemCount, lastRowChildCount)) {
-        continue;
-      }
-
       parent.getDecoratedBoundsWithMargins(child, bounds);
       final int y = bounds.bottom;
       final int startX = bounds.left;
@@ -95,16 +89,6 @@ private void drawVertical(Canvas canvas, RecyclerView parent) {
     }
   }
 
-  private int getLastRowChildCount(int itemCount) {
-    final int gridChildRemainder = itemCount % spanCount;
-    return gridChildRemainder == 0 ? spanCount : gridChildRemainder;
-  }
-
-  private boolean isChildInLastRow(
-      RecyclerView parent, View child, int itemCount, int lastRowChildCount) {
-    return parent.getChildAdapterPosition(child) >= itemCount - lastRowChildCount;
-  }
-
   private boolean isChildInLastColumn(RecyclerView parent, View child) {
     return parent.getChildAdapterPosition(child) % spanCount == spanCount - 1;
   }

catalog/java/io/material/catalog/tableofcontents/GridDividerDecoration.java

@@ -19,18 +19,57 @@
 import androidx.fragment.app.FragmentActivity;
 import androidx.recyclerview.widget.RecyclerView.Adapter;
 import android.view.ViewGroup;
+import android.widget.Filter;
+import android.widget.Filterable;
+import com.google.common.collect.ImmutableList;
 import io.material.catalog.feature.FeatureDemo;
+import java.util.ArrayList;
+import java.util.Collection;
 import java.util.List;
+import java.util.Locale;
 
 /** Handles individual items in the catalog table of contents. */
-class TocAdapter extends Adapter<TocViewHolder> {
+final class TocAdapter extends Adapter<TocViewHolder> implements Filterable {
 
   private final FragmentActivity activity;
   private final List<FeatureDemo> featureDemos;
+  private final ImmutableList<FeatureDemo> featureDemosAll;
+
+  private final Filter featureDemoFilter =
+      new Filter() {
+        @Override
+        protected FilterResults performFiltering(CharSequence constraint) {
+          List<FeatureDemo> filteredList = new ArrayList<>();
+
+          if (constraint.length() == 0) {
+            filteredList.addAll(featureDemosAll);
+          } else {
+            for (FeatureDemo featureDemo : featureDemosAll) {
+              if (activity
+                  .getString(featureDemo.getTitleResId())
+                  .toLowerCase(Locale.ROOT)
+                  .contains(constraint.toString().toLowerCase(Locale.ROOT))) {
+                filteredList.add(featureDemo);
+              }
+            }
+          }
+          FilterResults filterResults = new FilterResults();
+          filterResults.values = filteredList;
+          return filterResults;
+        }
+
+        @Override
+        protected void publishResults(CharSequence constraint, FilterResults filterResults) {
+          featureDemos.clear();
+          featureDemos.addAll((Collection<? extends FeatureDemo>) filterResults.values);
+          notifyDataSetChanged();
+        }
+      };
 
   TocAdapter(FragmentActivity activity, List<FeatureDemo> featureDemos) {
     this.activity = activity;
     this.featureDemos = featureDemos;
+    this.featureDemosAll = ImmutableList.copyOf(featureDemos);
   }
 
   @Override
@@ -47,4 +86,9 @@ public void onBindViewHolder(TocViewHolder tocViewHolder, int i) {
   public int getItemCount() {
     return featureDemos.size();
   }
+
+  @Override
+  public Filter getFilter() {
+    return featureDemoFilter;
+  }
 }

catalog/java/io/material/catalog/tableofcontents/TocAdapter.java

@@ -18,25 +18,33 @@
 
 import io.material.catalog.R;
 
-import android.annotation.SuppressLint;
 import android.os.Build.VERSION;
 import android.os.Build.VERSION_CODES;
 import android.os.Bundle;
 import androidx.fragment.app.Fragment;
 import androidx.appcompat.app.AppCompatActivity;
 import androidx.recyclerview.widget.GridLayoutManager;
 import androidx.recyclerview.widget.RecyclerView;
+import android.support.v7.widget.SearchView;
+import android.support.v7.widget.SearchView.OnQueryTextListener;
 import androidx.appcompat.widget.Toolbar;
 import android.util.DisplayMetrics;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.ImageButton;
+import androidx.annotation.Dimension;
+import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
+import androidx.constraintlayout.widget.ConstraintLayout;
+import androidx.constraintlayout.widget.ConstraintSet;
 import androidx.core.content.ContextCompat;
 import androidx.core.math.MathUtils;
 import androidx.core.view.ViewCompat;
+import androidx.transition.Transition;
+import androidx.transition.TransitionManager;
 import com.google.android.material.appbar.AppBarLayout;
+import com.google.android.material.transition.MaterialSharedAxis;
 import dagger.android.support.DaggerFragment;
 import io.material.catalog.feature.FeatureDemo;
 import io.material.catalog.feature.FeatureDemoUtils;
@@ -54,13 +62,21 @@ public class TocFragment extends DaggerFragment {
   private static final int GRID_SPAN_COUNT_MIN = 1;
   private static final int GRID_SPAN_COUNT_MAX = 4;
 
+  @Dimension(unit = Dimension.DP)
+  private static final int CATALOG_NARROW_SCREEN_SIZE_CUTOFF = 350;
+
   @Inject Set<FeatureDemo> featureDemos;
   @Inject TocResourceProvider tocResourceProvider;
 
   private AppBarLayout appBarLayout;
   private View gridTopDivider;
-  private RecyclerView recyclerView;
+  private ConstraintLayout headerContainer;
   private ImageButton preferencesButton;
+  private SearchView searchView;
+  private ImageButton searchButton;
+  private TocAdapter tocAdapter;
+  private Transition openSearchViewTransition;
+  private Transition closeSearchViewTransition;
 
   @Override
   public void onCreate(@Nullable Bundle bundle) {
@@ -71,9 +87,9 @@ public void onCreate(@Nullable Bundle bundle) {
     }
   }
 
-  @SuppressLint("MissingInflatedId")
   @Nullable
   @Override
+  @SuppressWarnings("MissingInflatedId")
   public View onCreateView(
       LayoutInflater layoutInflater, @Nullable ViewGroup viewGroup, @Nullable Bundle bundle) {
     View view =
@@ -85,12 +101,18 @@ public View onCreateView(
     activity.getSupportActionBar().setDisplayShowTitleEnabled(false);
 
     ViewGroup content = view.findViewById(R.id.content);
-    View.inflate(getContext(), tocResourceProvider.getHeaderContent(), content);
+    View.inflate(getContext(), R.layout.cat_toc_header, content);
 
     appBarLayout = view.findViewById(R.id.cat_toc_app_bar_layout);
     gridTopDivider = view.findViewById(R.id.cat_toc_grid_top_divider);
-    recyclerView = view.findViewById(R.id.cat_toc_grid);
+    headerContainer = view.findViewById(R.id.cat_toc_header_container);
+    RecyclerView recyclerView = view.findViewById(R.id.cat_toc_grid);
     preferencesButton = view.findViewById(R.id.cat_toc_preferences_button);
+    searchView = view.findViewById(R.id.cat_toc_search_view);
+    searchButton = view.findViewById(R.id.cat_toc_search_button);
+
+    // Inflate logo into the header container.
+    View.inflate(getContext(), tocResourceProvider.getLogoLayout(), headerContainer);
 
     ViewCompat.setOnApplyWindowInsetsListener(
         view,
@@ -126,14 +148,46 @@ public View onCreateView(
                 getContext().getString(feature1.getTitleResId()),
                 getContext().getString(feature2.getTitleResId())));
 
-    TocAdapter tocAdapter = new TocAdapter(getActivity(), featureList);
+    tocAdapter = new TocAdapter(getActivity(), featureList);
     recyclerView.setAdapter(tocAdapter);
 
+    adjustLogoConstraintsForNarrowScreenWidths();
+
     initPreferencesButton();
+    initSearchButton();
+    initSearchView();
+    initSearchViewTransitions();
 
     return view;
   }
 
+  private void adjustLogoConstraintsForNarrowScreenWidths() {
+    // Adjust logo constraints so that the logo text does not overlap with the search image button.
+    if (getScreenWidth() < CATALOG_NARROW_SCREEN_SIZE_CUTOFF) {
+      ConstraintSet narrowHeaderConstraintSet = createNarrowHeaderConstraintSet(headerContainer);
+      narrowHeaderConstraintSet.applyTo(headerContainer);
+    }
+  }
+
+  @Dimension(unit = Dimension.DP)
+  private int getScreenWidth() {
+    return getResources().getConfiguration().screenWidthDp;
+  }
+
+  private ConstraintSet createNarrowHeaderConstraintSet(ConstraintLayout constraintLayout) {
+    ConstraintSet constraintSet = new ConstraintSet();
+    constraintSet.clone(constraintLayout);
+    constraintSet.connect(
+        R.id.header_logo, ConstraintSet.END, R.id.cat_toc_search_button, ConstraintSet.START);
+    // Add a bit of space on the start side of the logo to compensate for the extra 12dp of space
+    // the search icon button includes on each side because of its 48dp minimum touch target width.
+    constraintSet.setMargin(
+        R.id.header_logo,
+        ConstraintSet.START,
+        getResources().getDimensionPixelOffset(R.dimen.cat_toc_header_additional_start_margin));
+    return constraintSet;
+  }
+
   private void addGridTopDividerVisibilityListener() {
     appBarLayout.addOnOffsetChangedListener(
         (appBarLayout, verticalOffset) -> {
@@ -157,8 +211,76 @@ private int calculateGridSpanCount() {
 
   private void initPreferencesButton() {
     preferencesButton.setOnClickListener(
-        v -> new CatalogPreferencesDialogFragment().show(
-            getParentFragmentManager(), "preferences-screen"));
+        v ->
+            new CatalogPreferencesDialogFragment()
+                .show(getParentFragmentManager(), "preferences-screen"));
+  }
+
+  private void initSearchButton() {
+    searchButton.setOnClickListener(v -> openSearchView());
+  }
+
+  private void initSearchView() {
+    searchView.setOnClickListener(v -> closeSearchView());
+
+    searchView.setOnQueryTextListener(
+        new OnQueryTextListener() {
+          @Override
+          public boolean onQueryTextSubmit(String query) {
+            return false;
+          }
+
+          @Override
+          public boolean onQueryTextChange(String newText) {
+            tocAdapter.getFilter().filter(newText);
+            return false;
+          }
+        });
+  }
+
+  private void initSearchViewTransitions() {
+    openSearchViewTransition = createSearchViewTransition(true);
+    closeSearchViewTransition = createSearchViewTransition(false);
+  }
+
+  private void openSearchView() {
+    TransitionManager.beginDelayedTransition(headerContainer, openSearchViewTransition);
+
+    headerContainer.setVisibility(View.GONE);
+    searchView.setVisibility(View.VISIBLE);
+
+    searchView.requestFocus();
+  }
+
+  private void closeSearchView() {
+    TransitionManager.beginDelayedTransition(headerContainer, closeSearchViewTransition);
+
+    headerContainer.setVisibility(View.VISIBLE);
+    searchView.setVisibility(View.GONE);
+
+    clearSearchView();
+  }
+
+  @NonNull
+  private MaterialSharedAxis createSearchViewTransition(boolean entering) {
+    MaterialSharedAxis sharedAxisTransition =
+        new MaterialSharedAxis(MaterialSharedAxis.X, entering);
+
+    sharedAxisTransition.addTarget(headerContainer);
+    sharedAxisTransition.addTarget(searchView);
+    return sharedAxisTransition;
+  }
+
+  @Override
+  public void onPause() {
+    super.onPause();
+    clearSearchView();
+  }
+
+  private void clearSearchView() {
+    if (searchView != null) {
+      searchView.setQuery("", true);
+    }
   }
 
   private void startDefaultDemoLandingIfNeeded() {

catalog/java/io/material/catalog/tableofcontents/TocFragment.java

@@ -20,11 +20,11 @@
 
 import androidx.annotation.LayoutRes;
 
-/** A helper class that facilitates overriding of certain resources in the Catalog app. */
+/** A helper class that facilitates resource overrides in the Catalog app. */
 public class TocResourceProvider {
 
   @LayoutRes
-  protected int getHeaderContent() {
-    return R.layout.cat_toc_header;
+  protected int getLogoLayout() {
+    return R.layout.cat_toc_logo;
   }
 }