Android Tab with Swipeable Views using ViewPager

Android Tab with Swipeable Views using ViewPager

This article shows you how to create tab layout using fragments and viewpager. Also you can swipe between tab view as it is the functionality of viewpager which is not possible when using TabHost.

Before getting into this tutorial it is suggested to have knowledge on Fragments and ViewPager as these two are main concepts used here.  My previous article explains about the usage and implementation of fragments.

Basically we are using ViewPager as main layout and for individual pager views we use Fragments. The tabs are part of Action Bar.

Example

In this example i will demonstrate you how to work on swipeable tabs using view pager.

VIDEO DEMO

Let’s get start by creating a project in Eclipse IDE.

1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)

2.  Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. In this layout i had taken viewpager for implementing swipeable tabs.

3. Now, create three more layout xml files for fragments. I am going to use three fragments so i made three layouts for fragments and named as fragments_a.xml, frgament_b.xml and fragment_c.xml.

4. Now, make three  java files for all fragments naming FragmentA.java, FragmentB.java and FragmentC.java. In this java files just return the view(layout) that you want to show as done in earlier tutorial.

5. Finally, add the following code to your MainActivity.java. In this activity i am going to show how to make tabs and implement fragments and also to swipe between the tabs.

6. Now, run the app and you will get the output as shown in video.

Thanks. :)

Download Source Code – >

 

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)