Contextual Action menu positioned above the Action Bar in a Fragment

Question

I have an Activity with a Fragment which contains a ListView of Students. When I long press I wanted to show an Action menu visually overtaking Action Bar. I was able to show the menu, however, its position is not overtaking the action bar. See the image 1, I wanted to something like in image 2.

I found this question and I tried what they have suggested. But still no luck.

This is my Fragment class;

public class StudentsFragment extends Fragment
{
 List<Student> studentList
 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) 
 {
    studentView = inflater.inflate(R.layout.students_layout,container,false);
    studentList = ((MainActivity) getActivity()).getStudentList();
    displayStudents(this.getActivity());
    return studentView;
   }

private void displayStudents(Context context)
{

  final StudentsAdapter studentsAdapter;
  final ListView listView;
  ...
  studentsAdapter = new StudentsAdapter(getActivity(), studentList);
    listView = (ListView) 
  studentView.findViewById(R.id.students_student_list);
  listView.setAdapter(studentsAdapter);

  listView.setMultiChoiceModeListener(new AbsListView.MultiChoiceModeListener() {
            @Override
            public void onItemCheckedStateChanged(ActionMode mode, int position, long id, boolean checked) {
                // Capture total checked items
                final int checkedCount = listView.getCheckedItemCount();
                // Set the CAB title according to total checked items
                mode.setTitle(checkedCount + " Selected");
                // Calls toggleSelection method from ListViewAdapter Class
                studentsAdapter.toggleSelection(position);
            }

            @Override
            public boolean onCreateActionMode(ActionMode mode, Menu menu) {
                mode.getMenuInflater().inflate(R.menu.student_list_action_menu, menu);
                return true;
            }

            @Override
            public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
                return false;
            }

            @Override
            public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
                switch (item.getItemId()) {
                    // Calls getSelectedIds method from ListViewAdapter Class

                    case R.id.group_email:
                        ...
                        mode.finish();
                        return true;
                    default:
                        return false;
             }
            }

            @Override
            public void onDestroyActionMode(ActionMode mode) {
                studentsAdapter.removeSelection();
            }
        });
  }
}

This is my main activity's theme;

    <style name="AppTheme.NoActionBar">
     <item name="windowActionBar">false</item>
     <item name="windowNoTitle">true</item>
     <item name="android:windowActionModeOverlay">true</item>
    </style>

This is required menu;

<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:id="@+id/group_email"
    android:title="Email"/>
  <item
    android:id="@+id/bulk_sms"
    android:title="SMS"/>
</menu>

Any help or idea highly appreciated.

Answer 1

In your AppTheme.NoActionBar add this:

    <item name="windowActionModeOverlay">true</item>
    <item name="actionModeBackground">@color/colorPrimary</item>

You don't need to add android:windowActionModeOverlay it just windowActionModeOverlay