How To Create Android Swipe Views With Tabs

Android swipe views provide lateral navigation between sibling screens such as tabs with a horizontal finger gesture (a pattern sometimes known as horizontal paging). In this post, I will be using a simple android app that I created this past weekend to show you how to create android swipe views. If you have used many android apps, there is a good chance you have seen android swipe views. If not, well, this is your chance to try them. So, here is how the app looks like using swipe views.

android swipe views

What you need to create android swipe views

In order to create functioning android swipe views, you will need the following pieces at the least:

  • The android support v4 library – located in your android sdk extras folder.
  • A layout file that contains the view pager component.
  • A tabs pager adapter to manage your tabs and load the appropriate fragment into view.
  • At least one fragment to display in view when a user swipes the views.
  • An Activity that will be the main activity showing tabs.

So, let us do this so you can go out there and make the world a better place

In that same order, let us start with our main layout file.

main.xml

NOTE: the code in this xml file is not formatted correctly. I know, I need a better syntax highlighter – am planning on getting one. I apologize.

Amazingly (if that is amazing), that is all you need for that file. Pay close attention to the id because we will need it soon in our activity. Next, let us create our tabs pager adapter like this:

TabsPagerAdapter.java

As you can see, the above adapter will keep track of which tab is currently selected and loads or returns the right fragment. Pretty simple and awesome too. There are other methods from the base class that you can override but for now, those two are the ones we need. The getCount() method must return the number that represents the number of your tabs in the android swipe views.

Next, let us create one fragment – I will use the example from my app. You can, if you wish, create the other two fragments if you are following along.

CaptureMomentFragments.java

Here, I am basically inflating and returning a view that contains a text view and an image view that holds the camera button as shown in the photo above. Remember that when you extend Fragment, it has to be the one from the support library. Everything else here should be self-explanatory. That includes creating the layout for your fragment.

Next, let us put it all together and see how we can create android swipe views by crafting our main activity.

MainSwipeActivity.java

Implementing the ActionBar.TabListener interface enables us to load the correct view when a user swipes or touches one of the tabs. We then request window feature (Window.FEATURE_ACTION_BAR) – you must do this before setting content view (the view pager layout we created first).

We then have this line:

actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

which does exactly what it says. Enables tabs mode in your app.

Your android swipe views will most likely have titles to tell the users what they are getting into. So, store those in a simple list of strings.

You then loop through your list and create new tabs. I added some fonts of my own to make it look different – I like being different.

Next, you create a new instance of your TabsPagerAdapter and call the setAdapter method on the viewPager passing it the adapter instance. It takes a fragment manager – that is how it sets fragments in view.

Everything else above should be self-explanatory. And that is all you need to have working android swipe views in your awesome app. You can do more than that obviously but at least you now know how to.

Summary

If this tutorial on how to create android swipe views helped you learn something, please consider sharing this post using the buttons below. And always remember to stay awesome. Thank you for stopping by. Oh, you can always read more about android swipe views here.

Be The First To Get New Posts From Simple Developer…

Written By Elisha Chirchir

Elisha Chirchir is a software developer. He is also the founder of Simple Developer and co-founder of Instinctive Software Solutions. On any given day, he works on both Android and Web Development. During his 'free time', he offers training to those interested in learning how to code in php, java, python, javaScript etc. You can easily find him on StackOverflow Android chatroom or on Twitter @Eenvincible

12 Comments on “How To Create Android Swipe Views With Tabs

  1. فیلم ایرانی Reply

    March 28, 2015 at 7:42

    can u give us the project??

  2. Ary Reply

    March 30, 2015 at 10:04

    How to make remove title bar sir? iam googling and result null and is not work? can help sir?

  3. shahab Reply

    April 8, 2015 at 8:25

    how can I change the color tab ??

  4. […] How To Create Android Swipe Views With Tabs – SIMPLE DEVELOPER – This post shows you how to create android swipe views with tabs and fragments in your app. Android swipe views makes horizontal navigation easier for users…. […]

  5. […] How To Create Android Swipe Views With Tabs – … – Android swipe views provide lateral navigation between sibling screens such as tabs with a horizontal finger gesture (a pattern sometimes known as horizontal paging)…. […]

  6. دانلود آهنگ Reply

    June 29, 2015 at 11:25

    very good thanks .

  7. lionel Reply

    September 20, 2015 at 5:54

    thank you for the tips

  8. Dimitar Reply

    May 30, 2016 at 8:19

    Very good, Thanks!

    Would it be a good idea to move this:
    viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener()
    {
    @Override
    public void onPageSelected(int position)
    {
    actionBar.setSelectedNavigationItem(position);
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2)
    {
    }
    @Override
    public void onPageScrollStateChanged(int arg0)
    {
    }
    });

    To the constructor. No need to create new one each time tab is selected?

    • Elisha Chirchir Reply

      June 2, 2016 at 10:05

      You only need to have this code once in your main activity that has tabs!

  9. John Reply

    August 12, 2016 at 9:58

    Does not work. Lots of errors in your code.

    • Elisha Chirchir Reply

      September 4, 2016 at 3:37

      You should be able to create a functional swipe view but make sure you don’t just copy and pase!

  10. tadashi Reply

    September 23, 2016 at 1:57

    Can you tell me, where is UploadMomentFragment() and StatsMomentsFragment() ? I can find them. Thanks

    • tadashi Reply

      September 23, 2016 at 2:00

      And plz, show me your manifests

  11. James Reply

    September 27, 2016 at 4:44

    Very old and out-dated. Your should update this example to reflect changes in Android development.

Leave a Reply

Your email address will not be published. Required fields are marked *