Making of a counter bubble overlay!!!

Hi, geeks

Messages are the most important aspect of a mobile,since android came in the market it however kinda redesigned the way messages used to be after iphone.

So Let's start in creating the bubble now :-)

A little to know about

A message bubble is the icon shown on the top of the message icon on your android device.This is usually a nice design to show instant notifications to your user and most of all it grabs your attention.Here's a image of that.

So the red circles you seeing on the images/apps on the home screen is called the counter bubble notification.

Prerequisites

1. FrameLayout
2. ShapeDrawables

Know 'em better

FrameLayout : This layout forms the basis of a counter bubble,it behaves like a stack.The layout/items placed inside it will appear from bottom to up(just like a stack).Here's an example to it.

<FrameLayout>

   <ImageView>
   <TextView> 

   <ListView>

</FrameLayout>

So in the above example,the ListView is shown above all the other views now then TextView and ImageView to the bottom of the stack . 

Shape Drawable : This is a type of an drawable drawn around any view.

Here's the complete xml for the bubble.

1. Layout file

Where to put : Place it inside the layout folder inside the layout directory inside the res folder with the name bubble_layout. 

<FrameLayout
            android:id="@+id/counter_notification_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true">

            <ImageView
                android:id="@+id/incomingRequest"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

            <TextView
                android:id="@+id/counterBubble"
                android:layout_width="20dp"
                android:layout_height="20dp"                android:background="@drawable/counter_notification_bubble"
                android:textColor="#FFFFFF"
                android:layout_gravity="top|right"
                android:textAppearance="?android:attr/textAppearanceSmall" />
            

        </FrameLayout>

2. Drawable file

Where to put : make a folder drawable inside res directory and place this content inside an xml and name it counter_bubble_notification.xml (name it whatever you like,but remember to change it in xml above)

  

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

    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />

    <solid android:color="#FF0000" />

    <stroke
        android:dashWidth="2dp"
        android:width="2dp"
        android:color="#FFFFFF" />


</shape>

Use it now

public void onCreate(Bundle instance){
     setContentView(R.layout.bubble_layout);
    TextView bubble=(TextView) findViewById(R.id.counter_bubble);
    bubble.setText(""+100); 
}

Now run this example and you should be able to see this in your phone/emulator.