Dark Theme Elevation Overlay system

PiperOrigin-RevId: 237829773

catalog/build.gradle

@@ -33,6 +33,7 @@ def srcDirs = [
   'chip',
   'dialog',
   'draggable',
+  'elevation',
   'fab',
   'feature',
   'font',

catalog/java/io/material/catalog/AndroidManifest.xml

@@ -21,10 +21,10 @@
   android:versionName="1.0">
 
   <application
+    android:name="io.material.catalog.application.${application_name}"
     android:allowBackup="true"
     android:icon="@mipmap/ic_launcher"
     android:label="@string/cat_app_name"
-    android:name="io.material.catalog.application.${application_name}"
     android:roundIcon="@mipmap/ic_launcher_round"
     android:supportsRtl="true"
     android:theme="@style/Theme.${application_theme}">
@@ -40,18 +40,23 @@
       </intent-filter>
     </activity>
     <activity
+      android:name=".elevation.ElevationOverlaysDemoActivity"
       android:exported="false"
+      android:label="@string/cat_elevation_overlays_title"
+      android:theme="@style/Theme.Catalog.Dark"/>
+    <activity
       android:name=".topappbar.TopAppBarActionBarDemoActivity"
+      android:exported="false"
       android:label="@string/cat_topappbar_action_bar_title"
       android:theme="@style/Theme.MaterialComponents.Light"/>
     <activity
-      android:exported="false"
       android:name=".topappbar.TopAppBarDarkActionBarDemoActivity"
+      android:exported="false"
       android:label="@string/cat_topappbar_dark_action_bar_title"
       android:theme="@style/Theme.MaterialComponents.Light.DarkActionBar"/>
     <activity
-      android:exported="true"
-      android:name=".card.CardSelectionModeActivity"/>
+      android:name=".card.CardSelectionModeActivity"
+      android:exported="true"/>
 
   </application>
 

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

@@ -26,5 +26,9 @@
     <item name="catalogToolbarStyle">@style/Widget.Catalog.Toolbar</item>
     <item name="catalogToolbarWithCloseButtonStyle">@style/Widget.Catalog.Toolbar.WithCloseButton</item>
     <item name="windowActionModeOverlay">true</item>
+
+    <!-- TODO: Remove the following overrides once they are moved into the library. -->
+    <item name="elevationOverlaysEnabled">true</item>
+    <item name="colorSurface">#141414</item>
   </style>
 </resources>

catalog/java/io/material/catalog/elevation/ElevationFragment.java

@@ -18,6 +18,7 @@
 
 import io.material.catalog.R;
 
+import android.content.Intent;
 import androidx.fragment.app.Fragment;
 import dagger.Provides;
 import dagger.android.ContributesAndroidInjector;
@@ -27,6 +28,8 @@
 import io.material.catalog.feature.Demo;
 import io.material.catalog.feature.DemoLandingFragment;
 import io.material.catalog.feature.FeatureDemo;
+import java.util.Collections;
+import java.util.List;
 
 /** A landing fragment that links to Elevation demos for the Catalog app. */
 public class ElevationFragment extends DemoLandingFragment {
@@ -51,6 +54,17 @@ public Fragment createFragment() {
     };
   }
 
+  @Override
+  public List<Demo> getAdditionalDemos() {
+    return Collections.singletonList(
+        new Demo(R.string.cat_elevation_overlays_title) {
+          @Override
+          public Intent createActivityIntent() {
+            return new Intent(getContext(), ElevationOverlaysDemoActivity.class);
+          }
+        });
+  }
+
   /** The Dagger module for {@link ElevationFragment} dependencies. */
   @dagger.Module
   public abstract static class Module {

catalog/java/io/material/catalog/elevation/ElevationOverlaysDemoActivity.java

@@ -0,0 +1,119 @@
+/*
+ * Copyright 2019 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.material.catalog.elevation;
+
+import io.material.catalog.R;
+
+import android.os.Bundle;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import com.google.android.material.elevation.ElevationOverlayProvider;
+import com.google.android.material.internal.ViewUtils;
+import androidx.core.view.ViewCompat;
+import androidx.recyclerview.widget.LinearLayoutManager;
+import androidx.recyclerview.widget.RecyclerView;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.TextView;
+import io.material.catalog.feature.DemoActivity;
+import java.util.Locale;
+
+/** A fragment that displays the Elevation Overlays demo for the Catalog app. */
+public class ElevationOverlaysDemoActivity extends DemoActivity {
+
+  @Override
+  public View onCreateDemoView(
+      LayoutInflater layoutInflater, @Nullable ViewGroup viewGroup, @Nullable Bundle bundle) {
+    View view =
+        layoutInflater.inflate(
+            R.layout.cat_elevation_overlays_activity, viewGroup, /* attachToRoot= */ false);
+
+    RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
+    recyclerView.setAdapter(new Adapter(getElevationDpValues()));
+    recyclerView.setLayoutManager(
+        new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, /* reverseLayout= */ false));
+
+    return view;
+  }
+
+  @Override
+  public int getDemoTitleResId() {
+    return R.string.cat_elevation_overlays_title;
+  }
+
+  protected int[] getElevationDpValues() {
+    return new int[] {1, 2, 3, 4, 6, 8, 12, 16, 24};
+  }
+
+  private class Adapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
+
+    private final int[] elevationDpValues;
+
+    public Adapter(int[] elevationDpValues) {
+      this.elevationDpValues = elevationDpValues;
+    }
+
+    @NonNull
+    @Override
+    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
+      LayoutInflater inflater = LayoutInflater.from(parent.getContext());
+      View view =
+          inflater.inflate(R.layout.cat_elevation_overlays_item, parent, /* attachToRoot= */ false);
+      return new ItemViewHolder(view);
+    }
+
+    @Override
+    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int position) {
+      ((ItemViewHolder) viewHolder).bind(elevationDpValues[position]);
+    }
+
+    @Override
+    public int getItemCount() {
+      return elevationDpValues.length;
+    }
+
+    private class ItemViewHolder extends RecyclerView.ViewHolder {
+
+      private final ElevationOverlayProvider overlayProvider;
+
+      private final TextView dpLabelView;
+      private final TextView alphaLabelView;
+
+      private ItemViewHolder(View itemView) {
+        super(itemView);
+        overlayProvider = new ElevationOverlayProvider(itemView.getContext());
+        dpLabelView = itemView.findViewById(R.id.elevation_overlay_dp_label);
+        alphaLabelView = itemView.findViewById(R.id.elevation_overlay_alpha_label);
+      }
+
+      @SuppressWarnings("RestrictTo")
+      private void bind(int elevationDp) {
+        float elevation = ViewUtils.dpToPx(ElevationOverlaysDemoActivity.this, elevationDp);
+        int color =
+            overlayProvider.layerOverlayIfNeeded(overlayProvider.getColorSurface(), elevation);
+        int alphaPercent =
+            Math.round(overlayProvider.calculateOverlayAlphaFraction(elevation) * 100);
+
+        ViewCompat.setElevation(itemView, elevation);
+        itemView.setBackgroundColor(color);
+        dpLabelView.setText(String.format(Locale.getDefault(), "%02d dp", elevationDp));
+        alphaLabelView.setText(String.format(Locale.getDefault(), "%d%% On Surface", alphaPercent));
+      }
+    }
+  }
+}

catalog/java/io/material/catalog/elevation/res/layout/cat_elevation_overlays_activity.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2019 The Android Open Source Project
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  -->
+
+<androidx.recyclerview.widget.RecyclerView
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/recycler_view"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:paddingTop="8dp"
+    android:paddingBottom="16dp"
+    android:clipToPadding="false"/>

catalog/java/io/material/catalog/elevation/res/layout/cat_elevation_overlays_item.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2019 The Android Open Source Project
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  -->
+
+<FrameLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/elevation_overlay_frame"
+    android:layout_width="match_parent"
+    android:layout_height="150dp"
+    android:layout_marginTop="8dp"
+    android:layout_marginBottom="8dp"
+    android:layout_marginLeft="16dp"
+    android:layout_marginRight="16dp"
+    android:padding="16dp">
+
+  <TextView
+      android:id="@+id/elevation_overlay_dp_label"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"/>
+
+  <TextView
+      android:id="@+id/elevation_overlay_alpha_label"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_gravity="bottom"/>
+</FrameLayout>

catalog/java/io/material/catalog/elevation/res/values/strings.xml

@@ -23,6 +23,7 @@
     depicted (by default) using shadows. This demo illustrates the proper rendering of shadows at
     different elevations.
     </string>
+  <string name="cat_elevation_overlays_title" translatable="false">Elevation Overlays Demo</string>
   <string name="cat_increase_elevation">Increase Elevation</string>
   <string name="cat_decrease_elevation">Decrease Elevation</string>
   <string name="cat_elevation_fragment_level">"Elevation Spec: %1$d dp."</string>

catalog/java/io/material/catalog/feature/DemoActivity.java

@@ -79,6 +79,10 @@ protected boolean shouldShowDefaultDemoActionBar() {
     return true;
   }
 
+  protected boolean shouldShowDefaultDemoActionBarCloseButton() {
+    return true;
+  }
+
   @Override
   public AndroidInjector<Fragment> supportFragmentInjector() {
     return supportFragmentInjector;
@@ -101,6 +105,11 @@ private void initDemoActionBar() {
     if (shouldShowDefaultDemoActionBar()) {
       setSupportActionBar(toolbar);
       setDemoActionBarTitle(getSupportActionBar());
+
+      if (shouldShowDefaultDemoActionBarCloseButton()) {
+        getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_close_vd_theme_24px);
+        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
+      }
     } else {
       toolbar.setVisibility(View.GONE);
     }

catalog/java/io/material/catalog/tableofcontents/TocModule.java

@@ -27,6 +27,7 @@
 import io.material.catalog.checkbox.CheckBoxFragment;
 import io.material.catalog.chip.ChipFragment;
 import io.material.catalog.dialog.DialogDemoLandingFragment;
+import io.material.catalog.elevation.ElevationFragment;
 import io.material.catalog.fab.FabFragment;
 import io.material.catalog.font.FontFragment;
 import io.material.catalog.menu.MenuFragment;
@@ -55,6 +56,7 @@
       CheckBoxFragment.Module.class,
       ChipFragment.Module.class,
       DialogDemoLandingFragment.Module.class,
+      ElevationFragment.Module.class,
       FabFragment.Module.class,
       FontFragment.Module.class,
       MenuFragment.Module.class,

lib/build.gradle

@@ -43,6 +43,7 @@ def srcDirs = [
   'com/google/android/material/color',
   'com/google/android/material/dialog',
   'com/google/android/material/drawable',
+  'com/google/android/material/elevation',
   'com/google/android/material/expandable',
   'com/google/android/material/floatingactionbutton',
   'com/google/android/material/internal',

lib/java/com/google/android/material/color/MaterialColors.java

@@ -17,6 +17,7 @@
 
 import static androidx.annotation.RestrictTo.Scope.LIBRARY_GROUP;
 
+import android.content.Context;
 import android.graphics.Color;
 import androidx.annotation.AttrRes;
 import androidx.annotation.ColorInt;
@@ -42,14 +43,29 @@ public class MaterialColors {
   public static final float ALPHA_DISABLED_LOW = 0.12F;
 
   /**
-   * Returns the color int for the provided theme color attribute, or throws an {@link
-   * IllegalArgumentException} if the attribute is not set in the current theme.
+   * Returns the color int for the provided theme color attribute, using the {@link Context} of the
+   * provided {@code view}.
+   *
+   * @throws IllegalArgumentException if the attribute is not set in the current theme.
    */
   @ColorInt
   public static int getColor(View view, @AttrRes int colorAttributeResId) {
     return MaterialAttributes.resolveAttributeOrThrow(view, colorAttributeResId).data;
   }
 
+  /**
+   * Returns the color int for the provided theme color attribute.
+   *
+   * @throws IllegalArgumentException if the attribute is not set in the current theme.
+   */
+  @ColorInt
+  public static int getColor(
+      Context context, @AttrRes int colorAttributeResId, String errorMessageComponent) {
+    return MaterialAttributes.resolveAttributeOrThrow(
+            context, colorAttributeResId, errorMessageComponent)
+        .data;
+  }
+
   /**
    * Returns the color int for the provided theme color attribute, or the default value if the
    * attribute is not set in the current theme.

lib/java/com/google/android/material/dialog/res/values/themes_base_bridge.xml

@@ -78,6 +78,11 @@
     <item name="shapeAppearanceLargeComponent">
       @style/ShapeAppearance.MaterialComponents.LargeComponent
     </item>
+
+    <!-- Elevation Overlays -->
+    <!-- TODO: Enable once more components support elevation overlays. -->
+    <item name="elevationOverlaysEnabled">false</item>
+    <item name="elevationOverlaysColor">?attr/colorOnSurface</item>
   </style>
 
   <style name="Base.V14.Theme.MaterialComponents.Light.Dialog.Bridge" parent="Platform.MaterialComponents.Light.Dialog">
@@ -126,6 +131,10 @@
     <item name="shapeAppearanceLargeComponent">
       @style/ShapeAppearance.MaterialComponents.LargeComponent
     </item>
+
+    <!-- Elevation Overlays -->
+    <item name="elevationOverlaysEnabled">false</item>
+    <item name="elevationOverlaysColor">?attr/colorOnSurface</item>
   </style>
 
   <!-- Themes in the "Base.Theme" family vary based on the current platform