Remember the old Facebook Messenger app? In this tutorial, I’m going to teach you how to create a Facebook Messenger like layout using Android Design library, Fragments and ViewPager. I’ll also teach you how to support multiple screens by adding different sizes of drawable in your project.

What are fragments?

A fragment is a portion of the user interface in an activity. They are available since Android 3.0. They improve the UI reusability and allows the developer to create a multi-pane UI by combining multiple fragments into a single activity or using the same fragment in multiple activities.

You can add several fragments to an activity to build UI. In our tutorial, we’re going to use fragments as the content of our messenger tabs. In the old version of the Facebook messenger tab, we have the tabs calls, friend list, group chats, profile, and recent chats.

Characteristics of Fragments

  • Can be added or removed to an activity while/during run-time.
  • Have their own layout with their own lifecycle callbacks.
  • Can be used in different activities.

We’re also going to use the Android support design library. By default, it is not included when you create a new Android Studio project. You can include it by adding this line in your build.gradle under dependencies.

Make sure that the version of the appcompat library is the same as the version of you design library. You can find build.gradle here.

 

Since we’re going to use images in our tabs, It is very important to adjust the drawable we’re going to use depending on the mobile’s screen size. We can do this by creating multiple sizes of drawables just like this.

We need to create a new drawable directory where we’ll place the assets. You can do this by:

  1. Right click on res folder.
  2. Choose new then Android resource directory.
  3. Choose the Resource type as drawable then edit the directory name. Create three new directories namely drawable-hdpi, drawable-xhdpi and drawable-xxhdpi.

Now copy the all icons I provided in its proper directory. You can download it here. Download Link

 

Let’s start by creating our project’s other classes. We need five fragments for the tabs. To make the structure of our project neat, let’s create a new package for the fragments. Just follow the structure below.

As we talked about fragments earlier, they need to have their own layout. So create an xml layout file for each fragments. You should have something like this.

Just change the text for every fragment to distinguish it from others. Now open the fragment classes and copy the codes below.

 

Now open colors.xml under res>values folder then change the default color code of the following.

 

Open styles.xml and add the following code. This will remove the action bar in our main activity.

 

Create a new drawable named button_rounded.xml. This drawable will be the background of our search button.

 

Let’s now work on the layout in our activity_main.xml. This will make your layout look like the old version of Facebook Messenger app.

 

Finally, open MainActivity.java then copy and paste the codes provided below.

 

To make the ViewPager working, we need to create an adapter for it and by extending FragmentPagerAdapter.. We’ll name that as ViewPagerAdapter.java.

Now you can run and test you app if it is working. The final output of this tutorial should be like this.

If you’re having trouble reaching up to this point, then you can download the full source code here: Download Link