Two actionbars when starting ActionMode

Question

I have the following activity layout:

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawerLayout"
    style="@style/DrawerLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context=".ui.activity.MyActivity">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            android:background="@color/black"
            android:fitsSystemWindows="true"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:collapsedTitleTextAppearance="@style/ToolbarTitle"
                app:contentScrim="@color/primary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar_top"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/AppTheme.PopupOverlay"
                    app:theme="@style/ThemeOverlay.AppCompat.Light"/>

            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        <my.package.ui.widget.MyHeaderWidget
            android:id="@+id/deal_header"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="my.package.ui.activity.MyHeaderBehavior"/>

        <include layout="@layout/content_list"/>
    </android.support.design.widget.CoordinatorLayout>

    <include layout="@layout/navigation_view"/>

</android.support.v4.widget.DrawerLayout>

It is used to have a collapsing toolbar + the navigation drawer + an animation for a title an sub title (in the header widget). Everything is good until I try to start the ActionMode to enable multi-selection.

I do it by calling:

    mActionMode = mCollapsingToolbarLayout.startActionMode(mActionModeCallback);

The problem is that I end having two actionbars (with two arrows):

The black one is the one that I was expecting to be there the white one is added when I start the ActionMode.

Am I doing something wrong?

EDIT

in the AndroidMaifest

    <activity
        android:name=".ui.activity.MyActivity"
        android:label="@string/title_activity"
        android:theme="@style/MyTheme">
    </activity>

In the styles.xml

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:windowBackground">@drawable/window_background_gray</item>
    <item name="android:colorBackground">@color/app_background</item>
    <item name="displayOptions">showHome|homeAsUp|showTitle</item>
    <item name="android:icon">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="colorPrimary">@color/primary</item>
    <item name="colorAccent">@color/accent</item>
    <item name="colorPrimaryDark">@color/primaryDark</item>
    <item name="android:textAppearanceButton">@style/Theme.ButtonTextAppearance</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

EDIT2

If you want to test this issue you can create a new project in Android studio with the ScrollingActivity sample code. Modify the theme as you think you should and then just start the action mode when pressing the FAB, passing the following object as ActionMode.Callback to startSupportActionMode:

private ActionMode.Callback mActionModeCallback = new ActionMode.Callback() {
    // Called when the action mode is created; startActionMode() was called
    @Override
    public boolean onCreateActionMode(ActionMode mode, Menu menu) {
        // Inflate a menu resource providing context menu items
        MenuInflater inflater = mode.getMenuInflater();
        inflater.inflate(R.menu.menu_scrolling, menu);
        return true;
    }

    // Called each time the action mode is shown. Always called after onCreateActionMode, but
    // may be called multiple times if the mode is invalidated.
    @Override
    public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
        return false; // Return false if nothing is done
    }

    // Called when the user selects a contextual menu item
    @Override
    public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_settings:
                mode.finish();
                return true;
            default:
                return false;
        }
    }

    // Called when the user exits the action mode
    @Override
    public void onDestroyActionMode(ActionMode mode) {
        mActionMode = null;
    }
};

duplicate question: http://stackoverflow.com/questions/26483778/display-actionmode-over-toolbar — Ankit Aggarwal, Jun 13 '16 at 14:23

score 19 · Answer 1 · answered Jun 13 '16 at 15:25

19

If you're using a Toolbar these 3 lines are enough:

 <style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="windowActionModeOverlay">true</item> <!-- This is the important line -->
</style>

Remember to add that in both files styles and styles(v21)

answered Jun 13 '16 at 15:25

br00

1,114
8
18

I did try this and success. According to the documentation: Flag indicating whether action modes should overlay window content when there is not reserved space for their UI (such as an Action Bar). – Tin Tran Jun 13 '16 at 22:34

score 6 · Answer 2 · edited May 23 '17 at 11:52

6

You will need to tell the system that you use your custom toolbar instead. To do so, in the onCreate of your Activity, simply add the following :

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.your_layout);
  //Then get a reference to your Toolbar
  Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_top);
  //Tell the system to use yours
  setSupportActionBar(toolbar);
}

Here my Activity extends AppCompatActivity which is why I'm using setSupportActionBar, but you will find the same method for regular Activity setActionBar

In addition, you'll need to create a style (under res/values/styles.xml) :

<style name="MyNoAppBarTheme" parent="AppTheme">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

or in case you don't already override your AppTheme :

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

and finally set this theme in your manifest for that particular activity :

<activity
        android:name=".ui.activities.YourActivity"
        android:label="@string/app_name"
        android:theme="@style/MyNoAppBarTheme"
        />

EDIT : After you edited your question, it seems indeed that the actionMode is the issue here. As explained on this answer, make sure you're using the correct import, as well as using the startSupportActionMode instead of startActionMode

edited May 23 '17 at 11:52

Community

1
1

answered Jun 07 '16 at 09:42

NSimon

4,892
2
19
32

1

I'm already doing it. That's why the toolbar works. It looks like the problem is that starting the action mode triggers the creation (or showing) of another action bar. – kingston Jun 07 '16 at 10:13
Fine, I didn't get it at first. Then please see my edited answer, where I also provide a custom theme to get rid of the default actionBar, that you need to set in your activity's tag in the manifest – NSimon Jun 07 '16 at 10:57
unfortunately I'm already doing that too. Sorry I'll add some more details in the question – kingston Jun 07 '16 at 11:27
with windowActionModeOverlay set to true the second actionbar is shown over the first one. That's a bit better but still not perfect. – kingston Jun 07 '16 at 15:26
I see that you are using DrawerLayout. That could mean that the DrawerLayout is showing the toolbar, while your content activity is producing a default ActionBar. Try setting the above suggested code and theme on each content activity. – Dmitri Borohhov Jun 10 '16 at 07:32
My AppTheme already set false true – kingston Jun 10 '16 at 07:53

jaibatrik · Answer 3 · 2016-06-29T19:13:19.737

3

Try adding the following in your theme in styles.xml -

<item name="android:windowActionBarOverlay">false</item>
<item name="windowActionBarOverlay">false</item>
<item name="windowActionModeOverlay">true</item>

Also add the following lines if you are using Toolbar -

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

edited Jun 29 '16 at 19:13

answered Jun 12 '16 at 13:58

jaibatrik

5,072
6
28
60

Mmm I don't remember whether I checked this combination. I'll check it now. Thanks – kingston Jun 13 '16 at 11:34
only last line would do. true. Also use supportActionMode – Ankit Aggarwal Jun 13 '16 at 14:22
It is still showing the action bar over the toolbar – kingston Jun 13 '16 at 21:37

score 2 · Answer 4 · answered Jun 13 '16 at 11:00

2

Your parent theme has to be some of NoAction bar themes

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="colorControlNormal">@color/colorPrimary</item>
        <item name="colorControlActivated">@color/colorAccent</item>
    </style>

answered Jun 13 '16 at 11:00

Ivan Milisavljevic

1,894
1
11
20

– Ivan Milisavljevic Jun 13 '16 at 11:36
I have already tried it. In the example above I'm using false true. But I have also tried with Theme.AppCompat.Light.NoActionBar – kingston Jun 14 '16 at 16:50

Two actionbars when starting ActionMode

4 Answers4