Add badgeview on ActionBarSherlock MenuItem

Question

I would like to add a badge over ActionBar MenuItem

But the digit icon didn't shows.

Here's what I have done so far

public class Main extends SherlockFragmentActivity
{
  private Fragment menuFrag=null;
  private MenuItem menuMsg=null;
  private BadgeView badge=null;

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
    //Do my stuff...
    initUI();
  }

  private void initUI()
  {
    FragmentManager fm=getSupportFragmentManager();
    FragmentTransaction ft=fm.beginTransaction();
    menuFrag=fm.findFragmentByTag("f1");
    if(menuFrag==null)
    {
      menuFrag=new MenuFragment();
      ft.add(menuFrag, "f1");
    }
    ft.commit();

    // badge=new BadgeView(Main.this, (View)menuMsg); //Not working
    badge=new BadgeView(Main.this, menuMsg.getActionView()); //Not working as well
    badge.setBackgroundResource(R.drawable.badge_ifaux);
    badge.setTextSize(10);
    badge.setBadgeMargin(2);
    badge.setText("1");
    badge.show();
  }

  private class MenuFragment extends SherlockFragment
  {
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
      super.onCreate(savedInstanceState);
      setHasOptionsMenu(true);
    }

    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater)
    {
      menu.add("Cloud").setIcon(R.drawable.icon_cloud).setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
      menu.add("List").setIcon(R.drawable.icon_list).setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
      menuMsg=menu.add("Msg");
      menuMsg.setIcon(R.drawable.icon_msg).setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item)
    {
      Toast.makeText(Main.this, "Got click: " + item.toString(), Toast.LENGTH_SHORT).show();
      return true;
    }
  }
}

Where do I did wrong ?

Answer 1

RRTW,

The library you are using doesn't support badging Actionbar menu items natively.

https://github.com/jgilfelt/android-viewbadger/commit/e08c3a78cb92c0c8587790b15e73434f972912cf

However, it doesn't mean you can't get it to work.

The setup is going to be as follows (this assumes you already have the viewbager library setup in your project)

(1) onCreateOptionsMenu --> (2) Add a R.menu.your_place_holder_item --> (3) setActionView with custom xml layout --> (4) findViewById of the MenuItem object to get your button/view to set the badge.

1) setup your onCreateOptionsMenu and create a the R.menu.actionbar_menu_messages

R.menu.actionbar_menu_messages:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
         >
    <item android:showAsAction="ifRoom" android:icon="@drawable/action_bar_pk_content_email"
        android:id="@+id/menuMessages" android:title="More"></item>

</menu>

onCreateOptionsMenu:

public boolean onCreateOptionsMenu(Menu menu) {
    super.onCreateOptionsMenu(menu);
    MenuInflater inflater = getSupportMenuInflater(); //If you are using the support library otherwise use: getMenuInflater();
    inflater.inflate(R.menu.actionbar_menu_messages, menu);
    this.setupMessagesBadge(menu.findItem(R.id.menuMessages));  //This is part of step 2
    return true;
}

2) Defined the common_messages_indicator

R.layout.common_messages_indicator:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="64dp"
             android:layout_height="fill_parent"
             android:paddingTop="10dp"
             android:gravity="center">
    <ImageView
        android:id="@+id/imgMessagesIcon"
        android:layout_width="32dp"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:scaleType="fitCenter"
        android:src="@drawable/messages_button"
        android:background="@android:color/transparent"
        android:focusable="false"
        />

   </FrameLayout>

perform setActionView to add your custom xml layout to the ActionView

private void setupMessagesBadge(final MenuItem msgItem) {
    msgItem.setActionView(R.layout.common_messages_indicator);

    if(msgItem.getActionView().findViewById(R.id.imgMessagesIcon) != null)
    {
        ImageView imgMessagesIcon = ((ImageView)msgItem.getActionView().findViewById(R.id.imgMessagesIcon));

        imgMessagesIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Your click on the action bar item will be captured here
            }
        });
        int badgeCnt = 20;// Add your count here
        if(messageCenterBadge == null && badgeCnt > 0)
        {
            //imgMessagesIcon is the imageview in your custom view, apply the badge to this view.
            messageCenterBadge = new BadgeView(this, imgMessagesIcon);
            messageCenterBadge.setBadgePosition(BadgeView.POSITION_TOP_RIGHT);
            messageCenterBadge.setBadgeMargin(0);
            messageCenterBadge.setTextSize(12);
            messageCenterBadge.setText(String.valueOf(badgeCnt));
            messageCenterBadge.show();
        }
        else if(messageCenterBadge != null && badgeCnt > 0 )
        {
            messageCenterBadge.setText(String.valueOf(badgeCnt));
            messageCenterBadge.show();
        }
        else if(messageCenterBadge != null && badgeCnt == 0) {
            messageCenterBadge.hide();
        }
    }
}