Display "new stories" Button like Facebook Application by an external library

Facebook application always has a lot of awesome UI designs, both on the web or mobile apps. If you have read my blog regularly, you will realize that I had some articles about sliding menu like its. Moreover, this application have an another exciting widget which I call "new posts reminding button". It will appear when your newfeed has some new stories, by clicking it, your list view will be updated.

As you can see, it's interface look like a floating action button. This UI design you also can see at another apps like 9GAG, LinkedIn. Today, in this post, I will provide a simple way to create it: using an third-party library. But I will talk a bit about FloatingActionButton widget (in Design Support library) first.

Weakness of Floating Action Button

We can find out that the FloatingActionButton always need CoordinatorLayout, we can not put it into place as we would like (here is the top/center of screen) so with this design, FloatingActionButton cannot solve our problem.
Of course, you can make it yourself but like a lazy programmer like me, I'll use a simple library called PopupBubble, with attaching the PopupBubble button with a RecyclerView, you will done this work easily.

Setting up the library

In order to use it, adding this dependency to your application level build.gradle:

compile 'com.webianks.library:popup-bubble:1.0.2'

Important Note: your project min-sdk must be 14 or higher to use this library.

Usages

The object that make the floating action button is PopupBubble. Some important xml attributes are following:

<!--Change background Color-->
    app:backgroundColor="?attr/colorPrimary"
<!--Change text -->
    app:text="New Stories"
<!--Change text color-->
    app:textColor="#ffffff"
<!--Show/Hide Icon inside the button. By default its true.-->
    app:showIcon="false"
<!--Change icon color-->
    app:iconColor="#ffffff"
<!--Set Different Icons-->
    app:setIcon="@drawable/ic_new.png"

In Java code, it has some prominent methods:

attaching it with RecyclerView by call setRecyclerView() method
By default, it is invisible, show/hide it with call show()/hide()
Add listener if you want to know when the bubble is clicked:

popupBubble.setPopupBubbleListener(new PopupBubble.PopupBubbleClickListener() {
            @Override
            public void bubbleClicked(Context context) {
                //popup_bubble is clicked  
            }
        });

Sample project code

Now I will give to readers a sample project about using it. The RecyclerView data will be updated after 10 seconds (add new items) from a background thread (by using Handler). At this moment, the bubble button will appear and if you click on it, you will be redirected to the top (like Facebook app).
Source code for RecyclerView adapter, a simple adapter based on RecyclerView.Adapter:

RecyclerViewAdapter.java

package info.devexchanges.bubblebutton;

import android.annotation.SuppressLint;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import java.util.List;

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.CustomViewHolder> {

    private List<DummyData> list;
    private Context context;

    public RecyclerViewAdapter(Context context, List<DummyData> list) {
        this.list = list;
        this.context = context;
    }


    @Override
    public CustomViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recycler_view, parent, false);

        return new CustomViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(CustomViewHolder holder, @SuppressLint("RecyclerView") final int position) {
        holder.title.setText(list.get(position).getName());
        holder.title.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(context, "item " + (position + 1) + " clicked!", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    public class CustomViewHolder extends RecyclerView.ViewHolder {
        private TextView title;

        public CustomViewHolder(View itemView) {
            super(itemView);

            title = (TextView) itemView.findViewById(R.id.text);
        }
    }
}

And this is the main activity code:

MainActivity.java

package info.devexchanges.bubblebutton;

import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.widget.Toast;

import com.webianks.library.PopupBubble;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {


    private List list = new ArrayList<>();
    private RecyclerView recyclerView;
    private PopupBubble popupBubble;
    private RecyclerViewAdapter recyclerViewAdapter;
    private LinearLayoutManager layoutManager;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        layoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);

        recyclerView.setLayoutManager(layoutManager);
        setDummyData();

        popupBubble = (PopupBubble) findViewById(R.id.popup_bubble);

        //handling onclick bubble button
        popupBubble.setPopupBubbleListener(new PopupBubble.PopupBubbleClickListener() {
            @Override
            public void bubbleClicked(Context context) {
                Toast.makeText(MainActivity.this, "ListView updated!", Toast.LENGTH_SHORT).show();
            }
        });

        //attaching bubble button with recyclerview
        popupBubble.setRecyclerView(recyclerView);

        //add new items from a background thread after 8 seconds
        addNewContent();
    }

    private void setDummyData() {
        DummyData dummyData;
        for (int i = 0; i < 20; i++) {
            dummyData = new DummyData();
            dummyData.setName("RecyclerView item " + (i + 1));
            list.add(dummyData);
        }

        recyclerViewAdapter = new RecyclerViewAdapter(this, list);
        recyclerView.setAdapter(recyclerViewAdapter);
    }

    private void addNewContent() {
        final Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                DummyData data;
                for (int i = 10; i > 0; i--) {
                    data = new DummyData();
                    data.setName("New RecyclerView item " + i);
                    list.add(0, data);
                }
                recyclerViewAdapter.notifyItemRangeInserted(0, 10);
                popupBubble.updateText("10 new items");
                popupBubble.activate();
            }
        }, 10000); //update data after 10 seconds

    }
}

The main activity layout:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />

    <com.webianks.library.PopupBubble
        android:id="@+id/popup_bubble"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_margin="16dp"
        app:backgroundColor="@color/colorPrimary"
        app:iconColor="#ffffff"
        app:textColor="#ffffff" />

</RelativeLayout>

Layout for each list view row:

item_recycler_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text=" Name"
        android:textSize="15sp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_below="@id/text"
        android:background="#dddddd" />

</RelativeLayout>

The POJO class of this project:

DummyData.java

package info.devexchanges.bubblebutton;

public class DummyData {

    private String name;

    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }
}

Running this application, we'll have this output:

Final thoughts

I had presented a simple solution to make this exciting UI created by Facebook. To deep understanding this library, you can visit it's page on Github and reading the code. In this way, the bubble button is always attached with a RecyclerView, so this is a weakness of this library, too! At the next post, I will provide another solution (customizing it myself) to make this design, coming soon!

View project on Github

Learn Programming Together