How can I customize the Action Mode's color and text?

Question

The default action mode (3.0 and up) comes with a green theme and a 'Done' button on the left side. How can I customize these?

Thanks

score 35 · Accepted Answer · edited Aug 07 '13 at 07:58

35

This is the style used for any ActionMode, I pulled it from the SDK. You'll need to create your own style to customize it. It's really easy to do. If you've never done anything like this before, you should read through this post on customizing the ActionBar. It explains everything you'll need to know.

    <style name="Widget.ActionMode">
    <item name="android:background">?android:attr/actionModeBackground</item>
    <item name="android:backgroundSplit">?android:attr/actionModeSplitBackground</item>
    <item name="android:height">?android:attr/actionBarSize</item>
    <item name="android:titleTextStyle">@android:style/TextAppearance.Widget.ActionMode.Title</item>
    <item name="android:subtitleTextStyle">@android:style/TextAppearance.Widget.ActionMode.Subtitle</item>
    </style>

edited Aug 07 '13 at 07:58

mmBs

8,421
6
38
46

answered Dec 27 '11 at 00:34

adneal

30,484
10
122
151

Do you know the name of the attribute or style which sets the small background around the title and subtitle? – Catalin Morosan May 19 '12 at 10:50
I am using a custom theme in my application, and as an item I added the following: @drawable/cab, which is the background that I define for the CAB when in split mode, but the bottom part still remains with the default look. Do you know what might be the problem or am I doing something wrong? – Sandra Mar 20 '13 at 13:01
3

Can you please tell me how to use this in app theme? My style.xml: http://pastie.org/9261136 – berserk Jun 05 '14 at 14:07
1

What's the "backgroundSplit" for? – android developer Mar 13 '15 at 15:57

score 26 · Answer 2 · answered Feb 18 '14 at 11:58

26

Solution for my application

<style name="AppTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionModeBackground">@color/bg_action_bar</item>
</style>

answered Feb 18 '14 at 11:58

PleaseTwo

368
4
6

Can you tell me what to do for changing the tick image and the seperator? – berserk Jun 05 '14 at 14:14
1

For supporting pre and post-lollipop devices, you need to add also: @color/bg_action_bar – Eduard Apr 29 '15 at 20:54

score 15 · Answer 3 · answered Feb 27 '17 at 09:40

Worked on my project

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="actionModeStyle">@style/CustomActionModeStyle</item>
 </style>

Custom ActionMode style

<style name="CustomActionModeStyle" parent="Base.Widget.AppCompat.ActionMode">
        <item name="background">@color/color_primary</item>
        <item name="titleTextStyle">@style/CustomeActionModeTextStyle</item>
</style>

Custom Title ActionMode

<style name="CustomeActionModeTextStyle" parent="TextAppearance.AppCompat.Widget.ActionMode.Title">
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">@color/color_primaryText</item>
</style>

score 11 · Answer 4 · answered Apr 23 '15 at 15:09

with this code you can change the Background color of Action mode and also change DONE image. Note: you can add your text in your image too! in res/styles.xml:

<style name="AppTheme" parent="android:Theme.Holo">
<item name="android:actionModeBackground">@android:color/white</item>
<item name="android:actionModeCloseDrawable">@drawable/plus</item>

score 2 · Answer 5 · answered Jul 23 '13 at 08:43

Here is my approach with Java code:

private void customizeActionModeCloseButton(String title, int iconID) {
          int buttonId = Resources.getSystem().getIdentifier("action_mode_close_button", "id", "android");    
          View v = findViewById(buttonId);
          if (v == null) {
             buttonId = R.id.abs__action_mode_close_button;
             v = findViewById(buttonId);
          }
          if (v == null)
             return;
          LinearLayout ll = (LinearLayout) v;
          if (ll.getChildCount() > 1 && ll.getChildAt(1) != null) {
             //custom icon
             ImageView img = (ImageView) ll.getChildAt(0);
             img.setImageResource(iconID);
             //custom text
             TextView tv = (TextView) ll.getChildAt(1);
             tv.setText(title);
             tv.setTextColor(Color.WHITE);
          }
       }

score 2 · Answer 6 · answered Dec 30 '11 at 06:52

You can't really customize it this way because the attribute actionModeStyle is introduced at API level 14. For API levels 11 to 13 you are out of luck.

For API level 14, you can change the style by setting the android:actionModeStyle in your theme.

score 1 · Answer 7 · answered Oct 10 '16 at 22:54

Updated answer for both pre- and post-Lollipop devices. You must remove the android: prefix to get it to work on Lollipop+ devices, like so:

styles.xml:

<style name="Widget.ActionMode">
    <item name="android:background">?android:attr/actionModeBackground</item>
    <item name="android:backgroundSplit">?android:attr/actionModeSplitBackground</item>
    <item name="android:height">?android:attr/actionBarSize</item>
    <item name="android:titleTextStyle">@android:style/TextAppearance.Widget.ActionMode.Title</item>
    <item name="android:subtitleTextStyle">@android:style/TextAppearance.Widget.ActionMode.Subtitle</item>
</style>

v21/styles.xml:

<style name="Widget.ActionMode">
    <item name="background">?android:attr/actionModeBackground</item>
    <item name="backgroundSplit">?android:attr/actionModeSplitBackground</item>
    <item name="height">?android:attr/actionBarSize</item>
    <item name="titleTextStyle">@android:style/TextAppearance.Widget.ActionMode.Title</item>
    <item name="subtitleTextStyle">@android:style/TextAppearance.Widget.ActionMode.Subtitle</item>
</style>

I'd also recommend having your style with parent="@style/Widget.AppCompat.ActionMode" set, so you inherit the attributes you don't care about overriding.

score 0 · Answer 8 · answered Jan 08 '15 at 05:27

Here's an AppCompat (i.e. using startSupportActionMode) solution for temporarily customizing (customising) the CAB done button's image. Temporarily since it's desirable to change it back to use it's typical image so that when Text Selection kicks in it looks appropriate.

https://gist.github.com/coreform/36ed98f98668f2e90c6a

How can I customize the Action Mode's color and text?

8 Answers8

Linked

Related