Actionbar notification count icon badge like Google has

Question

Is there a android standard badge or method to show action bar notification icon with a count like on Google examples     If not  then what is the best way to make it  I m new to android  please help

User · Answer

Ok  for  AndrewS solution to work with v7 appCompat library    lt menu      xmlns android  http   schemas android com apk res android      xmlns someNamespace  http   schemas android com apk res-auto   gt        lt item         android id    id saved badge          someNamespace showAsAction  always          android icon   drawable shape notification    gt    lt  menu gt        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        The rest of the code is the same

User · Answer

I found a very good solution here  I m using it with kotlin   First  in the drawable folder you have to create item count xml    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle  gt   lt corners android radius  8dp    gt   lt solid android color   f20000    gt   lt stroke     android width  2dip      android color   FFF    gt   lt padding     android bottom  5dp      android left  5dp      android right  5dp      android top  5dp    gt   lt  shape gt    In your Activity Main Layout some like    lt 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  gt                    lt RelativeLayout                         android id    id relative layout1                          android layout width  wrap content                          android layout height  wrap content  gt                        lt Button                             android id    id btnBadge                              android layout width  match parent                              android layout height  match parent                              android background   mipmap ic notification    gt                    lt  RelativeLayout gt                    lt 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   gt                lt  RelativeLayout gt    And you can modify like   btnBadge setOnClickListener   view - gt          Snackbar make view  badge click   Snackbar LENGTH LONG   setAction  Action   null  show           txtBadge text    0

User · Answer

I am not sure if this is the best solution or not  but it is what I need   Please tell me if you know what is need to be changed for better performance or quality  In my case  I have a button   Custom item on my menu - main xml   lt item     android id    id badge      android actionLayout   layout feed update count      android icon   drawable shape notification      android showAsAction  always  gt   lt  item gt    Custom shape drawable  background square  - shape notification xml   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android     android shape  rectangle  gt       lt stroke android color   22000000  android width  2dp   gt       lt corners android radius  5dp    gt       lt solid android color   CC0001   gt   lt  shape gt    Layout for my view - feed update count xml   lt  xml version  1 0  encoding  utf-8   gt   lt 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  gt       lt  Button gt    MainActivity - setting and updating my view  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

User · Answer

When you use toolbar        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       and in your load data call refreshMenu     private void refreshMenu         comment count setVisibility View VISIBLE       comment count setText      post data getComment count

User · Answer

I don t like ActionView based solutions  my idea is    create a layout with TextView  that TextView will be populated by application when you need to draw a MenuItem   2 1  inflate layout  2 2  call measure    amp  layout    otherwise view will be 0px x 0px  it s too small for most use cases   2 3  set the TextView s text   2 4  make  screenshot  of the view  2 6  set MenuItem s icon based on bitmap created on 2 4 profit    so  result should be something like    create layout here is a simple example      lt  xml version  1 0  encoding  utf-8   gt   lt 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  gt       lt RelativeLayout         android id    id counterValuePanel          android layout width  wrap content          android layout height  wrap content   gt            lt ImageView             android id    id counterBackground              android layout width  wrap content              android layout height  wrap content              android background   drawable unread background    gt            lt 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    gt       lt  RelativeLayout gt   lt  FrameLayout gt      drawable unread background is that green TextView s background    drawable ic menu gallery is not really required here  it s just to preview layout s result in IDE    add code into 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     Implement build-the-icon method   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        The complete code is here  https   github com cvoronin ActionBarMenuItemCounter

User · Answer

Try looking at the answers to these questions  particularly the second one which has sample code   How to implement dynamic values on menu item in Android  How to get text on an ActionBar Icon   From what I see  You ll need to create your own custom ActionView implementation  An alternative might be a custom Drawable  Note that there appears to be no native implementation of a notification count for the Action Bar   EDIT  The answer you were looking for  with code  Custom Notification View with sample implementation

User · Answer

Just to add  If someone wants to implement a filled circle bubble  heres the code  name it bage circle xml     lt shape xmlns android  http   schemas android com apk res android      android shape  ring      android useLevel  false      android thickness  9dp      android innerRadius  0dp       gt        lt solid         android color   F00            gt       lt stroke         android width  1dip          android color   FFF    gt        lt padding         android top  2dp          android bottom  2dp   gt    lt  shape gt    You may have to adjust the thickness according to your need     EDIT  Here s the layout for button  name it badge layout xml     lt RelativeLayout xmlns android  http   schemas android com apk res android      android layout width  wrap content      android layout height  wrap content  gt        lt 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   gt        lt 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   gt   lt  RelativeLayout gt    In Menu create item    lt item         android id    id menu messages          android showAsAction  always          android actionLayout   layout badge layout   gt    In onCreateOptionsMenu get reference to the Menu item       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                                      After receiving notification for messages  set the count   itemMessagesBadgeTextView setText      count   itemMessagesBadgeTextView setVisibility View VISIBLE   iconButtonMessages setTextColor getResources   getColor R color white      This code uses Iconify-fontawesome   compile  com joanzapata iconify android-iconify-fontawesome 2 1

User · Answer

I found better way to do it   if you want to use something like this     Use this dependency     compile  com nex3z notification-badge 0 1 0    create one xml file in drawable and Save it as Badge xml   lt  xml version  1 0  encoding  utf-8   gt     lt layer-list xmlns android  http   schemas android com apk res android  gt    lt item gt       lt shape android shape  oval  gt           lt solid android color   66000000   gt           lt size android width  30dp  android height  40dp   gt       lt  shape gt   lt  item gt   lt item android bottom  1dp  android right  0 6dp  gt       lt shape android shape  oval  gt           lt solid android color   color Error color   gt           lt size android width  20dp  android height  20dp   gt       lt  shape gt   lt  item gt   lt  layer-list gt    Now wherever you want to use that badge use following code in xml  with the help of this you will be able to see that badge on top-right corner of your image or anything      lt 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       gt  lt  com nex3z notificationbadge NotificationBadge gt    Now finally on yourFile java use this 2 simple thing   1  Define      NotificationBadge mBadge    2  where your loop or anything which is counting this number use this    mBadge setNumber your LoopCount     here    mBadge setNumber 0  will not show anything   Hope this help

User · Answer

Edit Since version 26 of the support library  or androidx  you no longer need to implement a custom OnLongClickListener to display the tooltip  Simply call this   TooltipCompat setTooltipText menu hotlist  getString R string hint show hot message        I ll just share my code in case someone wants something like this     layout menu menu actionbar xml   lt  xml version  1 0  encoding  utf-8   gt    lt menu xmlns android  http   schemas android com apk res android  gt               lt 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    gt           lt  menu gt   layout action bar notifitcation icon xml  Note style and android clickable properties  these make the layout the size of a button and make the background gray when touched    lt  xml version  1 0  encoding  utf-8   gt   lt 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  gt        lt 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            gt        lt 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   gt   lt  RelativeLayout gt   drawable-xhdpi ic bell png  A 64x64 pixel image with 10 pixel wide paddings from all sides  You are supposed to have 8 pixel wide paddings  but I find most default items being slightly smaller than that  Of course  you ll want to use different sizes for different densities  drawable rounded square xml  Here   ff222222  color  222222 with alpha  ff  fully visible   is the background color of my Action Bar    lt  xml version  1 0  encoding  utf-8   gt    lt shape     xmlns android  http   schemas android com apk res android      android shape  rectangle  gt       lt corners android radius  2dp    gt       lt solid android color   ffff0000    gt       lt stroke android color   ff222222  android width  2dp   gt   lt  shape gt   com ubergeek42 WeechatAndroid WeechatActivity java  Here we make it clickable and updatable  I created an abstract listener that provides Toast creation on onLongClick  the code was taken from from the sources of 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  lt  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

[android] Actionbar notification count icon (badge) like Google has

Examples related to android

Examples related to notifications

Examples related to icons

Examples related to android-actionbar

Examples related to actionbarsherlock