how to Customize the Contextual Action Bar using appCompat in material design

Question

MainActivity.java

I've implemented MultiChoiceModeListener in this class and below is the code:

on listView:

listView.setMultiChoiceModeListener(MainActivity.this);
listView.setChoiceMode(listView.CHOICE_MODE_MULTIPLE_MODAL);


    @Override
    public boolean onActionItemClicked(ActionMode arg0, MenuItem arg1) {
        switch (arg1.getItemId()) {
        case R.id.save:

            // Close CAB
            arg0.finish();
            return true;

        case R.id.saveto:


            // Close CAB
            arg0.finish();
            return true;
        default:
            return false;
        }
    }

    @Override
    public boolean onCreateActionMode(ActionMode arg0, Menu arg1) {
        arg0.getMenuInflater().inflate(R.menu.save_menu, arg1);
        return true;

    }

    @Override
    public void onDestroyActionMode(ActionMode arg0) {
        listadaptor.removeSelection();
    }

    @Override
    public boolean onPrepareActionMode(ActionMode arg0, Menu arg1) {
        return false;
    }

    @Override
    public void onItemCheckedStateChanged(ActionMode arg0, int arg1, long arg2,
            boolean arg3) {

        final int checkedCount = listView.getCheckedItemCount();
        arg0.setTitle(checkedCount + " "+getResources().getString(R.string.selected));
        listadaptor.toggleSelection(arg1);
    }

style.xml

 <style name="AppTheme.Base" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/White</item>
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="windowActionBar">false</item>
        <item name="actionModeStyle">@style/LStyled.ActionMode</item>
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>

    <style name="LStyled.ActionMode" parent="@style/Widget.AppCompat.ActionMode">
        <item name="background">@color/colorPrimary</item>
    </style>

    <style name="ActionBarThemeOverlay" parent="Theme.AppCompat.Light">
        <item name="android:textColorPrimary">#fff</item>
        <item name="colorControlNormal">#fff</item>
        <item name="colorControlHighlight">#3fff</item>
    </style>

    <style name="HeaderBar">
        <item name="android:background">#009688</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:textColor">#000</item>
    </style>

below is my screenshots:

this is my material design screen

actionmode material design screen

you can see both screenshots, in second screenshot, actionmode background is white and text color is also white.. i want to change it to first screenshots color which is in top.

This question has helped me a lot. Now I can put action mode over action bar and keep setMultiChoiceModeListener — pengguang001, Mar 17 '16 at 12:59

score 92 · Accepted Answer · answered Dec 17 '14 at 17:01

92

You can change the ActionMode background through attribute actionModeStyle:

<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
    ....
    ....
    <item name="actionModeStyle">@style/LStyled.ActionMode</item>
</style>

<style name="LStyled.ActionMode" parent="@style/Widget.AppCompat.ActionMode">
    <item name="background">@color/color_action_mode_bg</item>
</style>

You will of course need to define a color named color_action_mode_bg:

<color name="color_action_mode_bg">#009688</color>

There are other things you can change as well. Example:

<item name="titleTextStyle">...</item>
<item name="subtitleTextStyle">...</item>
<item name="height">...</item>

To change text color of SAVE and SAVETO, add the following to AppTheme.Base:

<item name="actionMenuTextColor">@color/color_action_mode_text</item>

answered Dec 17 '14 at 17:01

Vikram

51,313
11
93
122

i tried this also.. check my edited style.xml file. but still not working. – Sagar Maiyad Dec 18 '14 at 07:16
1

@MunimJi How do you start this `ActionMode`? Can you share that code? If you use `startActionMode(...)`, you'll need to change that to `startSupportActionMode(...)`. – Vikram Dec 18 '14 at 10:42
check my edited question. i added activity class code. – Sagar Maiyad Dec 18 '14 at 11:03
@MunimJi This is exactly how I have implemented multiple selection. Do you have multiple values-vXX folders? In that case, try moving `@style/LStyled.ActionMode` from ` – Vikram Dec 18 '14 at 11:15
@MunimJi One last try: add `android:theme="@style/AppTheme.Base"` to your `` tag in android-manifest. This will test if your activity is indeed getting the correct theme. If this works, we can trace back to the actual problem. – Vikram Dec 18 '14 at 11:32
did this..still not working.. you want see my whole style.xml file? – Sagar Maiyad Dec 18 '14 at 12:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/67224/discussion-between-vikram-and-munimji). – Vikram Dec 18 '14 at 12:21
@Vikram How to get title in white color.. `mode.setTitle("Select Items");` Select items should be in white color – Prabs Sep 03 '15 at 12:59
1

@Prabs You should be able to set `...` under `LStyled.ActionMode`. The value provided to `titleTextStyle` will be a style that inherits from `TextAppearance.AppCompat.Widget.ActionMode.Title`. Inside this style, override `android:textColor` and assign it `@android:color/white`. – Vikram Sep 05 '15 at 16:52
how to change background color and textcolor of overflow menu items in CAB? – Mihir Shah Sep 30 '15 at 07:05
@MihirShah What API version(s) are you working with? And how do you start the action mode? – Vikram Sep 30 '15 at 07:07
ActionMode actionMode = mActivity.startSupportActionMode(this); lollipop 5.1 api – Mihir Shah Sep 30 '15 at 07:12
@MihirShah Ok. What is your activity's parent theme? `Theme.AppCompat`? – Vikram Sep 30 '15 at 07:16
– Mihir Shah Sep 30 '15 at 07:18
– Mihir Shah Sep 30 '15 at 07:19
what's mistake here for overflowmenu? not able to change background color of overflow menu and items text color. default is dark gray background and white text. i need white background and black text color for overflow menu items – Mihir Shah Sep 30 '15 at 07:21
@MihirShah Let's talk here: [Link](http://chat.stackoverflow.com/rooms/90963/overflow-styling). – Vikram Sep 30 '15 at 07:24
@Vikram height attribute not working for me. Any one have idea how to increase the height of the actionMode? – Ajinkya Jun 16 '16 at 06:16

score 34 · Answer 2 · answered Dec 14 '14 at 08:05

34

use actionModeBackground in your AppTheme.Base style.

<item name="actionModeBackground">@color/colorPrimary </item> (or)
<item name="android:actionModeBackground">@color/colorPrimary </item>

answered Dec 14 '14 at 08:05

Dharani Kumar

1,981
3
13
18

1

Works on both Lollipop and KitKat. – Meanman Mar 02 '15 at 13:36
how to change background color and textcolor of overflow menu items in CAB? – Mihir Shah Sep 30 '15 at 07:01

score 0 · Answer 3 · answered Nov 16 '19 at 09:13

To change the Title Color of contextual action bar this was the only method that worked for me:

Write this in your activity's theme

<item name="actionModeStyle">@style/ContextualActionModeTheme</item>

Define the styles

<style name="ContextualActionModeTheme" parent="@style/Widget.AppCompat.ActionMode">
       <item name="titleTextStyle">@style/titleColor</item>
</style>
<style name="titleColor" parent="TextAppearance.AppCompat.Widget.ActionMode.Title">
       <item name="android:textColor">@color/your_color_here</item>
</style>

The title color of your contextual action bar would be changed.

how to Customize the Contextual Action Bar using appCompat in material design

3 Answers3

Linked