Implement Custom Chat Heads Using Bubbles For Android Library in Android Tutorial

Udemy Generic 728x90

Objective

In this tutorial, we learn the process of implementing Custom Chat Heads using Bubbles For Android Library in Android Application using a simple example.

 

 

Chat Heads are animated interface more like a movable shortcut icon. They can be moved across the screen like a bubble and can be removed by dropping them into the trash layout. Chat Heads can be displayed either when a notification is received or by opening the app through its icon.

In this tutorial, we will learn the process of implementing Custom Chat Heads using Bubbles For Android library. Here, we will display a Chat Head on the screen on the click of button. User can remove Chat Head by moving it to trash layout.
 

Step 2

Create New Project

Create a new Project in Android Studio, goto File ⇒ New ⇒ New Projects.
 

Step 3

Create MainActivity Layout

We will open the Chat Head on the click of button, so we need to add a Button widget in the activity_main.xml file.
Here is the code snippet for the same :

<br />
&lt;Button<br />
    android:id=&quot;@+id/button&quot;<br />
    android:layout_width=&quot;match_parent&quot;<br />
    android:layout_height=&quot;wrap_content&quot;<br />
    android:layout_alignParentBottom=&quot;true&quot;<br />
    android:text=&quot;Add Notification View&quot;/&gt;<br />

 

Step 4

Create Chat Head Layout

In this sample, we will display Chat Head icon and number of new notifications for the app. To create a Chat Head, we will use <com.txusballesteross.bubbles.BubbleLayout> tag. Inside the BubbleLayout tag, we need to add a ImageView widget to display icon and TextView widget to show number of notification message. So, create a new layout file named, notification_layout.xml and add <com.txusballesteross.bubbles.BubbleLayout> tag.  Inside BubbleLayout tag, add a ImageView widget and a TextView widget.

Here is the code snippet for the same :

<br />
&lt;com.txusballesteros.bubbles.BubbleLayout<br />
    xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;<br />
    android:layout_width=&quot;wrap_content&quot;<br />
    android:layout_height=&quot;wrap_content&quot;<br />
    android:clipChildren=&quot;false&quot;<br />
    android:clipToPadding=&quot;false&quot;&gt;</p>
<p>    &lt;ImageView<br />
        android:id=&quot;@+id/avatar&quot;<br />
        android:layout_width=&quot;70dp&quot;<br />
        android:layout_height=&quot;70dp&quot;<br />
        android:layout_gravity=&quot;center&quot;<br />
        android:background=&quot;@drawable/profile_decorator&quot;<br />
        android:src=&quot;@drawable/profile&quot;<br />
        android:scaleType=&quot;centerCrop&quot;/&gt;</p>
<p>    &lt;TextView<br />
        android:layout_width=&quot;wrap_content&quot;<br />
        android:layout_height=&quot;wrap_content&quot;<br />
        android:textColor=&quot;#fff&quot;<br />
        android:textSize=&quot;15sp&quot;<br />
        android:layout_marginTop=&quot;2dp&quot;<br />
        android:layout_marginLeft=&quot;2dp&quot;<br />
        android:paddingLeft=&quot;4dp&quot;<br />
        android:paddingRight=&quot;4dp&quot;<br />
        android:background=&quot;@drawable/bubble_counter_bkg&quot;<br />
        android:text=&quot;1&quot;/&gt;</p>
<p>&lt;/com.txusballesteros.bubbles.BubbleLayout&gt;<br />

 

Step 5

Create Trash Layout

Chat Head can be removed by dragging the Head to the Trash Layout. So, we need to create a Trash Layout. Create a new layout file, named notification_trash_layout.xml file and add the following code snippet there.

<br />
&lt;ImageView<br />
    xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;<br />
    android:layout_width=&quot;wrap_content&quot;<br />
    android:layout_height=&quot;wrap_content&quot;<br />
    android:layout_marginBottom=&quot;20dp&quot;<br />
    android:src=&quot;@mipmap/bubble_trash_background&quot;<br />
    android:layout_gravity=&quot;bottom|center_horizontal&quot; /&gt;<br />

 

Step 6

Configure Trash Layout

Trash Layout’s functionality is managed by the BubbleManager class of the Library. Bubble Manager class has setTrashLayout() method which takes trash layout as argument and build it.
Here is the code to initialize the BubbleManager class and set the trash layout :

&lt;/pre&gt;<br />
&lt;pre&gt;public class MainActivity extends AppCompatActivity {</p>
<p>    private BubblesManager bubblesManager;</p>
<p>    @Override<br />
    protected void onCreate(Bundle savedInstanceState) {<br />
        super.onCreate(savedInstanceState);<br />
        setContentView(R.layout.activity_main);</p>
<p>        // configure bublle manager<br />
        initializeBubbleManager();<br />
    }</p>
<p>    /**<br />
     * Configure the trash layout with your BubblesManager builder.<br />
     */<br />
    private void initializeBubbleManager() {<br />
        bubblesManager = new BubblesManager.Builder(this)<br />
                .setTrashLayout(R.layout.notification_trash_layout)<br />
                .build();<br />
        bubblesManager.initialize();<br />
    }<br />
}<br />

 

Step 7

Add Bubble Layout

To display Chat Head on the screen, we need to add the head layout to main activity through LayoutInflater. So, create a method called addNewNotification() method. In this method, we need to inflate the notification_layout.xml file to main activity. Also, set the callback methods, setOnBubbleRemoveListener() and setOnBubbleClickListener(). The setOnBubbleRemoveListener() method is used when user remove the head layout. The setOnBubbleClickListener() method is used when user click on the head layout.

Now, add the bubble layout into BubbleManger object through addBubble() method.

<br />
public class MainActivity extends AppCompatActivity {</p>
<p>    private BubblesManager bubblesManager;</p>
<p>    @Override<br />
    protected void onCreate(Bundle savedInstanceState) {<br />
        super.onCreate(savedInstanceState);<br />
        setContentView(R.layout.activity_main);</p>
<p>        // configure bublle manager<br />
        initializeBubbleManager();<br />
    }</p>
<p>    /**<br />
     * Configure the trash layout with your BubblesManager builder.<br />
     */<br />
    private void initializeBubbleManager() {<br />
        bubblesManager = new BubblesManager.Builder(this)<br />
                .setTrashLayout(R.layout.notification_trash_layout)<br />
                .build();<br />
        bubblesManager.initialize();<br />
    }</p>
<p>     /*<br />
     * Inflate notifation layout  into bubble layout<br />
     */<br />
    private void addNewNotification() {<br />
        BubbleLayout bubbleView = (BubbleLayout) LayoutInflater.from(MainActivity.this)<br />
                                   .inflate(R.layout.notification_layout, null);<br />
        // this method call when user remove notification layout<br />
        bubbleView.setOnBubbleRemoveListener(new BubbleLayout.OnBubbleRemoveListener() {<br />
            @Override<br />
            public void onBubbleRemoved(BubbleLayout bubble) {<br />
                Toast.makeText(getApplicationContext(), &quot;Bubble removed !&quot;,<br />
                        Toast.LENGTH_SHORT).show();<br />
            }<br />
        });<br />
        // this methoid call when cuser click on the notification layout( bubble layout)<br />
        bubbleView.setOnBubbleClickListener(new BubbleLayout.OnBubbleClickListener() {</p>
<p>            @Override<br />
            public void onBubbleClick(BubbleLayout bubble) {<br />
                Toast.makeText(getApplicationContext(), &quot;Clicked !&quot;,<br />
                        Toast.LENGTH_SHORT).show();<br />
            }<br />
        });</p>
<p>        // add bubble view into bubble manager<br />
        bubblesManager.addBubble(bubbleView, 60, 20);<br />
    }<br />
}<br />

 

Step 8

Display Chat Head on Button Click

As already mentioned above, in this example we will display Chat Head on button’s click that we added in activity_main.xml file. So, we need to set onClickListener on the button. Next, we need to call the addNewNotification() method to display Chat Head from onClick() method.

Here is the sample code snippet for the same :

<br />
public class MainActivity extends AppCompatActivity {</p>
<p>    private BubblesManager bubblesManager;</p>
<p>    @Override<br />
    protected void onCreate(Bundle savedInstanceState) {<br />
        super.onCreate(savedInstanceState);<br />
        setContentView(R.layout.activity_main);</p>
<p>        // configure bublle manager<br />
        initializeBubbleManager();</p>
<p>        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {<br />
            @Override<br />
            public void onClick(View v) {<br />
                addNewNotification();<br />
            }<br />
        });<br />
    }</p>
<p>    /**<br />
     * Configure the trash layout with your BubblesManager builder.<br />
     */<br />
    private void initializeBubbleManager() {<br />
        bubblesManager = new BubblesManager.Builder(this)<br />
                .setTrashLayout(R.layout.notification_trash_layout)<br />
                .build();<br />
        bubblesManager.initialize();<br />
    }</p>
<p>     /*<br />
     * Inflate notifation layout  into bubble layout<br />
     */<br />
    private void addNewNotification() {<br />
        BubbleLayout bubbleView = (BubbleLayout) LayoutInflater.from(MainActivity.this)<br />
                                   .inflate(R.layout.notification_layout, null);<br />
        // this method call when user remove notification layout<br />
        bubbleView.setOnBubbleRemoveListener(new BubbleLayout.OnBubbleRemoveListener() {<br />
            @Override<br />
            public void onBubbleRemoved(BubbleLayout bubble) {<br />
                Toast.makeText(getApplicationContext(), &quot;Bubble removed !&quot;,<br />
                        Toast.LENGTH_SHORT).show();<br />
            }<br />
        });<br />
        // this methoid call when cuser click on the notification layout( bubble layout)<br />
        bubbleView.setOnBubbleClickListener(new BubbleLayout.OnBubbleClickListener() {</p>
<p>            @Override<br />
            public void onBubbleClick(BubbleLayout bubble) {<br />
                Toast.makeText(getApplicationContext(), &quot;Clicked !&quot;,<br />
                        Toast.LENGTH_SHORT).show();<br />
            }<br />
        });</p>
<p>        // add bubble view into bubble manager<br />
        bubblesManager.addBubble(bubbleView, 60, 20);<br />
    }<br />
}<br />

 

Step 9

Recycle Chat Head

We need to display Chat Head even if application is closed. To implement this functionality, use recycle() method of BubbleManager class. This method will show chat head even when you android application is closed. Add this method inside the onDestroy() method of the activity.

Here is final code:

<br />
public class MainActivity extends AppCompatActivity {</p>
<p>    private BubblesManager bubblesManager;</p>
<p>    @Override<br />
    protected void onCreate(Bundle savedInstanceState) {<br />
        super.onCreate(savedInstanceState);<br />
        setContentView(R.layout.activity_main);</p>
<p>        // configure bublle manager<br />
        initializeBubbleManager();</p>
<p>        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {<br />
            @Override<br />
            public void onClick(View v) {<br />
                addNewNotification();<br />
            }<br />
        });<br />
    }</p>
<p>    /**<br />
     * Configure the trash layout with your BubblesManager builder.<br />
     */<br />
    private void initializeBubbleManager() {<br />
        bubblesManager = new BubblesManager.Builder(this)<br />
                .setTrashLayout(R.layout.notification_trash_layout)<br />
                .build();<br />
        bubblesManager.initialize();<br />
    }</p>
<p>     /*<br />
     * Inflate notifation layout  into bubble layout<br />
     */<br />
    private void addNewNotification() {<br />
        BubbleLayout bubbleView = (BubbleLayout) LayoutInflater.from(MainActivity.this)<br />
                                   .inflate(R.layout.notification_layout, null);<br />
        // this method call when user remove notification layout<br />
        bubbleView.setOnBubbleRemoveListener(new BubbleLayout.OnBubbleRemoveListener() {<br />
            @Override<br />
            public void onBubbleRemoved(BubbleLayout bubble) {<br />
                Toast.makeText(getApplicationContext(), &quot;Bubble removed !&quot;,<br />
                        Toast.LENGTH_SHORT).show();<br />
            }<br />
        });<br />
        // this methoid call when cuser click on the notification layout( bubble layout)<br />
        bubbleView.setOnBubbleClickListener(new BubbleLayout.OnBubbleClickListener() {</p>
<p>            @Override<br />
            public void onBubbleClick(BubbleLayout bubble) {<br />
                Toast.makeText(getApplicationContext(), &quot;Clicked !&quot;,<br />
                        Toast.LENGTH_SHORT).show();<br />
            }<br />
        });</p>
<p>        // add bubble view into bubble manager<br />
        bubblesManager.addBubble(bubbleView, 60, 20);<br />
    }</p>
<p>   @Override<br />
    protected void onDestroy() {<br />
        super.onDestroy();<br />
        bubblesManager.recycle();<br />
    }<br />
}<br />

 

notification bubble
 

notification layout
 

Udemy Generic 728x90

Spread the word. Share this post!

  • Rishav Chudal

    How to run those chat heads on background even if the application is closed?

    • Malik Kawee

      Make them service, and control service to run and stop them :)