Building an Android Notification Bubble

This is a simple post in which I’m going to show you how you can create a simple notification on top of an existing button that looks just like an iOS/OSX notification, as shown below:

Notification Button

Concept

I want to do this WITHOUT any 9 patch images whatsoever. If you look closely, you’ll see that the red notification is actually a gradient. The bottom red color is darker than the top. The reason I want to stay away from 9-patch is because its a painful to work with when you need to make changes. The icon you see above is going to be completely implemented in a XML drawable. This will allow it to look great on ldpi, mdpi, hdpi, xhdpi, etc etc etc. After we have the notification icon built (the little red thing) you can lay that on top of anything – in this instance we’re laying it over a button through the use of a FrameLayout.

Building the Shape

The icon is really easy to build actually. Its a simple XML Drawable that is stored in the /res/drawables/ folder:

 

This XML Drawable creates a rectangle with rounded corners with a corner radius of 10 density pixels.  It has a stroke (a border) of 2 density pixels wide and is white in color. The color of the rectangle is a gradient which has a start and end color which are the red and dark red colors in hex.  I then add a little padding around the shape so there is room for the content (in this case it will be text, which I’ll show you in one second). Thats pretty much it, you’ve created the shape which will define how the bubble looks.

Laying it out

The code below brings it together. I’ll explain each piece in detail after this code:

 

Take a look at the LinearLayout above. The LinearLayout has its background set to the XML drawable that you created above. The gravity is set to center so the child views are in the middle. Some padding and margin is added so that little red bubble that we’re creating shows up in the top right corner of the parent view (since, as you can see, we’re using a FrameLayout). This LinearLayout has one child view, a TextView that displays the number and its text color is set to white. Now you just need to place this over a button, which is exactly what the FrameLayout is allowing you to do.

Since the LinearLayout (the red bubble) is at the bottom of the FrameLayout declaration, it is “on top” of everything else. The last item in the FrameLayout XML declaration is what will be on top. Above the LinearLayout you have a Button with a custom background that sets the background to a black/grey gradient. The custom background isn’t covered in this post, but can be downloaded with the sample code for you to play with.

At this point you have a button with a red bubble over it. You can add an android:id attribute to the TextView and update it in your Activity or Fragment code to reflect the proper count number (here I’m just hardcoding it for brevity).

So there you have it, a count bubble that scales across all screen resolutions and looks great.

Notification Button

Download the code for this article.

Android Dev Digest

Get the best Android Developer posts delivered weekly to your inbox.

Don't worry, I wont spam (I hate that stuff too).

  • http://commonsware.com/ Mark Murphy

    If you overlay the button this way, will a tap on the bubble actually trigger the button? My guess is no, but I haven’t tried this. If a tap on the bubble does not register as a click on the button, you may need to put the android:onClick logic on multiple elements in the layout to handle the various possibilities.

    Beyond that though, it certainly looks cool!

  • http://blog.donnfelker.com Donn Felker

    Hey Mark,

    Yes, the touch passes through the bubble. :) I just updated the code sample on github with a click listener that shows a toast when you tap the button. :)

    Thanks!

  • http://commonsware.com/ Mark Murphy

    Ah, cool. I couldn’t remember the exact event-bubbling rules that would apply here. Glad to hear it’s nice and simple!

  • Coach Factory Outlet
  • http://www.fakeoakleysunglasses4u.net/ oakleys

    TGC5NFJR6PFEWY
    Welcome to Oakley Sunglasses Hut to buy cool and cheap oakleys sunglasses.

  • Anonymous

    football boots comfortable and cheap
    football shoes designer bags Come surprise
    nike air max ltd good  trend  cheap
    gucci sunglasses Do not miss the nike-low prices
    gucci outlet online discount designer shoes
    gucci outlet 2012 is the master of them
    wholesale coach The new discount
    air max shoes Business casual bag cheap
    coach purses on sale Boutique explosion models
    wholesale coach The new discount fashion
    cheap basketball jerseys See this beautiful bag
    wholesale gucci shoes Affordable surprise bag
    discount gucci online Come to see the lowest package
    cheap authentic nfl jerseys online Fashion accessories boutique

  • Andy

    Whats the git hub url, I would like to look at the source and see how you changed the count.

  • http://blog.donnfelker.com Donn Felker

    Its at the bottom of the post: https://github.com/donnfelker/AndroidCodeExamples

  • Fake oakleyscheap

    Welcome to fake oakleys store
    online!Our company is fake oakley sunglasses manufacturer&supplier,we have been
    in designer sunglasses for 8 years.there u can get the cheapest price in our company sites,waiting for u visiting.Mens sunglasses,women sunglasses saled in our company.welcome to buy the
    replica oakley sunglassesin our company.our company let you enjoy your life withour paying high prices,and our daily necessities have been sold all over the world for many years and influenced by the customers’ approval. If you want to buy or import daily necessities,our products can be your first choice.

  • Oakleys mall

    Welcome to fake oakley sunglasses ,Our company supply different kinds daily necessities. All you can find in ourwebsite.our daily necessities are cheap and good quality.Our stuffs have been recognized as one of the mostcoveted.We export different daily necessities including fake oakley sunglasses,hats,fashionable clothes,high quality shoes,clothes for children as well as winter sports clothing for outdoor use.Years of designing and developing promotional products enable us to catch our customers’ ideas and needs firmly.We are a professional fake oakley sunglassestrade company offering various kinds brands product.our company let you enjoy your life withour paying high prices,and our daily necessities have been sold all over the world for many years and influenced by the customers’ approval. If you want to buy or import daily necessities,our products can be your first choice.

  • Fake oakleys glasses

    Welcome to wholesale oakley sunglasses store
    online!Our company is fake oakley sunglasses knock off oakleys manufacturer & supplier,our company also supply fake ray bans .we have been
    in designer sunglasses for 8 years.there u can get the cheapest price in our company sites,waiting for u visiting.cheap oakleyssold in our company.welcome to buy the
    replica oakley sunglassesin our company.our company let you enjoy your life withour paying high prices,and our daily necessities have been sold all over the world for many years and influenced by the customers’ approval.our company is your first choice.

  • Replica ray bans

    Welcome to fake raybans store
    online!Our company is fake ray bans manufacturer & supplier,our company also supply fake ray bans .we have been
    in designer sunglasses for 8 years.there u can get the cheapest price in our company sites,waiting for u visiting.Fake ray bans sold in our company.our company’s .fake raybans   let you enjoy your life withour paying high prices,and our daily necessities have been sold all over the world for many years and influenced by the customers’ approval.our company is your first choice.

  • Fake oakleys wholesale

    Welcome to fake oakleys store
    online!Our company is fake oakley sunglasses manufacturer & supplier,we have been
    in fashion cosmeitics for 8 years.there u can get thereplica oakley sunglasses  and the high quality in our company sites,waiting for u visiting.The foakleys also been allowed in our company.our company’s foakley sunglasses let you enjoy your life withour paying high prices,and our daily necessities have been sold all over the world for many years and influenced by the customers’ approval. If you want to buy or import daily necessities,our products can be your first choice.

  • Wholesaleoakleys

    Welcome to wholesale oakley sunglasses store
    online!Our company is oakley sunglasses wholesale manufacturer & supplier,we have been
    in fashion cosmeitics for 8 years.there u can get thewholesale oakley sunglasses   and  the high quality in our company sites,waiting for u visiting.The oakley sunglasses wholesale also been allowed in our company.our company’s  let you enjoy your life withour paying high prices,and our daily necessities have been sold all over the world for many years and influenced by the customers’ approval. If you want to buy or import daily necessities,our products can be your first choice.

  • http://www.spacify.com/dining_chairs_general-818-225.html Contemporary Dining Chairs

    Thomas Pellissier Tanon (User:Tpt) created the Mobile Upload Wizard building on the code of the Wikipedia Android app. While not a complete experience yet, …

  • http://www.christianloubotin2012.com/ christian louboutin sale

    NHMYZTDLWM
    His boots are coveted over the world, because all women, all over, like to view and sense beautiful. 

  • Duhuxi

    Shop DVD Empire new dvds for free same day shipping on in-stock DVD movies and blu-rays. Over 60000 disney dvd on sale.

  • http://www.cheap-oakley-sale.com/ cheap oakley sunglasses

    ZYTQLXWDYDYGHH
    To give the best look is the goal of cheap Oakley sunglasses

  • Bestkit

    Our company supply all kind of  replica oakleys, Oakley sunglasses now has been recognized as one of the most coveted. They are famous for exceptional top quality technologies and a innovative range of sunglasses. But referring to the original one, the price is very high, some of us can not afford it, so fake Oakley sunglasses are you the best choice. We have been in knock off oakley sunglasses wholesale for 6 years, we always offer excellent quality and cheapest oakley sunglasses. Compare to original one,  all the fake Oakleys have the same amazing style and quality as original, so there is a big market for our cheap oakley sunglasses. fake Oakleys are the best seller in our factory. If u want to make your life more colorful, cheap replica oakley sunglasses are your best choice. in our company, sale all kind of brand sunglasses, the (brand) sunglasses AAA is the best sunglasses. Basically with quality goods almost, and you can get them in discounted,  all cheap oakleys, oakley replica, discount oakleys, fake oakleys sale are hight quality, free shipping if you order over $100. Please enjoy our replica oakley sunglasses site.
     

  • Wxy52048
  • http://www.oakleysunshades.com/ Cheap oakley sunglasses

    Once you make an effort to purchase a duplicate

  • http://www.oakleysunshades.com/ Cheap oakley sunglasses

    Once you make an effort to purchase a duplicate

  • 624415672

     Ces méthodes n’ont toutefois pas la fiabilité que certains veulent bien leur prêter.millions d’abonnés en France au 31? sac louis vuitton Mais dans le même temps, la dette publique du pays a continué d’augmenter, davantage qu’attendu, atteignant le niveau record de 85,8% du PIB, a aussi annoncé l’Insee vendredi.?pourrait?clients de Bouygues Telecom ont demandé au 15?                          FTVi avec AFP                                                                      Des? sac vuitton Cette accumulation d’expertises a provoqué un débat passionné où tout le monde était perdu. sacs louis vuitton1 vendredi 30? louis vuitton site officieldécembre 2011. La saisine concerne également le budget rectificatif 2011 adopté le même jour. louis vuitton pas cher

  • McMil

    Where is the code ? I didn’t find anything on git hub, too

  • http://blog.donnfelker.com/ Donn Felker
  • McMil

    i got the link allready but which java-file includes the code? sorry, but I only found the drawable file…

  • Matt

    Good stuff Donn, thanks. This was much easier to use than the FourSquare counter bubble.