Style ActionMode on Android
Last week, we released a new feature to our customers in our Android App: Boards, which lets our customers group their favourite items. Since users can save up to 500 items for each board, we wanted them to be able to edit the items in batches. In our design, when the user clicks the ‘edit’ button or long presses one Saved Item, the screen transitions into the edit mode. In this mode, the user can select multiple products to add/remove in one batch operation. During development, we found that ActionMode is a perfect fit for this purpose. Here is an animation showing the transition to edit mode and selecting multiple products. If you want to play with it and check more details, please download our Android app here.
So, what’s ActionMode? ActionMode provides alternative interaction modes and replaces parts of the normal UI until finished. It was introduced back from Android HoneyComb with ActionBar. There is also an implementation in the support library (appcompat-v7), so you can even use it from version 7. To use ActionMode, just make sure you are using the one from support lib, which is
android.support.v7.view.ActionMode, not the one
android.view.ActionMode. Btw, you may try to use the classes from support library, which can be updated and bug fixed sooner when the support library gets updated, rather than waiting for the fix from the standard Framework API.
There are two types of ActionMode: Primary mode and Floating mode. The Primary mode is the one we are using in the Boards implementation, which replaces the Toolbar UI and contextual menu. The Floating mode provides a floating toolbar, which was introduced from version 23 and you can find in the text edit widget in Gmail or Google Doc.
Starting ActionMode is very simple. Just call the following method and it will return
You can use the callback to prepare the view or menu and release the resource after the ActionMode finishes.
There are several ways to stop the ActionMode:
* User presses back button
* User clicks the close icon you define in your ActionMode
ActionMode.finish method in the code
No matter which way the ActionMode is stopped, the
OnDestroyActionMode method in the
ActionMode.Callbackwill be called.
Here is a more detailed view of the ActionMode UI. It looks very similar to the Toolbar UI, where you can set the background colour, title style, subTitle style, close icon.
Most of the time you will create a theme to customise the ActionMode UI, so you can set the theme for each activity. You can create a new one if the ActionMode UI style is totally different from other parts. Or, you can extend your app theme, so you can have the same style across the app. A typical theme can be defined like this:
ActionModeStyleis in the App theme level, which can be set for each activity (make sure you are using
AppCompatActivityfrom support library).
WindowActionModeOverlayflag will let you choose if want to replace the Toolbar you have (overlay) or put your ActionMode view under the Toolbar UI (most of the time you will set true here to only show one Toolbar). When you set the overlay true, you may be aware the toolbar is not hidden, just under the ActionMode UI. There will be some accessibility issues, as the toolbar menu item can still be triggered with voice over.
ActionModeCloseDrawableis the icon at the start, which you want the user to click and close the ActionMode. If you leave it as default, it will be the black back arrow (abc_ic_ab_back_material).
ActionMenuTextColoris the text colour for the contextual menu you create when you start the ActionModel
Your ActionMode style should extend the
Widget.AppCompat.ActionMode and it extends from `Base.Widget.AppCompat.ActionMode`, which has six properties you can customise.
- Background: can be a pure colour or drawable
- Title style: any text view, such as text colour, size, font
- SubTitle Style: same as the title style. If you don’t set a subtitle, the title will be vertically centred in a
LinearLayout. Also, the font size is limited by the ActionMode
- CloseItemLayout: the layout which contains the close button icon. If you want to customise this one, you need to make sure you have the same resource ID (action_mode_close_button)
If you want to know more customisable properties, you can check the ActionMode section in the support lib (appcompat-v7) style.xml
I hope this post gives you some ideas to style your ActionMode UI. If you have any questions, thoughts or suggestions, feel free to leave comments or let me know if you’d like to hear more.
Hi! My name is Peng Jiang. I’m always passionate about simple and well-crafted code. I currently work as a Lead Android Engineer at ASOS. In my spare time, I also play with Swift and Flutter. At ASOS, we’re always looking for strong, friendly and talented developers. You will only need to write Kotlin here. If that sounds interesting to you, do get in touch!