Ícone de contagem de notificações da barra de ação (emblema) como o Google


146

Existe um emblema ou método padrão do Android para mostrar o ícone de notificação da barra de ação com uma contagem como nos exemplos do Google?

conte 3 na imagem

Caso contrário, qual é a melhor maneira de fazê-lo?
Eu sou novo no android, por favor ajude.


Atualizei minha resposta para vincular a uma implementação completa do ícone de notificação.
Pqn 29/07/2013

Respostas:


228

Não tenho certeza se essa é a melhor solução ou não, mas é o que eu preciso.

Diga-me se você sabe o que precisa ser alterado para obter melhor desempenho ou qualidade. No meu caso, eu tenho um botão.

Item personalizado no meu menu - main.xml

<item
    android:id="@+id/badge"
    android:actionLayout="@layout/feed_update_count"
    android:icon="@drawable/shape_notification"
    android:showAsAction="always">
</item>

Drawable de forma personalizada (quadrado do plano de fundo) - shape_notification.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
    <stroke android:color="#22000000" android:width="2dp"/>
    <corners android:radius="5dp" />
    <solid android:color="#CC0001"/>
</shape>

Layout para minha visualização - feed_update_count.xml

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/notif_count"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:minWidth="32dp"
     android:minHeight="32dp"
     android:background="@drawable/shape_notification"
     android:text="0"
     android:textSize="16sp"
     android:textColor="@android:color/white"
     android:gravity="center"
     android:padding="2dp"
     android:singleLine="true">    
</Button>

MainActivity - definindo e atualizando minha visualização

static Button notifCount;
static int mNotifCount = 0;    

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

    View count = menu.findItem(R.id.badge).getActionView();
    notifCount = (Button) count.findViewById(R.id.notif_count);
    notifCount.setText(String.valueOf(mNotifCount));
    return super.onCreateOptionsMenu(menu);
}

private void setNotifCount(int count){
    mNotifCount = count;
    invalidateOptionsMenu();
}

53
É ótimo ! Mas se você usar AppCompat, defina o ActionLayout no código:MenuItem item = menu.findItem(R.id.badge); MenuItemCompat.setActionView(item, R.layout.feed_update_count); notifCount = (Button) MenuItemCompat.getActionView(item);
Sylphe

7
supportInvalidateOptionsMenu () precisa usar em vez de invalidateOptionsMenu () se você segmentar para o nível da API abaixo de 11
Balaji

10
+1 Ajudou muito! No entanto: você não precisa do android:icon="..."item de menu XML. O android:actionLayout="..."suficiente, lá. Para o ButtonXML no layout, você pode usar a tag de fechamento automático <Button ... />porque a tag não pode ter conteúdo. Você precisa fechar a <shape>tag (novamente: fechamento automático). E você não precisa do invalidateOptionsMenu(). Para mim, isso nem funciona, pois o emblema é sempre inflado de XML novamente. Então, o todo setNotifCount(...)é inútil. Basta ligar setText(...)no crachá. E você pode lançar getActionView()a Buttondiretamente.
caw

4
Além disso, se você usar o AppCompat, deverá alterar o menu xml do selo <menu xmlns: android = " schemas.android.com/apk/res/android " xmlns: appcompat = " schemas.android.com/apk/res-auto "> <item android: id = "@ + id / badge" android: actionLayout = "@ layout / feed_update_count" android: icon = "@ drawable / shape_notification" appcompat: showAsAction = "sempre" /> </item> </menu>
ajdeguzman

4
@Webster notifCount.setOnClickListener (...); isso é tudo dentro
Andrews

132

Editar Desde a versão 26 da biblioteca de suporte (ou androidx), você não precisa mais implementar um costume OnLongClickListenerpara exibir a dica de ferramenta. Basta chamar isso:

TooltipCompat.setTooltipText(menu_hotlist, getString(R.string.hint_show_hot_message));

Vou compartilhar meu código caso alguém queira algo assim: insira a descrição da imagem aqui

  • layout / menu / menu_actionbar.xml

    <?xml version="1.0" encoding="utf-8"?>
    
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        ...
        <item android:id="@+id/menu_hotlist"
            android:actionLayout="@layout/action_bar_notifitcation_icon"
            android:showAsAction="always"
            android:icon="@drawable/ic_bell"
            android:title="@string/hotlist" />
        ...
    </menu>
  • layout / action_bar_notifitcation_icon.xml

    Observe o estilo e o android: propriedades clicáveis . estes tornam o layout do tamanho de um botão e o fundo fica cinza quando tocado.

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_gravity="center"
        android:clickable="true"
        style="@android:style/Widget.ActionButton">
    
        <ImageView
            android:id="@+id/hotlist_bell"
            android:src="@drawable/ic_bell"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_margin="0dp"
            android:contentDescription="bell"
            />
    
        <TextView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/hotlist_hot"
            android:layout_width="wrap_content"
            android:minWidth="17sp"
            android:textSize="12sp"
            android:textColor="#ffffffff"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@null"
            android:layout_alignTop="@id/hotlist_bell"
            android:layout_alignRight="@id/hotlist_bell"
            android:layout_marginRight="0dp"
            android:layout_marginTop="3dp"
            android:paddingBottom="1dp"
            android:paddingRight="4dp"
            android:paddingLeft="4dp"
            android:background="@drawable/rounded_square"/>
    </RelativeLayout>
  • drawable-xhdpi / ic_bell.png

    Uma imagem de 64x64 pixels com preenchimentos de 10 pixels de todos os lados. Você deveria ter preenchimentos de 8 pixels de largura, mas acho que a maioria dos itens padrão é um pouco menor que isso. Obviamente, você desejará usar tamanhos diferentes para densidades diferentes.

  • drawable / rounded_square.xml

    Aqui, # ff222222 (cor # 222222 com alfa #ff (totalmente visível)) é a cor de plano de fundo da minha barra de ação.

    <?xml version="1.0" encoding="utf-8"?>
    
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <corners android:radius="2dp" />
        <solid android:color="#ffff0000" />
        <stroke android:color="#ff222222" android:width="2dp"/>
    </shape>
  • com / ubergeek42 / WeechatAndroid / WeechatActivity.java

    Aqui tornamos clicável e atualizável! Criei um ouvinte abstrato que fornece a criação do Toast no onLongClick, o código foi retirado das fontes do ActionBarSherlock .

    private int hot_number = 0;
    private TextView ui_hot = null;
    
    @Override public boolean onCreateOptionsMenu(final Menu menu) {
        MenuInflater menuInflater = getSupportMenuInflater();
        menuInflater.inflate(R.menu.menu_actionbar, menu);
        final View menu_hotlist = menu.findItem(R.id.menu_hotlist).getActionView();
        ui_hot = (TextView) menu_hotlist.findViewById(R.id.hotlist_hot);
        updateHotCount(hot_number);
        new MyMenuItemStuffListener(menu_hotlist, "Show hot message") {
            @Override
            public void onClick(View v) {
                onHotlistSelected();
            }
        };
        return super.onCreateOptionsMenu(menu);
    }
    
    // call the updating code on the main thread,
    // so we can call this asynchronously
    public void updateHotCount(final int new_hot_number) {
        hot_number = new_hot_number;
        if (ui_hot == null) return;
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                if (new_hot_number == 0)
                    ui_hot.setVisibility(View.INVISIBLE);
                else {
                    ui_hot.setVisibility(View.VISIBLE);
                    ui_hot.setText(Integer.toString(new_hot_number));
                }
            }
        });
    }
    
    static abstract class MyMenuItemStuffListener implements View.OnClickListener, View.OnLongClickListener {
        private String hint;
        private View view;
    
        MyMenuItemStuffListener(View view, String hint) {
            this.view = view;
            this.hint = hint;
            view.setOnClickListener(this);
            view.setOnLongClickListener(this);
        }
    
        @Override abstract public void onClick(View v);
    
        @Override public boolean onLongClick(View v) {
            final int[] screenPos = new int[2];
            final Rect displayFrame = new Rect();
            view.getLocationOnScreen(screenPos);
            view.getWindowVisibleDisplayFrame(displayFrame);
            final Context context = view.getContext();
            final int width = view.getWidth();
            final int height = view.getHeight();
            final int midy = screenPos[1] + height / 2;
            final int screenWidth = context.getResources().getDisplayMetrics().widthPixels;
            Toast cheatSheet = Toast.makeText(context, hint, Toast.LENGTH_SHORT);
            if (midy < displayFrame.height()) {
                cheatSheet.setGravity(Gravity.TOP | Gravity.RIGHT,
                        screenWidth - screenPos[0] - width / 2, height);
            } else {
                cheatSheet.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, height);
            }
            cheatSheet.show();
            return true;
        }
    }

14
Muito útil e descritivo. Obrigado! Era disso que eu realmente precisava. Apenas para adicionar alguns tópicos que podem ser úteis. Você deve colocar em app:actionLayout="@layout/action_bar_notifitcation_icon"vez de android:actionLayout="@layout/action_bar_notifitcation_icon"usar em MenuItemCompat.getActionViewvez de menu.findItem(R.id.menu_hotlist).getActionView();problemas de compatibilidade. MenuItem.getActionViewnão é compatível com nível API <11.
Reaz Murshed

Observe o estilo e o android: propriedades clicáveis. estes tornam o layout do tamanho de um botão e tornam o plano de fundo selecionado colorido quando tocado. Muito útil!
David

2
Ele funciona como um encanto. tnx bro. mas no meu caso, eu uso barra de ferramentas padrão e que eu deveria usar "app: actionLayout =". @ layout / action_bar_notifitcation_icon" em vez ou sempre recebo nula tnx novamente
Omid Heshmatinia

3
Como dica, o Android tem um drawable para notificação. Assim, em vez de criar uma forma personalizada, você pode definir o fundo do TextView para @android: drawable / ic_notification_overlay".
androidevil

2
Nativo android:actionLayout:; AppCompat: app:actionLayoutno seu item de menu.
Benoit Duffez

61

Apenas para adicionar. Se alguém quiser implementar um balão preenchido, veja o código (nomeie bage_circle.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false"
    android:thickness="9dp"
    android:innerRadius="0dp"
    >

    <solid
        android:color="#F00"
        />
    <stroke
        android:width="1dip"
        android:color="#FFF" />

    <padding
        android:top="2dp"
        android:bottom="2dp"/>

</shape>

Você pode ter que ajustar a espessura de acordo com sua necessidade.

insira a descrição da imagem aqui

EDIT: Aqui está o layout para o botão (nome badge_layout.xml):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.joanzapata.iconify.widget.IconButton
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:textSize="24sp"
        android:textColor="@color/white"
        android:background="@drawable/action_bar_icon_bg"
        android:id="@+id/badge_icon_button"/>

    <TextView
        android:id="@+id/badge_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/badge_icon_button"
        android:layout_alignRight="@id/badge_icon_button"
        android:layout_alignEnd="@id/badge_icon_button"
        android:text="10"
        android:paddingEnd="8dp"
        android:paddingRight="8dp"
        android:paddingLeft="8dp"
        android:gravity="center"
        android:textColor="#FFF"
        android:textSize="11sp"
        android:background="@drawable/badge_circle"/>
</RelativeLayout>

No menu criar item:

<item
        android:id="@+id/menu_messages"
        android:showAsAction="always"
        android:actionLayout="@layout/badge_layout"/>

Em onCreateOptionsMenuobter referência ao item de menu:

    itemMessages = menu.findItem(R.id.menu_messages);

    badgeLayout = (RelativeLayout) itemMessages.getActionView();
    itemMessagesBadgeTextView = (TextView) badgeLayout.findViewById(R.id.badge_textView);
    itemMessagesBadgeTextView.setVisibility(View.GONE); // initially hidden

    iconButtonMessages = (IconButton) badgeLayout.findViewById(R.id.badge_icon_button);
    iconButtonMessages.setText("{fa-envelope}");
    iconButtonMessages.setTextColor(getResources().getColor(R.color.action_bar_icon_color_disabled));

    iconButtonMessages.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (HJSession.getSession().getSessionId() != null) {

                Intent intent = new Intent(getThis(), HJActivityMessagesContexts.class);
                startActivityForResult(intent, HJRequestCodes.kHJRequestCodeActivityMessages.ordinal());
            } else {
                showLoginActivity();
            }
        }
    });

Após receber a notificação de mensagens, defina a contagem:

itemMessagesBadgeTextView.setText("" + count);
itemMessagesBadgeTextView.setVisibility(View.VISIBLE);
iconButtonMessages.setTextColor(getResources().getColor(R.color.white));

Este código usa Iconify-fontawesome .

compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.1.+'

10
Você pode fornecer o código para a barra de ação acima. Parece muito bom.
Nitesh Kumar

Você poderia elaborar um pouco mais? Algum código seria muito útil
Joaquin Iurchuk 03/03

@NiteshKhatri, desculpe-me pelo atraso no fornecimento do código. Eu pensei que era fácil. Mas você recebeu tantos votos positivos por seus comentários, o que significa que outros desenvolvedores também estão achando difícil.
Abdullah Umer

1
iconify é uma ótima biblioteca!
djdance

É muito bom, porém o número, o texto está aparecendo no lado esquerdo do meio da rodada (raio). Como resolver isso
Farruh Habibullaev 18/04

29

Não gosto de ActionViewsoluções baseadas, minha ideia é:

  1. criar um layout com TextView, que TextViewserá preenchido pelo aplicativo
  2. quando você precisar desenhar um MenuItem:

    2.1 inflar layout

    2.2 call measure()& layout()(caso contrário view, será 0 px x 0 px, é muito pequeno para a maioria dos casos de uso)

    2.3 defina o TextViewtexto do

    2.4 faça "screenshot" da vista

    2.6 set MenuItemícone 's com base em bitmap criado no 2.4

  3. lucro!

então, resultado deve ser algo como insira a descrição da imagem aqui

  1. criar layout aqui é um exemplo simples
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/counterPanel"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:background="@drawable/ic_menu_gallery">
    <RelativeLayout
        android:id="@+id/counterValuePanel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

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

        <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" />
    </RelativeLayout>
</FrameLayout>

@drawable/unread_backgroundé TextViewo fundo verde , @drawable/ic_menu_gallerynão é realmente necessário aqui, é apenas para visualizar o resultado do layout no IDE.

  1. adicione código em onCreateOptionsMenu/onPrepareOptionsMenu

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
    
        MenuItem menuItem = menu.findItem(R.id.testAction);
        menuItem.setIcon(buildCounterDrawable(count, R.drawable.ic_menu_gallery));
    
        return true;
    }
  2. Implemente o método build-the-icon:

    private Drawable buildCounterDrawable(int count, int backgroundImageId) {
        LayoutInflater inflater = LayoutInflater.from(this);
        View view = inflater.inflate(R.layout.counter_menuitem_layout, null);
        view.setBackgroundResource(backgroundImageId);
    
        if (count == 0) {
            View counterTextPanel = view.findViewById(R.id.counterValuePanel);
            counterTextPanel.setVisibility(View.GONE);
        } else {
            TextView textView = (TextView) view.findViewById(R.id.count);
            textView.setText("" + count);
        }
    
        view.measure(
                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
    
        view.setDrawingCacheEnabled(true);
        view.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
        Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
        view.setDrawingCacheEnabled(false);
    
        return new BitmapDrawable(getResources(), bitmap);
    }

O código completo está aqui: https://github.com/cvoronin/ActionBarMenuItemCounter


1
camelCaseCoder, quando você quer localização da imagem Contador mudança para superior direito, você pode, por exemplo, adicionar android: layout_gravity = "top | direito" de propriedades de layout do counterValuePanel
cVoronin

Será útil saber por que você não prefere soluções baseadas em actionview. É complexidade ou desempenho?
Adi15

26

Ok, a solução @AndrewS funcionará com a biblioteca v7 appCompat :

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

    <item
        android:id="@+id/saved_badge"
        someNamespace:showAsAction="always"
        android:icon="@drawable/shape_notification" />

</menu>

.

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    super.onCreateOptionsMenu(menu, inflater);
    menu.clear();
    inflater.inflate(R.menu.main, menu);

    MenuItem item = menu.findItem(R.id.saved_badge);
    MenuItemCompat.setActionView(item, R.layout.feed_update_count);
    View view = MenuItemCompat.getActionView(item);
    notifCount = (Button)view.findViewById(R.id.notif_count);
    notifCount.setText(String.valueOf(mNotifCount));
}

private void setNotifCount(int count){
    mNotifCount = count;
    supportInvalidateOptionsMenu();
}

O restante do código é o mesmo.


7
se você estiver usando xmlns: app = " schemas.android.com/apk/res-auto " em seu layout xml, use app: actionLayout = "@ layout / shoppingcar_icon" em vez de android: actionLayout = "@ layout / shoppingcar_icon"
Oscar Calderon

3
@OscarCalderon, é verdade. Antes de adquirir o NPE, depois de mudar android:actionLayoutpara app:actionLayoutele funciona como charme.
Shashanth

3

Tente analisar as respostas para essas perguntas, principalmente a segunda que possui um código de exemplo:

Como implementar valores dinâmicos no item de menu no Android

Como obter texto em um ícone da ActionBar?

Pelo que vejo, você precisará criar sua própria ActionViewimplementação personalizada . Uma alternativa pode ser um costume Drawable. Observe que parece não haver implementação nativa de uma contagem de notificações para a barra de ação.

EDIT: A resposta que você estava procurando, com o código: Custom Notification View with sample sample


tnx para resposta, mas eu não entendo como mostrar o número, não o ícone como no seu primeiro link. você pode ajudar com isso?
Andrews

Você leu os outros links? Eles oferecem algumas opções. Além disso, você pode colocar o texto em Drawables, como visto nos dois links a seguir: stackoverflow.com/questions/6691818/… e stackoverflow.com/questions/3972445/…
pqn

estou indo cada vez mais fundo com suas respostas ... eu tenho esse código <layer-list xmlns: android = " schemas.android.com/apk/res/android "> <item android: drawable = "@ drawable / shape_notification "/> <item android: drawable =" @ drawable / ic_menu_preferences "/> </layer-list> e eu preciso substituir o ícone (ic_menu_preferences) por drawable que tenha texto. como posso fazer isso?
Andrews

Não tenho muita experiência com isso, mas acredito que você pode criar atributos XML personalizados para Drawablealgo através de algo como o link aqui e, em seguida, criar um atributo para o seu costume Drawablecom texto sobre ele, para que você possa criar a coisa toda em XML e ajuste-o como desejar. Como alternativa, você pode adicionar o Drawable em Java se isso for muito difícil.
pqn 31/07/2013

3

Quando você usa a barra de ferramentas:

....
private void InitToolbar() {
    toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    toolbartitle = (TextView) findViewById(R.id.titletool);
    toolbar.inflateMenu(R.menu.show_post);
    toolbar.setOnMenuItemClickListener(this);
    Menu menu = toolbar.getMenu();
    MenuItem menu_comments = menu.findItem(R.id.action_comments);
    MenuItemCompat
            .setActionView(menu_comments, R.layout.menu_commentscount);
    View v = MenuItemCompat.getActionView(menu_comments);
    v.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // Your Action
        }
    });
    comment_count = (TextView) v.findViewById(R.id.count);
}

e na chamada de carregamento de dados refreshMenu ():

private void refreshMenu() {
    comment_count.setVisibility(View.VISIBLE);
    comment_count.setText("" + post_data.getComment_count());
}

1

Encontrei uma solução muito boa aqui , estou usando com o kotlin.

Primeiro, na pasta drawable, você deve criar item_count.xml:

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#f20000" />
<stroke
    android:width="2dip"
    android:color="#FFF" />
<padding
    android:bottom="5dp"
    android:left="5dp"
    android:right="5dp"
    android:top="5dp" />
</shape>

No seu Activity_Mainlayout, alguns como:

<RelativeLayout
                    android:id="@+id/badgeLayout"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_toRightOf="@+id/badge_layout1"
                    android:layout_gravity="end|center_vertical"
                    android:layout_marginEnd="5dp">

                <RelativeLayout
                        android:id="@+id/relative_layout1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                    <Button
                            android:id="@+id/btnBadge"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="@mipmap/ic_notification" />

                </RelativeLayout>

                <TextView
                        android:id="@+id/txtBadge"
                        android:layout_width="18dp"
                        android:layout_height="18dp"
                        android:layout_alignRight="@id/relative_layout1"
                        android:background="@drawable/item_count"
                        android:text="22"
                        android:textColor="#FFF"
                        android:textSize="7sp"
                        android:textStyle="bold"
                        android:gravity="center"/>

            </RelativeLayout>

E você pode modificar como:

btnBadge.setOnClickListener { view ->
        Snackbar.make(view,"badge click", Snackbar.LENGTH_LONG) .setAction("Action", null).show()
        txtBadge.text = "0"
    }

0

Eu encontrei uma maneira melhor de fazer isso. se você quiser usar algo assim

insira a descrição da imagem aqui

Use essa dependência

   compile 'com.nex3z:notification-badge:0.1.0'

crie um arquivo xml no drawable e salve-o como Badge.xml

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

<item>
    <shape android:shape="oval">
        <solid android:color="#66000000"/>
        <size android:width="30dp" android:height="40dp"/>
    </shape>
</item>
<item android:bottom="1dp" android:right="0.6dp">
    <shape android:shape="oval">
        <solid android:color="@color/Error_color"/>
        <size android:width="20dp" android:height="20dp"/>
    </shape>
</item>
</layer-list>

Agora, onde quer que você queira usar esse emblema, use o código a seguir no xml. com a ajuda disso, você poderá ver o emblema no canto superior direito da sua imagem ou algo assim.

  <com.nex3z.notificationbadge.NotificationBadge
    android:id="@+id/badge"
    android:layout_toRightOf="@id/Your_ICON/IMAGE"
    android:layout_alignTop="@id/Your_ICON/IMAGE"
    android:layout_marginLeft="-16dp"
    android:layout_marginTop="-8dp"
    android:layout_width="28dp"
    android:layout_height="28dp"
    app:badgeBackground="@drawable/Badge"
    app:maxTextLength="2"
    ></com.nex3z.notificationbadge.NotificationBadge>

Agora, finalmente, no yourFile.java, use estas 2 coisas simples. 1) Defina

 NotificationBadge mBadge;

2) onde seu loop ou qualquer coisa que esteja contando esse número use este:

 mBadge.setNumber(your_LoopCount);

aqui, mBadge.setNumber(0)não mostrará nada.

Espero que esta ajuda.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.