如何在工具栏MenuItem图标上添加徽章

时间:2016-01-26 08:42:25

标签: android android-toolbar badge

我试图为自己找到答案但却找不到答案。

我需要在工具栏的MenuItem图标上制作徽章,如下所示:

enter image description here

我该怎么做?

2 个答案:

答案 0 :(得分:23)

这是一步一步的功能:

添加menu.xml

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

         <item
              android:id="@+id/actionNotifications"
              android:icon="@drawable/ic_info_outline_white_24dp"
              android:menuCategory="secondary"
              android:orderInCategory="1"
              android:title="Cart"
              app:actionLayout="@layout/notification_layout"
              app:showAsAction="always" />
    </menu>

然后添加notification_layout.xml,此布局将用作通知图标布局

     <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        style="@android:style/Widget.ActionButton"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:background="@android:color/transparent"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

     <ImageView
         android:id="@+id/hotlist_bell"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_margin="0dp"
         android:contentDescription="Notification Icon"
         android:gravity="center"
         android:src="@drawable/ic_info_outline_white_24dp" />

     <TextView xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/txtCount"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginBottom="@dimen/x5dp"
         android:layout_marginLeft="@dimen/x10dp"
         android:layout_marginRight="0dp"
         android:background="@drawable/pointer_"
         android:gravity="center"
         android:minWidth="17sp"
         android:text="0"
         android:textColor="#ffffffff"
         android:textSize="12sp" />
    </RelativeLayout>

现在在Activity

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

    final View notificaitons = menu.findItem(R.id.actionNotifications).getActionView();

    txtViewCount = (TextView) notificaitons.findViewById(R.id.txtCount);
    updateHotCount(count++);
    txtViewCount.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            updateHotCount(count++);
        }
    });
    notificaitons.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
    //    TODO
        }
    });


    return true;
}

您可以在活动中放入以下功能(取自stackoverflow)以更新计数器:

    public void updateHotCount(final int new_hot_number) {
    count = new_hot_number;
    if (count < 0) return;
    runOnUiThread(new Runnable() {
        @Override
        public void run() {
            if (count == 0)
                txtViewCount.setVisibility(View.GONE);
            else {
                txtViewCount.setVisibility(View.VISIBLE);
                txtViewCount.setText(Integer.toString(count));
                // supportInvalidateOptionsMenu();
            }
        }
    });
}      

答案 1 :(得分:3)

我认为有可能:

<ImageView
        android:id="@+id/counterBackground"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/unread_background" /> <!-- your icon -->

    <TextView
        android:id="@+id/count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        android:textSize="8sp"
        android:layout_centerInParent="true"
        android:textColor="#FFFFFF" />

然后将其用作background的图标。此外,您还需要删除/禁用默认图标。

你可能想看看:

Remove App Icon from Navigation Drawer ActionBar Does not work

Remove the navigation drawer icon and use the app icon to open

https://stackoverflow.com/a/29160904/4409113

此外,在android-sdk/platforms/android-22/data/res中,应该有该图标。您只需找到它并将其用于您的目的(例如,添加ImageView并将其添加为background

看一看: https://stackoverflow.com/a/34999691/4409113