How to place an ActionBar on a SlidingMenu ( like in the Evernote app)?

Question

I want to make slide menu that has ActionBar like in Evernote. In this app, Seem like it has 2 ActionBars(I'm not sure about it). One at main and another one is in the sliding menu.

Is there anyway to build 2 ActionBars like this? Or it's just a layout arrangement to resemble ActionBar look.

Thank for all your help and sorry for my english.

ps. I use ActionBarSherlock and SlidingMenu to achieve this, but I can't find the way to do it like in Evernote.

Answer 1

You wrote:

I use (...) SlidingMenu

If by SlidingMenu you mean Jeremy Feinstein's SlidingMenu, and you want to keep using this menu library, you can't use a 'real' ActionBar, since SlidingMenu's menu is implemented as a Fragment, named SlidingMenuFragment in the library. A Fragment can't hold an ActionBar.

You can create a layout which looks like an ActionBar. In SlidingMenuFragment's you set the layout file like so:

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    ViewGroup viewGroup = (ViewGroup) inflater.inflate(R.layout.sliding_menu,null);

In the menu's layout file, here called sliding_menu.xml, you can for example make a SearchView look like it's in an ActionBar by nesting it in a layout at the top. You then set that layout's background color/drawable to something different from the rest of the list. See below example (I'm aware nesting LinearLayouts isn't pretty...Just a quick example that uses the LinearLayout from the SlidingMenu example app to get the idea across):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#333333" >

        <SearchView
            android:id="@+id/searchView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <ListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/list_padding"
        android:paddingRight="@dimen/list_padding" />

</LinearLayout>

This will look like:

when open, where the light grey box to the right is part of the 'real' ActionBar.

Edit: You wrote in a comment:

The searchView example works Im having trouble getting a drop down menu to work in the same way.

The drop-down menu in the EverNote app looks like it's been implemented with a Holo-themed Spinner. Android Developers has a thorough introduction on how to add a Spinner to a layout. The Spinner's logic/java code would be placed in SlidingMenuFragment (if you go with the SlidingMenu library).

Answer 2

Ok I managed to do it with the help of Gunnar Karlsson who pushed me in the right direction Instead of a SearchView

I implemented an ImageButton like so:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#333333" >

        <ImageButton
                android:layout_width="wrap_content" 
                android:layout_height="60dp" 
                android:src="@drawable/ic_launcher"
                android:onClick="showPopup" />

</LinearLayout>


<ListView xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@android:id/list"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingLeft="@dimen/list_padding"
   android:paddingRight="@dimen/list_padding" />

</LinearLayout>

and in the my mainActivity I simply pulled this from the google sample code for creating a pop up menu:

public void showPopup(View v) {
    PopupMenu popup = new PopupMenu(this, v);
    MenuInflater inflater = popup.getMenuInflater();
    inflater.inflate(R.menu.actions, popup.getMenu());
    popup.show();
}

And it worked. Thank you Gunnar Karlsson.