Implementing Notification Bubbles for Android like Facebook Messenger

Hi there, today I came up with an easy solution to use the notification bubbles for android app as they are in used in facebook messenger. You would learn how to add those notification bubbles for android as per your need. You will also define onClicks and other stuffs in the notification bubbles created.Without wasting any time, let’s get started. Few snaps of the output of this project can be seen below.

Implementing Notification Bubbles for Android

Create a new Android Studio project with an empty activity. As your gradle is built and files get loaded, begin with adding the dependency to your app level gradle as it is given below.
This would add the Bubbles for Android library to your project and hence facilitate all its classed which are required in this project.
In your Project level gradle,add a line as shown below:-

allprojects {

repositories {

jcenter()

//The line below is added.

maven {

url "https://jitpack.io"

}

In your app level gradle, add the line as shown below:-

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {

exclude group: 'com.android.support', module: 'support-annotations'

})

compile 'com.android.support:appcompat-v7:24.2.1'

//The line below is added.

compile 'com.txusballesteros:bubbles:1.2.1'

testCompile 'junit:junit:4.12'

}

Now, sync the project to download the required library.
As you have the bubbles library added to your project, its time to configure the MainActivity.java and activity_main.xml.
Here’s the MainActivity.java. It simply consists of methods to create a new bubble ,define on click listener and so on. Apart from methods, it also has permissions for the bubbles to overlay the window at any time. So, add the code below to your MainActivity.java.

package chutka.bitman.com.bubblesforandroidsimplified;

import android.app.Service;

import android.content.Intent;

import android.net.Uri;

import android.os.Build;

import android.provider.Settings;

import android.os.Bundle;

import android.support.v7.app.ActionBarActivity;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.Toast;

import com.txusballesteros.bubbles.BubbleLayout;

import com.txusballesteros.bubbles.BubblesManager;

import com.txusballesteros.bubbles.OnInitializedCallback;

public class MainActivity extends ActionBarActivity {

private BubblesManager bubblesManager;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initializeBubblesManager();

//Setting the onClick listener the Add Bubble button

findViewById(R.id.add).setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

addNewBubble();

}

});

//Permission to allow the bubble to overlay the window

if(Build.VERSION.SDK_INT >= 23) {

if (!Settings.canDrawOverlays(MainActivity.this)) {

Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,

Uri.parse("package:" + getPackageName()));

startActivityForResult(intent, 1234);

}

else

{

Intent intent = new Intent(MainActivity.this, Service.class);

startService(intent);

}

//This method is executed to add a new bubble.

private void addNewBubble() {

BubbleLayout bubbleView = (BubbleLayout)LayoutInflater.from(MainActivity.this).inflate(R.layout.bubble_layout, null);

bubbleView.setOnBubbleRemoveListener(new BubbleLayout.OnBubbleRemoveListener() {

@Override

public void onBubbleRemoved(BubbleLayout bubble) { }

});

//The Onclick Listener for the bubble has been set below.

bubbleView.setOnBubbleClickListener(new BubbleLayout.OnBubbleClickListener() {

@Override

public void onBubbleClick(BubbleLayout bubble) {

//Do what you want onClick of bubble.

Toast.makeText(getApplicationContext(), "Clicked !",

Toast.LENGTH_SHORT).show();

}

});

bubbleView.setShouldStickToWall(true);

bubblesManager.addBubble(bubbleView, 60, 20);

}

private void initializeBubblesManager() {

bubblesManager = new BubblesManager.Builder(this)

.setTrashLayout(R.layout.bubble_trash_layout)

.setInitializationCallback(new OnInitializedCallback() {

@Override

public void onInitialized() {

addNewBubble();

}

})

.build();

bubblesManager.initialize();

}

@Override

protected void onDestroy() {

super.onDestroy();

bubblesManager.recycle();

}

Here’s the activity_main.xml. It just has a button to add new bubbles.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<Button

android:id="@+id/add"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:text="Add Bubble"/>

</RelativeLayout>

Now, we need to create some xml resource files to configure the bubbles, its trash container and so on.
Begin with creating a new layout resource file named bubble_layout.xml and add the code below. In the code below, the TextView is used to display the number of messages which appears in red and you can configure it as per your need.

<?xml version="1.0" encoding="utf-8"?>

<com.txusballesteros.bubbles.BubbleLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:clipChildren="false"

android:clipToPadding="false">

<ImageView

android:id="@+id/avatar"

android:layout_width="70dp"

android:layout_height="70dp"

android:layout_gravity="center"

android:background="@drawable/profile_decorator"

android:src="@drawable/profile"

android:scaleType="centerCrop"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="@android:color/white"

android:textSize="15sp"

android:layout_marginTop="2dp"

android:layout_marginLeft="2dp"

android:paddingLeft="4dp"

android:paddingRight="4dp"

android:background="@drawable/bubble_counter_bkg"

android:text="1"/>

</com.txusballesteros.bubbles.BubbleLayout>

The above code will generate the output shown below (It will do once we are done setting the drawable resources)

Next, create another layout resource file named bubble_trash_layout.xml and add the code below. It simply contains the ImageView used to show the bubble trash container.

<?xml version="1.0" encoding="utf-8"?>

<ImageView

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="20dp"

android:src="@drawable/bubble_trash_background"

android:layout_gravity="bottom|center_horizontal" />

The above code will generate the preview shown below(It will do once we are done setting the drawables):-

By now we are done the layout files. It time to configure the drawables.
Begin with creating a new drawable resource file named bubble_counter_bkg.xml and add the following code. It configures the shape and the background of the tag which comes in red and displays the number of messages.

<?xml version="1.0" encoding="utf-8"?>

</shape>

Next, get the images required from the below link and copy them inside your drawable folder. Just make sure you don’t change the names of the images. If you will change the names you also need to change some lines in xml files.

[download id=”3557″]

We are almost done. Just add a permission to your manifest as shown below and you would be good to go.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="chutka.bitman.com.bubblesforandroidsimplified">

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:supportsRtl="true"

android:theme="@style/AppTheme">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

And your project is ready for the run. Run the app now and have fun with the bubbles. Use them do something different and innovative.
You can also get the source code from the link given below.

[sociallocker id=1372] [download id=”3560″] [/sociallocker]

If you find some problem in the above lesson, let me know in the comments section. That’s all for now. Stay tuned for more android tutorials.