web-dev-qa-db-fra.com

Badge de notification sur l’action Android

J'ajoute un badge de notification sur l'image du panier placée dans la barre d'action et le manipule par programme. De l'aide?

androidandroid-layoutandroid-actionbarbadge
26
Subrat Pani

Vous pouvez afficher MenuItem personnalisé sur ActionBar en créant un custom layout pour MenuItem. Pour définir une mise en page personnalisée, vous devez utiliser l'attribut d'élément de menu app:actionLayout.

Suivez les étapes ci-dessous pour créer un élément d'action Badge sur Cart. Voir le image ci-joint pour le résultat.

  1. Créez une mise en page personnalisée avec ImageView (pour l'icône du panier) et TextView (pour la valeur de comptage)

layout/custom_action_item_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    style="?attr/actionButtonStyle"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:clipToPadding="false"
    Android:focusable="true">

    <ImageView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center"
        Android:src="@drawable/ic_action_cart"/>

    <TextView
        Android:id="@+id/cart_badge"
        Android:layout_width="20dp"
        Android:layout_height="20dp"
        Android:layout_gravity="right|end|top"
        Android:layout_marginEnd="-5dp"
        Android:layout_marginRight="-5dp"
        Android:layout_marginTop="3dp"
        Android:background="@drawable/badge_background"
        Android:gravity="center"
        Android:padding="3dp"
        Android:textColor="@Android:color/white"
        Android:text="0"
        Android:textSize="10sp"/>

</FrameLayout>
  1. Créez un arrière-plan badge circulaire et dessinable à l'aide de Shape.

drawable/badge_background.xml:

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

    <solid Android:color="@Android:color/holo_red_dark"/>
    <stroke Android:color="@Android:color/white" Android:width="1dp"/>

</shape>
  1. Ajouter custom layout au menu item.

menu/main_menu.xml

<menu 
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto" >

    <item
        Android:id="@+id/action_cart"
        Android:icon="@drawable/ic_action_cart"
        Android:title="Cart"
        app:actionLayout="@layout/custom_action_item_layout"
        app:showAsAction="always"/>

</menu>
  1. Dans votre MainActivity, ajoutez les codes suivants:

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:

enter image description here

136
Ferdous Ahamed

Peut-être que ce sera plus rapide et plus facile solution . Par exemple xml:

    <ru.nikartm.support.ImageBadgeView
    Android:id="@+id/ibv_icon2"
    Android:layout_width="80dp"
    Android:layout_height="80dp"
    Android:layout_marginTop="30dp"
    Android:layout_gravity="center"
    Android:padding="10dp"
    app:ibv_badgeValue="100"
    app:ibv_badgeTextSize="12sp"
    app:ibv_fixedBadgeRadius="15dp"
    app:ibv_badgeTextStyle="bold"
    app:ibv_badgeTextColor="#ffffff"
    app:ibv_badgeColor="#00ACC1"
    app:ibv_badgeLimitValue="false"
    Android:src="@drawable/ic_shopping_cart" />

Ou par programme:

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);

Screen

J'espère que cette aide.

4
Javis

Le hack le plus simple en donnant du style.

        <TextView
                Android:id="@+id/fabCounter"
                style="@style/Widget.Design.FloatingActionButton"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_alignParentEnd="true"
                Android:layout_centerVertical="true"
                Android:layout_marginEnd="10dp"
                Android:padding="5dp"
                Android:text="10"
                Android:textColor="@Android:color/black"
                Android:textSize="14sp" />

Result

4
Aks4125
    **Create a custom_layout**

    ////////

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout
        style="?attr/actionButtonStyle"
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:clipToPadding="false"
        Android:focusable="true">

        <ImageView
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center"
            Android:src="@drawable/notifications_white"/>

        <TextView
            Android:id="@+id/cart_badge"
            Android:layout_width="20dp"
            Android:layout_height="20dp"
            Android:layout_marginLeft="55dp"
            Android:layout_marginTop="3dp"
            Android:background="@drawable/badge_background"
            Android:gravity="center"
            Android:padding="3dp"
            Android:textColor="@Android:color/white"
            Android:text="0"
            Android:textSize="10sp"
            Android:visibility="gone"
            />

    </FrameLayout>

    //////

    **Create badge_background**
    /////

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

        <solid Android:color="@Android:color/holo_red_dark"/>
        <stroke Android:color="@Android:color/white" Android:width="1dp"/>

    </shape>

    /////
    **Create main_menu**

////
    <menu
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:app="http://schemas.Android.com/apk/res-auto" >

        <item
            Android:id="@+id/action_cart"
            Android:icon="@drawable/notifications_white"
            Android:title="Cart"
            app:actionLayout="@layout/custom_layout"
            app:showAsAction="always"/>

    </menu>

/////
    **In MainActivty.Java**

         int count = 0;
        TextView textCartItemCount;

/// build a method inside your MainActivity ////

     @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() {
    ///make a button in MainActivty layout
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (count >= 0) {
                        textCartItemCount.setVisibility(View.VISIBLE);
                        textCartItemCount.setText(String.valueOf(++count));
                    } else {
                        textCartItemCount.setVisibility(View.GONE);`enter code here`
                    }

                }
            });
0
Asif Ali