Customize the overflow button color in Android

When the main toolbar is full, some actions appear in its overflow menu. In Android SDK 12 and later, Jetpack Compose renders the toolbar, so there’s no MainToolbar view or overflow icon to tint programmatically. Instead, the overflow button takes the color of the toolbar icons it holds, and the overflow menu takes its colors from the main toolbar style.

Changing the colors with a theme

Set the colors in your app theme:

• pspdf__iconsColor in pspdf__actionBarIconsStyle colors the overflow button, along with the other toolbar icons and the icons in the menu.
• android:colorBackground in the pspdf__toolbarPopupTheme of pspdf__mainToolbarStyle colors the menu background.
• pspdf__textColor in pspdf__mainToolbarStyle colors the menu text.

<style name="MyApp.Theme" parent="PSPDFKit.Theme.Default">
    <item name="pspdf__actionBarIconsStyle">@style/MyApp.ActionBarIcons</item>
    <item name="pspdf__mainToolbarStyle">@style/MyApp.MainToolbar</item>
</style>

<style name="MyApp.ActionBarIcons" parent="PSPDFKit.ActionBarIcons">
    <item name="pspdf__iconsColor">@color/overflow_button_color</item>
</style>

<style name="MyApp.MainToolbar" parent="PSPDFKit.MainToolbar">
    <item name="pspdf__textColor">@color/overflow_menu_text_color</item>
    <item name="pspdf__toolbarPopupTheme">@style/MyApp.ToolbarPopupTheme</item>
</style>

<style name="MyApp.ToolbarPopupTheme" parent="PSPDFKit.ToolbarPopupTheme">
    <item name="android:colorBackground">@color/overflow_menu_background_color</item>
</style>

Changing the colors from code

You can also set the colors at runtime with setColorScheme(UiColorScheme) on PdfActivity or PdfUiFragment. The overflow button and the other toolbar icons take mainToolbar.iconColor, the menu background takes mainToolbar.popup.backgroundColor, and the menu text takes mainToolbar.textColor:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val scheme = UiColorScheme.fromXmlTheme(this)
    setColorScheme(
        scheme.copy(
            mainToolbar = scheme.mainToolbar.copy(
                iconColor = Color.White,
                textColor = Color.White,
                popup = ToolbarPopupColors(backgroundColor = Color(0xFF1E2A44)),
            ),
        ),
    )
}

For a toolbar rendered by your own Compose host, pass the color scheme through NutrientTheme or the toolbar’s colors parameter. See toolbar styling for the complete theming options and theming from code for more about color schemes.

If you aren’t yet using a custom theme, refer to our guide on defining a custom theme for more information.