How to style drawer menu options in Android Studio - headers for group not stylizing

74 Views Asked by At

[Edited 10/5/2023]

I have a drawer menu - swipe the screen from the left and it appears with a list of menu headers each having beneath it 3-5 sub-menu items, each sub-menu item is clickable. I cannot get the main header items to stand out - e.g. a different background color, different font size and different font color. For a simple example, take the group header "Manage Songs" (@+id/menu_item_manage_songs_header) and sub-menu items being Add New Songs, Edit Songs, Open Song, Search Song

I wish to get the group header "Manage Songs" to stand out but cannot locate the file/code where this is currently taking place. Here is DrawerLayout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawer_layout"
    tools:openDrawer="start">
    
    ...

    <!-- Navigation Drawer -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_menu"
         />
</androidx.drawerlayout.widget.DrawerLayout>

Here is my drawer_menu.xml:

<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Header: Manage Songs -->
    <item
        android:id="@+id/menu_item_manage_songs_header"
        android:title="Manage Songs"
        android:enabled="false"
        app:showAsAction="always"
        app:actionLayout="@layout/custom_header_layout"
        android:itemTextAppearance="@style/GroupHeaderStyle">
        <menu>
            <group android:id="@+id/group_songs">
                <item
                    android:id="@+id/menu_item_add_new_song"
                    android:title="Add New Song"
                    android:onClick="onNavigationItemSelected" />
                <item
                    android:id="@+id/menu_item_edit_songs"
                    android:title="Edit Songs"
                    android:onClick="onNavigationItemSelected" />
                <item
                    android:id="@+id/menu_item_open_song"
                    android:title="Open Song"
                    android:onClick="onNavigationItemSelected" />
                <item
                    android:id="@+id/menu_item_search_songs"
                    android:title="Search Songs"
                    android:onClick="onNavigationItemSelected" />
            </group>
        </menu>
    </item>
    ...

</menu>

Thank you in advance - this seems straight forward. This is what I have tried: (1) in my java page setting bg color

  • declaring under class: MenuItem GROUP_SONGS;
  • initializing in onCreate(): GROUP_SONGS = (MenuItem) navigationView.getMenu().findItem(R.id.menu_item_manage_songs_header);
  • trying to set values - I can change the text for the Title - this works: GROUP_SONGS.setTitle("Changed [1]");
  • but this doesn't work: GROUP_SONGS.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20); (I know that setTextSize is not part of the MenuItem class...)

(2) set the style in themes.xml

    <style name="GroupHeaderStyle">
        <item name="android:background">@color/light_orange</item>
        <item name="android:textSize">22sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

and calling this using itemTextAppearance:

    <item
        android:id="@+id/menu_item_manage_songs_header"
        android:title="Manage Songs"
        android:enabled="false"
        app:showAsAction="always"
        android:itemTextAppearance="@style/GroupHeaderStyle">
1

There are 1 best solutions below

1
Jordy On

The question is not very well understood but to perform actions on each of the menu items you will need to implement a listener.

public class MainActivity extends AppCompatActivity implements  NavigationView.OnNavigationItemSelectedListener{

    @Override
    protected void onCreate(Bundle 
    savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity);
    }
  
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
   
    int id = item.getItemId();
    switch(id){ 
    case R.id.search:
   //action
    break;
    }
    return true;
    }
    }