[Navigation] Add itemTextAppearanceActiveBoldEnabled attr

Resolves #3191 Resolves #3293 PiperOrigin-RevId: 539977391
material-components · Jun 14, 2023 · 022e217 · 022e217
1 parent 4d80434
commit 022e217
Show file tree

Hide file tree

Showing 23 changed files with 214 additions and 37 deletions.
diff --git a/catalog/java/io/material/catalog/bottomnav/BottomNavigationDemoFragment.java b/catalog/java/io/material/catalog/bottomnav/BottomNavigationDemoFragment.java
@@ -34,6 +34,7 @@
 import com.google.android.material.badge.BadgeDrawable;
 import com.google.android.material.badge.BadgeDrawable.BadgeGravity;
 import com.google.android.material.bottomnavigation.BottomNavigationView;
+import com.google.android.material.materialswitch.MaterialSwitch;
 import com.google.android.material.navigation.NavigationBarView.OnItemSelectedListener;
 import io.material.catalog.feature.DemoFragment;
 import io.material.catalog.feature.DemoUtils;
@@ -193,6 +194,15 @@ public void onItemSelected(AdapterView<?> parent, View view, int position, long
           @Override
           public void onNothingSelected(AdapterView<?> parent) {}
         });
+
+    MaterialSwitch materialSwitch = view.findViewById(R.id.bold_text_switch);
+    materialSwitch.setChecked(true);
+    materialSwitch.setOnCheckedChangeListener(
+        (buttonView, isChecked) -> {
+          for (BottomNavigationView bn : bottomNavigationViews) {
+            bn.setItemTextAppearanceActiveBoldEnabled(isChecked);
+          }
+        });
   }
 
   private void initAddIncreaseBadgeNumberButton(Button incrementBadgeNumberButton) {

diff --git a/catalog/java/io/material/catalog/bottomnav/res/layout/cat_bottom_nav_fragment.xml b/catalog/java/io/material/catalog/bottomnav/res/layout/cat_bottom_nav_fragment.xml
@@ -102,7 +102,22 @@
             android:layout_width="wrap_content"
             android:layout_height="48dp"/>
       </LinearLayout>
-
+      <LinearLayout
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal">
+        <TextView
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:layout_gravity="end|center_vertical"
+          android:labelFor="@+id/bold_text_switch"
+          android:text="@string/cat_bottom_nav_label_active_bold" />
+        <com.google.android.material.materialswitch.MaterialSwitch
+          android:id="@+id/bold_text_switch"
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:layout_marginStart="12dp" />
+      </LinearLayout>
     </LinearLayout>
   </ScrollView>
   <FrameLayout

diff --git a/catalog/java/io/material/catalog/bottomnav/res/values/strings.xml b/catalog/java/io/material/catalog/bottomnav/res/values/strings.xml
@@ -57,6 +57,7 @@
   <string name="cat_bottom_nav_badge_gravity_bottom_start">Bottom start</string>
 
   <string name="cat_bottom_nav_badge_gravity_spinner_label">Badge gravity</string>
+  <string name="cat_bottom_nav_label_active_bold" translatable="false">Bold active label</string>
 
 </resources>
 

diff --git a/catalog/java/io/material/catalog/navigationdrawer/NavigationDrawerDemoActivity.java b/catalog/java/io/material/catalog/navigationdrawer/NavigationDrawerDemoActivity.java
@@ -29,6 +29,7 @@
 import androidx.annotation.Nullable;
 import androidx.drawerlayout.widget.DrawerLayout;
 import androidx.drawerlayout.widget.DrawerLayout.SimpleDrawerListener;
+import com.google.android.material.materialswitch.MaterialSwitch;
 import com.google.android.material.navigation.NavigationView;
 import io.material.catalog.feature.DemoActivity;
 
@@ -89,6 +90,14 @@ public void onDrawerClosed(@NonNull View drawerView) {
     view.findViewById(R.id.show_end_drawer_gravity)
         .setOnClickListener(v -> drawerLayout.openDrawer(navigationViewEnd));
 
+    MaterialSwitch materialSwitch = view.findViewById(R.id.bold_text_switch);
+    materialSwitch.setChecked(true);
+    materialSwitch.setOnCheckedChangeListener(
+        (buttonView, isChecked) -> {
+          navigationViewStart.setItemTextAppearanceActiveBoldEnabled(isChecked);
+          navigationViewEnd.setItemTextAppearanceActiveBoldEnabled(isChecked);
+        });
+
     return view;
   }
 

diff --git a/catalog/java/io/material/catalog/navigationdrawer/res/layout/cat_navigationdrawer.xml b/catalog/java/io/material/catalog/navigationdrawer/res/layout/cat_navigationdrawer.xml
@@ -66,6 +66,23 @@
         android:layout_marginTop="32dp"
         android:text="@string/cat_navigationdrawer_show_end_drawer" />
 
+      <LinearLayout
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal">
+        <TextView
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:layout_gravity="end|center_vertical"
+          android:labelFor="@+id/bold_text_switch"
+          android:text="@string/cat_navigationdrawer_label_active_bold" />
+        <com.google.android.material.materialswitch.MaterialSwitch
+          android:id="@+id/bold_text_switch"
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:layout_marginStart="12dp" />
+      </LinearLayout>
+
     </LinearLayout>
   </androidx.coordinatorlayout.widget.CoordinatorLayout>
 
@@ -75,6 +92,7 @@
       android:layout_height="match_parent"
       android:layout_gravity="start"
       app:headerLayout="@layout/cat_navigationdrawer_header"
+      app:itemTextAppearanceActiveBoldEnabled="true"
       app:menu="@menu/cat_navigationdrawer_menu"/>
 
   <com.google.android.material.navigation.NavigationView
@@ -83,6 +101,7 @@
     android:layout_height="match_parent"
     android:layout_gravity="end"
     app:headerLayout="@layout/cat_navigationdrawer_header"
+    app:itemTextAppearanceActiveBoldEnabled="true"
     app:menu="@menu/cat_navigationdrawer_menu"/>
 
 </androidx.drawerlayout.widget.DrawerLayout>
diff --git a/catalog/java/io/material/catalog/navigationdrawer/res/values/strings.xml b/catalog/java/io/material/catalog/navigationdrawer/res/values/strings.xml
@@ -34,6 +34,7 @@
           description="Label for opening the navigation drawer at the end of the screen. [CHAR_LIMIT=100]">
     Open End Drawer
   </string>
+  <string name="cat_navigationdrawer_label_active_bold" translatable="false">Bold active label</string>
   <string name="cat_navigationdrawer_header_mail">Mail</string>
   <string name="cat_navigationdrawer_header_labels">Labels</string>
   <string name="cat_navigationdrawer_label">Label</string>

diff --git a/catalog/java/io/material/catalog/navigationrail/NavigationRailDemoFragment.java b/catalog/java/io/material/catalog/navigationrail/NavigationRailDemoFragment.java
@@ -35,6 +35,7 @@
 import androidx.core.math.MathUtils;
 import com.google.android.material.badge.BadgeDrawable;
 import com.google.android.material.badge.BadgeDrawable.BadgeGravity;
+import com.google.android.material.materialswitch.MaterialSwitch;
 import com.google.android.material.navigation.NavigationBarView.OnItemSelectedListener;
 import com.google.android.material.navigationrail.NavigationRailView;
 import io.material.catalog.feature.DemoFragment;
@@ -187,6 +188,12 @@ public void onItemSelected(AdapterView<?> parent, View view, int position, long
           @Override
           public void onNothingSelected(AdapterView<?> parent) {}
         });
+
+    MaterialSwitch materialSwitch = view.findViewById(R.id.bold_text_switch);
+    materialSwitch.setChecked(true);
+    materialSwitch.setOnCheckedChangeListener(
+        (buttonView, isChecked) ->
+            navigationRailView.setItemTextAppearanceActiveBoldEnabled(isChecked));
   }
 
   private void initAddIncreaseBadgeNumberButton(Button incrementBadgeNumberButton) {

diff --git a/catalog/java/io/material/catalog/navigationrail/res/layout/cat_navigation_rail_fragment.xml b/catalog/java/io/material/catalog/navigationrail/res/layout/cat_navigation_rail_fragment.xml
@@ -124,7 +124,22 @@
             android:layout_width="wrap_content"
             android:layout_height="48dp"/>
       </LinearLayout>
-
+      <LinearLayout
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal">
+        <TextView
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:layout_gravity="end|center_vertical"
+          android:labelFor="@+id/bold_text_switch"
+          android:text="@string/cat_navigation_rail_label_active_bold" />
+        <com.google.android.material.materialswitch.MaterialSwitch
+          android:id="@+id/bold_text_switch"
+          android:layout_width="wrap_content"
+          android:layout_height="wrap_content"
+          android:layout_marginStart="12dp" />
+      </LinearLayout>
     </LinearLayout>
   </ScrollView>
 </LinearLayout>
diff --git a/catalog/java/io/material/catalog/navigationrail/res/values/strings.xml b/catalog/java/io/material/catalog/navigationrail/res/values/strings.xml
@@ -93,6 +93,8 @@
           description="Label for the option that will cause badges to be positioned at the end, below the icon. [CHAR_LIMIT=50]">Bottom end</string>
   <string name="cat_navigation_rail_badge_gravity_bottom_start"
           description="Label for the option that will cause badges to be positioned at starting, below the icon. [CHAR_LIMIT=50]">Bottom start</string>
+  <string name="cat_navigation_rail_label_active_bold"
+          description="Label for controlling whether the active label is bold. [CHAR_LIMIT=50]" translatable="false">Bold active label</string>
 
   <string name="cat_navigation_rail_alarm"
           description="Label for an alarm icon. [CHAR_LIMIT=50]">Alarm</string>

diff --git a/docs/components/BottomNavigation.md b/docs/components/BottomNavigation.md
@@ -282,13 +282,14 @@ The following is an anatomy diagram for the bottom navigation bar:
 
 #### Text label attributes
 
-**Element**               | **Attribute**                          | **Related methods**                                                 | **Default value**
-------------------------- | -------------------------------------- | ------------------------------------------------------------------- | -----------------
-**Text label**            | `android:title` in the `menu` resource | N/A                                                                 | N/A
-**Color (inactive)**      | `app:itemTextColor`                    | `setItemTextColor`<br/>`getItemTextColor`                           | `?attr/colorOnSurfaceVariant` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/res/color/m3_navigation_bar_item_with_indicator_label_tint.xml))
-**Color (active)**        | "                                      | "                                                                   | `?attr/colorOnSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/res/color/m3_navigation_bar_item_with_indicator_label_tint.xml))
-**Typography (inactive)** | `app:itemTextAppearanceInactive`       | `setItemTextAppearanceInactive`<br/>`getItemTextAppearanceInactive` | `?attr/textAppearanceTitleSmall`
-**Typography (active)**   | `app:itemTextAppearanceActive`         | `setItemTextAppearanceActive`<br/>`getItemTextAppearanceActive`     | `?attr/textAppearanceTitleSmall`
+| **Element**               | **Attribute**                             | **Related methods**                                                 | **Default value**                                                                                                                                                                                                                                                           |
+|---------------------------|-------------------------------------------|---------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **Text label**            | `android:title` in the `menu` resource    | N/A                                                                 | N/A                                                                                                                                                                                                                                                                         |
+| **Color (inactive)**      | `app:itemTextColor`                       | `setItemTextColor`<br/>`getItemTextColor`                           | `?attr/colorOnSurfaceVariant` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/res/color/m3_navigation_bar_item_with_indicator_label_tint.xml)) |
+| **Color (active)**        | "                                         | "                                                                   | `?attr/colorOnSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/res/color/m3_navigation_bar_item_with_indicator_label_tint.xml))        |
+| **Typography (inactive)** | `app:itemTextAppearanceInactive`          | `setItemTextAppearanceInactive`<br/>`getItemTextAppearanceInactive` | `?attr/textAppearanceTitleSmall`                                                                                                                                                                                                                                            |
+| **Typography (active)**   | `app:itemTextAppearanceActive`            | `setItemTextAppearanceActive`<br/>`getItemTextAppearanceActive`     | `?attr/textAppearanceTitleSmall`                                                                                                                                                                                                                                            |
+| **Typography (active)**   | `app:itemTextAppearanceActiveBoldEnabled` | `setItemTextAppearanceActiveBoldEnabled`                            | `true`                                                                                                                                                                                                                                                                      |
 
 #### Styles
 

diff --git a/docs/components/NavigationDrawer.md b/docs/components/NavigationDrawer.md
@@ -290,11 +290,12 @@ Element                | Attribute(s)
 
 ### Text attributes
 
-Element        | Attribute                | Related method(s)                        | Default value
--------------- | ------------------------ | ---------------------------------------- | -------------
-**Color**      | `app:itemTextColor`      | `setItemTextColor`<br>`getItemTextColor` | `?attr/colorOnSecondaryContainer` when active else `?attr/colorOnSurfaceVariant`
-**Typography** | `app:itemTextAppearance` | `setItemTextAppearance`                  | `?attr/textAppearanceLabelLarge`
-**Max lines**  | `app:itemMaxLines`       | `setItemMaxLines`<br>`getItemMaxLines`   | `1`
+| Element                 | Attribute                                 | Related method(s)                        | Default value                                                                    |
+|-------------------------|-------------------------------------------|------------------------------------------|----------------------------------------------------------------------------------|
+| **Color**               | `app:itemTextColor`                       | `setItemTextColor`<br>`getItemTextColor` | `?attr/colorOnSecondaryContainer` when active else `?attr/colorOnSurfaceVariant` |
+| **Typography**          | `app:itemTextAppearance`                  | `setItemTextAppearance`                  | `?attr/textAppearanceLabelLarge`                                                 |
+| **Typography (active)** | `app:itemTextAppearanceActiveBoldEnabled` | `setItemTextAppearanceActiveBoldEnabled` | `true`                                                                           |
+| **Max lines**           | `app:itemMaxLines`                        | `setItemMaxLines`<br>`getItemMaxLines`   | `1`                                                                              |
 
 ### Icon attributes
 

diff --git a/docs/components/NavigationRail.md b/docs/components/NavigationRail.md
@@ -330,13 +330,14 @@ for more attributes.
 
 #### Text label attributes
 
-**Element**               | **Attribute**                          | **Related methods**                                                 | **Default value**
-------------------------- | -------------------------------------- | ------------------------------------------------------------------- | -----------------
-**Text label**            | `android:title` in the `menu` resource | N/A                                                                 | N/A
-**Color (inactive)**      | `app:itemTextColor`                    | `setItemTextColor`<br/>`getItemTextColor`                           | `?attr/colorOnSurfaceVariant`
-**Color (active)**        | `app:itemTextColor`                    | `setItemTextColor`<br/>`getItemTextColor`                           | `?attr/colorOnSurface`
-**Typography (inactive)** | `app:itemTextAppearanceInactive`       | `setItemTextAppearanceInactive`<br/>`getItemTextAppearanceInactive` | `?attr/textAppearanceTitleSmall`
-**Typography (active)**   | `app:itemTextAppearanceActive`         | `setItemTextAppearanceActive`<br/>`getItemTextAppearanceActive`     | `?attr/textAppearanceTitleSmall`
+| **Element**               | **Attribute**                             | **Related methods**                                                 | **Default value**                |
+|---------------------------|-------------------------------------------|---------------------------------------------------------------------|----------------------------------|
+| **Text label**            | `android:title` in the `menu` resource    | N/A                                                                 | N/A                              |
+| **Color (inactive)**      | `app:itemTextColor`                       | `setItemTextColor`<br/>`getItemTextColor`                           | `?attr/colorOnSurfaceVariant`    |
+| **Color (active)**        | `app:itemTextColor`                       | `setItemTextColor`<br/>`getItemTextColor`                           | `?attr/colorOnSurface`           |
+| **Typography (inactive)** | `app:itemTextAppearanceInactive`          | `setItemTextAppearanceInactive`<br/>`getItemTextAppearanceInactive` | `?attr/textAppearanceTitleSmall` |
+| **Typography (active)**   | `app:itemTextAppearanceActive`            | `setItemTextAppearanceActive`<br/>`getItemTextAppearanceActive`     | `?attr/textAppearanceTitleSmall` |
+| **Typography (active)**   | `app:itemTextAppearanceActiveBoldEnabled` | `setItemTextAppearanceActiveBoldEnabled`                            | `true`                           |
 
 #### Styles
 

diff --git a/lib/java/com/google/android/material/internal/NavigationMenuItemView.java b/lib/java/com/google/android/material/internal/NavigationMenuItemView.java
@@ -61,6 +61,8 @@ public class NavigationMenuItemView extends ForegroundLinearLayout implements Me
 
   boolean checkable;
 
+  boolean isBold = true;
+
   private final CheckedTextView textView;
 
   private FrameLayout actionArea;
@@ -127,6 +129,11 @@ public void initialize(@NonNull MenuItemImpl itemData, int menuType) {
     adjustAppearance();
   }
 
+  public void initialize(@NonNull MenuItemImpl itemData, boolean isBold) {
+    this.isBold = isBold;
+    initialize(itemData, 0);
+  }
+
   private boolean shouldExpandActionArea() {
     return itemData.getTitle() == null
         && itemData.getIcon() == null
@@ -210,7 +217,8 @@ public void setChecked(boolean checked) {
     refreshDrawableState();
     textView.setChecked(checked);
     // TODO(b/246765947): Use component tokens to control font weight
-    textView.setTypeface(textView.getTypeface(), checked ? Typeface.BOLD : Typeface.NORMAL);
+    textView.setTypeface(
+        textView.getTypeface(), checked && isBold ? Typeface.BOLD : Typeface.NORMAL);
   }
 
   @Override