ActionBarCompat (Part 2): Action Views

In the first part of this tutorial series I talked about how to use ActionBarCompat in our projects. Once you have set the theme, extended ActionBarActivity and added some menu items, it’s time to add an Action View to your bar.

< Part 1: How to use ActionBarCompat

Adding an Action View to ActionBarCompat

Action Views are those helpful views that can be added over the Action Bar when the user presses a menu item. The most typical is the Search View, and that’s the one I’m explaining here. Every Action View has been added to the support library, so you will need to add the reference to it instead of the one in the SDK:

[xml]
<item
android:id="@+id/action_search"
android:title="@string/action_search"
android:icon="@drawable/ic_action_search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="ifRoom" />
[/xml]

Recovering this Action View from code is a little bit different. MenuItemCompat will do the hard work this time:

[java]
private SearchView mSearchView;

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);

MenuItem searchItem = menu.findItem(R.id.action_search);
mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);

return true;
}
[/java]

Now it’s time to show the search view when the user presses the magnifying glass icon. No difference with native Action Bar:

[java]
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch(item.getItemId()){

case R.id.action_search:
mSearchView.setIconified(false);
return true;

}

return false;
}
[/java]

Action View

You can add an OnQueryTextListener to detect user input on SearchView

[java]
public class MainActivity extends ActionBarActivity implements SearchView.OnQueryTextListener {

@Override
public boolean onCreateOptionsMenu(Menu menu) {

mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
mSearchView.setOnQueryTextListener(this);

return true;
}

@Override
public boolean onQueryTextSubmit(String s) {
Toast.makeText(this, s, Toast.LENGTH_LONG).show();
return true;
}

@Override
public boolean onQueryTextChange(String s) {
return false;
}
}
[/java]

Conclusion

Apart from using some new classes and very little coding changes, the process of adding a new action view is similar and straightforward. If you have done this before, it will be easy.

For the next tutorial, I will explain how to replace ActionBarSherlock with ActionBarCompat. I will take my App Bandhook as basis to explain the full process.

20 thoughts on “ActionBarCompat (Part 2): Action Views”

  1. Did you know some way to put the progress indicator with the ActionBarActivity? Here, in android 4, when I call setSupportProgressBarIndeterminateVisibility works ok, but on 2.2 nothing happens. Did you know what could be I am doing wrong?

    1. Antonio Leiva

      Hi Mark, there’s a more visual way by using an ActionView. I can’t show you any tutorial in Englisth, but I wrote one at my blog in Spanish for ActionBarSherlock. You will probably need to adapt some things to work with ActionBarCompat. Hope Google translate does a good job. If you can’t get it working, please feel free to write from the “about” section:
      http://www.limecreativelabs.com/progressbar-actionbar-refrescar-vista/

  2. Rafael Decker

    Hi. I’m trying to implement the Actionbar compat. On devices who have hardware menu button, the items are not being shown on action bar. It is being shown as overflow menu by pressing the hardware menu button. Do you know if is there a way to force to show these items inside the action bar?
    Thank you.

  3. Wow this is a great tutorial. When we will get the next tutorial? can you help me adding menu items at the bottom of the screen?

  4. Very good tutorial. Waiting for next ones.
    Btw you made a great work with this website. Excellent 🙂
    Keep it up the good work.

  5. hi antonio,…
    seems the compat library that I add here is always crashed. each time i add “ActionBarActivity” extended for my Activity.
    But I did adding the Jar already, including its imports :

    import android.support.v7.app.ActionBarActivity;
    import android.support.v7.widget.SearchView;

    any clues how to sort this out?
    I find no clues on Logcat….

  6. I’m trying to add a SearchView in the ActionBar of a Fragment which is a part of DrawerLayout. I need the SearchView only for one fragment. I do the following in the onCreateOptionsMenu() method of the Fragment.
    @Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    // TODO Auto-generated method stub
    menu.clear();
    inflater.inflate(R.menu.alarm_list_menu, menu);
    MenuItem searchItem = menu.findItem(R.id.action_search);
    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    }

    mSearchView is null every time. Have I missed some thing? I ‘m able to see the search icon on the ActionBar, but nothing more can be done.

Comments are closed.