アクションアイテムの通知バッジ Android

アクションバーに配置されたカートの画像に通知バッジを追加し、プログラムで操作したいのですが、どのようにすればよいでしょうか?何か良い方法はありませんか?

ソリューション

カスタムレイアウトを作成することで、カスタムのMenuItemActionBarに表示することができます。カスタムレイアウトを設定するには、メニューアイテムの属性app:actionLayout` を使用する必要があります。

**以下の手順でCartのアクションアイテムにBadgeを作成します。結果は添付の image をご覧ください。

1.1. ImageView(カートアイコン用)と TextView(カウント値用)でカスタムレイアウトを作成する。

layout/custom_action_item_layout.xml:を参照してください。

<?xml version="1.0" encoding="utf-8"?>






2.2. Shape を使って、描画可能な円形の badge の背景を作成します。

drawable/badge_background.xml:

<?xml version="1.0" encoding="utf-8"?>





3.メニューの itemcustom layout を追加します。

メニュー/メインメニュー.xmlを作成します。





4.4. MainActivityに、以下のコードを追加します。

MainActivity.java:

public class MainActivity extends AppCompatActivity {
    ................
    ......................
    TextView textCartItemCount;
    int mCartItemCount = 10;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        .....................
        ............................
    }

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

        final MenuItem menuItem = menu.findItem(R.id.action_cart);

        View actionView = MenuItemCompat.getActionView(menuItem);
        textCartItemCount = (TextView) actionView.findViewById(R.id.cart_badge);

        setupBadge();

        actionView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onOptionsItemSelected(menuItem);
            }
        });

        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()) {

            case R.id.action_cart: {
                // Do something
                return true;
            }
        }
        return super.onOptionsItemSelected(item);
    }

    private void setupBadge() {

        if (textCartItemCount != null) {
            if (mCartItemCount == 0) {
                if (textCartItemCount.getVisibility() != View.GONE) {
                    textCartItemCount.setVisibility(View.GONE);
                }
            } else {
                textCartItemCount.setText(String.valueOf(Math.min(mCartItemCount, 99)));
                if (textCartItemCount.getVisibility() != View.VISIBLE) {
                    textCartItemCount.setVisibility(View.VISIBLE);
                }
            }
        }
    }

    ..................
    ..............................

}

OUTPUT:

の場合

解説 (17)

もしかしたら、もっと早くて簡単な[ソリューション][1]になるかもしれません。 例えば、xml。

あるいはプログラム的に

imageBadgeView.setBadgeValue(27)
            .setBadgeOvalAfterFirst(true)
            .setBadgeTextSize(16)
            .setMaxBadgeValue(999)
            .setBadgeTextFont(typeface)
            .setBadgeBackground(getResources().getDrawable(R.drawable.rectangle_rounded))
            .setBadgePosition(BadgePosition.BOTTOM_RIGHT)
            .setBadgeTextStyle(Typeface.NORMAL)
            .setShowCounter(true)
            .setBadgePadding(4);

の場合

ご参考になれば幸いです。

[1]: https://github.com/nikartm/Image-Support

解説 (3)

スタイルを与えることで最もシンプルなハック。

解説 (4)