Android ActionBarSherlock Top Bar

Question

I want to have an Action Bar like foursquare. What I want is tabs such as Friends, Explore and Me. Also, above the tabs I want to have a custom layout that includes some buttons such as foursquare logo, Refresh and Check-In in foursquare. I created tabs but I could not change the layout above tabs in ActionBarSherlock. How can I solve this problem?

Answer 1

To achieve a Foursquare look you do not need to be thinking of creating a layout above the tabs. When using Actionbar Sherlock you only need to worry about:

1. Making a background for the top bar
2. Making a logo for the top bar
3. Adding items in a menu.xml file that ActionbarSherlock will use to populate the top section with Buttons (as long as a style using Actionbar Sherlock style is attached to thw activity).

So, for 1. and 2. it's all about using styles.xml file (should reside in the values folder in the res folder) like so:

<style name="Theme.Example" parent="Theme.Sherlock">
    <item name="actionBarStyle">@style/Widget.Styled.ActionBar</item>
    <item name="absForceOverflow">true</item>       
</style>

<style name="Widget.Styled.ActionBar" parent="Widget.Sherlock.ActionBar.Solid">
    <item name="background">@drawable/actionbar_background</item> <-- the background for top bar
    <item name="icon">@drawable/actionbar_logo</item> <-- the logo that goes top left in the top bar
    <item name="backgroundSplit">@drawable/bg_striped_split</item> <-- the image used between the menu items
</style>

For 3. all you need to do is create menu items under menu.xml (should reside in the menu folder (if not there, create one in the res folder)):

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">     

<item android:id="@+id/menu_prefs"
      android:icon="@drawable/settings_icon"
      android:title="Preferences"
      android:showAsAction="ifRoom" /> 
</menu>

The last thing you have to do to see the menu items is use these functions in the activity:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getSupportMenuInflater();
    inflater.inflate(R.menu.menu, menu);
    return true;
}

public boolean onOptionsItemSelected (MenuItem item) {

    Intent intent;

    switch (item.getItemId())
    {   
    case R.id.menu_prefs:

        // Launch Preference Activity
        intent = new Intent(getBaseContext(), Preferences.class);           
        startActivity(intent);
        break;
    }

    return false;
}

Answer 2

To set your custom action items (refresh, check in, ...) you must override onCreateOptionsMenu(Menu menu) and set your custom menu.

e.g:

File menu/my_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/refresh"
        android:icon="@drawable/ic_menu_refresh"
        android:title="refresh"
        android:showAsAction="always">
    </item>

</menu>

Then in your activity (or fragment):

@Override
public boolean onCreateOptionsMenu(Menu menu)
{
  MenuInflater inflater = getSupportMenuInflater();
  inflater.inflate(R.menu.my_menu, menu);

  // Allow activity and fragments to add items
  super.onCreateOptionsMenu(menu);

  return true;
}

And to be notified when they are selected, just override onOptionsItemSelected(MenuItem item):

@Override
public boolean onOptionsItemSelected(MenuItem item)
{
  switch (item.getItemId())
  {
    case android.R.id.refresh :
      // refresh your data...
      return true;

    default :
      return super.onOptionsItemSelected(item);
  }
}