Difficult to style Toolbar action mode correctly for AppCompat in Android 4

Question

In my Android 5, by using the following theme

themes.xml

<style name="Theme.MyApp.Light.DarkActionBar" parent="Theme.AppCompat.Light.NoActionBar">

and the following toolbar

toolbar.xml

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/background_material_dark"
    android:elevation="4dp"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

</android.support.v7.widget.Toolbar>

This is what I'm getting, when my ListViewFragment goes into action mode via

this.getListView().setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL);
this.getListView().setMultiChoiceModeListener(new ModeCallback());

I want to have exact look and feel for my Android 4.

If we didn't do anything in Android 4, toolbar in action mode will look very wrong.

It seems like bug in Android support library : https://code.google.com/p/android/issues/detail?id=143419&thanks=143419&ts=1423493133

I had referred to Styling ActionMode ActionBar in Android 5.0 Lollipop (with AppCompat)

<style name="Theme.MyApp.Light.DarkActionBar" parent="Theme.AppCompat.Light.NoActionBar">

    <item name="actionModeBackground">@color/background_material_dark</item>
    <item name="actionBarPopupTheme">@style/ThemeOverlay.AppCompat.Light</item>

This is what I get.

1. Text color isn't right
2. There is no green separator.
3. Back icon color isn't right.

I further follow Unable to style action mode when using Toolbar

<style name="Widget.ActionMode" parent="@style/Widget.AppCompat.ActionMode">
    <item name="background">@color/background_material_dark</item>
    <item name="backgroundSplit">@color/accent_material_light</item>
    <item name="titleTextStyle">@style/TextAppearance.AppCompat.Widget.ActionMode.Title.Inverse</item>
    <item name="subtitleTextStyle">@style/TextAppearance.AppCompat.Widget.ActionMode.Subtitle.Inverse</item>
</style>

<style name="Theme.MyApp.Light.DarkActionBar" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="actionModeStyle">@style/Widget.ActionMode</item>
    <item name="actionModeCloseDrawable">@drawable/ic_arrow_back_white_24dp</item>

It is getting better (Correct color for back icon)

However, I'm still facing problem.

1. Text color isn't right
2. There is no green separator.

I was wondering, what is the correct approach to get correct look n feel as in Android 5's ?

Answer 1

I had a similar problem with AppCompat v22.1.1 and came up with the following solution.

Step 1. Your theme should have Theme.AppCompat.Light.DarkActionBar as parent like so

<style name="AppTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">

    <!-- For same effect as Theme.AppCompat.Light.NoActionBar -->
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

Step 2. Add the following line to your ToolBar.

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

You don't have to use app:theme in the latest AppCompat library (22.1.1).

With the above solution, I'm able to obtain white icons and text in my Toolbar and ActionMode. In other solutions, the icons and text in the Toolbar are whitened but Popups, Dialogs, etc. used Dark theme, which looks really weird unless you actually want it. I hope this helps.