3

Background

I'm working on adding some material design style for an app, so I've chosen a different color for the action bar and status bar.

The problem

For this, the theme of the app is of "Theme.AppCompat.Light.DarkActionBar", and added this to hide the action bar as I need to handle it as a toolbar:

theme I've used:

<style name="AppTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="windowActionModeOverlay">true</item>
</style>

layout I've used :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/activity_app_list__toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        tools:ignore="UnusedAttribute"/>
</LinearLayout>

code:

  @Override
  protected void onCreate(Bundle savedInstanceState)
    {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    _toolbar=(Toolbar)findViewById(R.id.activity_app_list__toolbar);
    setSupportActionBar(_toolbar);
    }

  @Override
  public boolean onCreateOptionsMenu(Menu menu)
    {
    getMenuInflater().inflate(R.menu.menu_main,menu);
    return super.onCreateOptionsMenu(menu);
    }

and for some reason I get this behavior:

  1. sub menus of action items and of the overflow item are black.
  2. when clicking the search action item , the overflow item there is white.

I'd like to customize those popup menus so that they will be consistent.

What I've tried

I've tried using this:

<item name="actionOverflowMenuStyle">@style/OverflowMenu</item>

...
<style name="OverflowMenu" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
</style>

But it didn't help at all.

The question

Does anyone know how to handle this? Is this a bug in the support library?

For me it looks this way, so I've reported about it here, including a sample project.

android developer
  • 114,585
  • 152
  • 739
  • 1,270

1 Answers1

3

You can customize overflow menu with the popupTheme attribute:

<android.support.v7.widget.Toolbar
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="@dimen/triple_height_toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Original answer was missing some points:

First, the toolbar should have: 

  <android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="?attr/actionBarTheme"/>

For light popup, use this:

  <style name="AppTheme.Light" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="actionBarTheme">@style/AppTheme.ActionBarTheme.Light</item>
    <item name="actionBarPopupTheme">@style/ThemeOverlay.AppCompat.Light</item>
  </style>

  <style name="AppTheme.ActionBarTheme.Light" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlActivated">#FFffffff</item>
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
  </style>

For dark popup, use this:

  <style name="AppTheme.Light" parent="@style/Theme.AppCompat.NoActionBar">
    <item name="actionBarPopupTheme">@style/ThemeOverlay.AppCompat.Dark</item>
    <item name="actionBarTheme">@style/AppTheme.ActionBarTheme.Dark</item>
  </style>

  <style name="AppTheme.ActionBarTheme.Dark" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlActivated">#FFffffff</item>
    <item name="android:textColorPrimary">#FFffffff</item>
  </style>
android developer
  • 114,585
  • 152
  • 739
  • 1,270
Mattia Maestrini
  • 32,270
  • 15
  • 87
  • 94
  • This one worked. Any idea about the cause of this inconsistent behavior ? Also, suppose I want them all to be black, what should be done? And does it also work for sub menus ? – android developer May 10 '15 at 08:48
  • The new toolbar uses `app:popupTheme` to style overflow menu, there is no inconsistency. If you want black overflow menu you should use `@style/ThemeOverlay.AppCompat`. It should also style sub menu. – Mattia Maestrini May 10 '15 at 09:05
  • using the "@style/ThemeOverlay.AppCompat" doesn't work, as it won't affect the overflow menu when using the actionMode (for me it's still white in this case). This is why I call it inconsistency, because one overflow menu is dark and another is light. – android developer May 10 '15 at 16:51
  • You can try to use `@style/ThemeOverlay.AppCompat.Dark` – Mattia Maestrini May 10 '15 at 16:54
  • 1
    Still black for overflow of search action item, yet white for actionMode. I also wonder how to change the color myself. I couldn't even find how to change the color of the text-caret of the search item. – android developer May 10 '15 at 17:48
  • Can you post the screenshots of the two menus? – Mattia Maestrini May 12 '15 at 06:18
  • I think I've found the solution. just use "actionBarPopupTheme" . May I edit your answer? I will first perform some more tests when I get back home – android developer May 12 '15 at 06:36
  • Sure if `actionBarPopupTheme` resolve the issue, you can edit the answer without any problem. – Mattia Maestrini May 12 '15 at 06:58
  • Done. BTW, as I've read somewhere, it's ok to use "android:theme" instead (for the toolbar). – android developer May 12 '15 at 19:25