Tabs and swipe views

In the post Tab Layout in Android with ActionBar and Fragment I explain how to implement tabs and in the post Swipe views I explain how to implement the swipe views or scrolling tabs using the ViewPager of the Compatibility Package.
In this post I explain how to implement 3 tabs that look like those in the post Tab Layout in Android with ActionBar and Fragment but with similar functionality to the swipe views.
In Implementing Effective Navigation there is an example for this type of layout using ViewPager and FragmentPagerAdapter, which are part of the Compatibility Package.
I noticed that you get a similar code similar when you create a new Android project using Android SDK Tools Revision 20, and choosing as the Navigation Type in the project creation wizard “Tabs + Swipe” as shown.

The code in this post is similar to that in Implementing Effective Navigation but with the change that the layout of the fragments are taken from file .xml

  1. create an Android project
    • Build SDK: API 16
    • Minimum required SDK: API 14
    • don’t create activities
  2. import the Compatibility Package; maybe you already imported it if there is a directory “libs” with the file android-support-v4.jar, otherwise you do a right click on the project and select Android Tools -> Add Support Library or follow the instructions in Support Library
  3. edit the file AndroidManifest.xml
  4. edit the file res/values/strings.xml
  5. create the files main.xml, tab1.xml, tab2.xml e tab3.xml in the directory res/layout
    • main.xml
    • tab1.xml
    • tab2.xml
    • tab3.xml

      the file main.xml contains a reference to ViewPager but it is missing the part on the bar of the tabs as defined in Swipe views;
      the files tab*.xml contain the layout of the fragments
  6. create the file eu/lucazanini/viewpager/

    the main class extends FragmentActivity and not Activity as usually;
    in the event onCreate you bind an instance of FragmentPagerAdapter (mCollectionPagerAdapter) to an instance of ViewPager (mViewPager) defined in the file main.xml and it is very important you enable the NAVIGATION_MODE_TABS for the actionBar;
    in the inner class CollectionPagerAdapter you define the number of the tabs (NUM_ITEMS) and override 3 methods: getItem in which you create the fragments, getCount that simply returns the number of the fragments (tabs) and getPageTitle that returns the labels of the tabs; in an other inner class TabFragment you create the fragments choosing the layout depending on the bundle passed to the fragment in the CollectionPagerAdapter;
    the class CollectionPagerAdapter is not static like in Implementing Effective Navigation in order to get the string resources in the method getPageTitle, otherwise you need a static Context in the main class
  7. launch the app

47 replies on “Tabs and swipe views”

Great tutorial! I’m trying to do the exact same in a project I’m working on. I followed your tutorial and it worked perfectly on its own as the main activity but when I set it to open as a separate activity with an intent the app always crashes. Any ideas why that might be?

I figured it out: I started making the app and only later tried to implement the tabs. The original was too low an API and didn’t have an ActionBar configured. That’s why the newer ones worked, I had started them with this layout in mind.

Thanks again for the help

ciao luca!
Grazie per la guida.
piccola domanda…se dovessi interagire con degli elementi delle varie tab? per esempio se volessi scrivere un messaggio su un textView come posso recuperare l’id ?
con findViewById ottengo sempre null.


findViewById restituisce l’oggetto con un determinato id in un file di layout; nel file xml, ad esempio, una TextView è dichiarata:

Una spiegazione veramente molto ben fatta e lineare.

Vorrei però porti un quesito:
io ho messo nella prima tab uno Spinner (riempito dinamicamente con dati di un db) e una EditText per l’inserimento di stringhe per la ricerca all’interno dello Spinner.
Il problema è che quando cambio e vado alla terza tab e poi torno alla prima non trovo i dati caricati nello spinner, mentre ad esempio rimangono le stringhe inserite nelle EditText.

Puoi aiutarmi a risolvere questo problema?

great tutorial, helped me a lot to add tabs to my project, thanks a lot!!!

But how can I use icons instead of text set @ tabLabel = getString(R.string.label1); for the tabs?

Thanks in advance!

Complimenti !!
Grande Tutorial….ho però un problema….quando l’ applicazione la faccio partire sull’ emulatore è tutto O.K.
Di contro ho problemi quando cerco di farla girare sul mio smartphone samsung s plus quando lancio l’ esecuzione non compare il il dispositivo per poterlo selezionare … è un problema che ho solo con questo progetto….
Sarà forse legato all’ Api 14 ?

Grazie mille !!

Se il dispositivo non compare nell’elenco fra quelli disponibili significa che è escluso sulla base di quanto specificato nell’AndroidManifest.xml e probabilmente il samsung s plus ha le API 10.

Bellissima guida è molto utile, però ho un problema, ho inserito un bottone nel file tab1.xml questo ha la funzione di aprire un altra activity, però quando vado a cliccare su di esso non funziona e non riesco a capire il perché.

Nice…. i have wasted 3 days for implementing tab+swipe together……. finally i got a base idea from ur tutorial…. really thanks. :):):)

Complimenti per il Tutorial, Una domanda:
Ho provato ad inserire un precedente xml all’interno del tab1, nel mio xml era presente una ListView il cui layout era preso da un’altro xml (row.xml).
Prima dell’implementazione dei tabs l’applicazione visualizzava correttamente la ListView, adesso mi da un’errore di compilazione nell’ attributo tools:listitem=”@layout/row” e l’errore e’: Attribute is missing the Android namespace prefix .
hai una qualche idea per risolvere il problema?

I have the same question as a previous person (Hussain). Each tab will show a different layout with its own class which includes accessing a SQLite Database. It should be something like the this:

int tabLayout = 0;
switch (position) {
case 0:
//start new intent
case 1:
//start new intent
case 2:
//start new intent

I could not understand what meant in the reply. I´ve been searching day and night for help on this and I cannot find a suitable tutorial anywhere. I´ve followed two of your excellent tutorials, this and the swipe, but it just doesn´t help when each tab is meant to show a different class, with its own operations.


Hi, awesome tutorial! Easy to follow, I just have one question: I am using your sample for a project and I want to get rid of the tabs at the upper portion. I would just like to be able to slide through different activities without seeing the tabs.

Thanks in advance!

Hi, I have a little problem with webview fragment and ViewPager. To be more specific, with reloading webview after swipe tab. I know that you made a tutorial with onPause() method in which you describe how to avoid reloaidng, but I think that it doesn’t works with this tutorial.
An in addition another question. I made a progressdialog whish is showing while loading pages. After I added viewpager it doesn’t disappear when page is loaded. How to fix it, or add progressbar in actionbar directly?

Nice tutorial, but can any one helps me to start new Intent on each tab selected

int tabLayout = 0;
switch (position) {
case 0:
//start new intent
case 1:
//start new intent
case 2:
//start new intent

In this example you must use Fragments or classes extending Fragments, but Intents launch activities, services or broadcast receivers.

You might be missing

int position = args.getInt(ARG_OBJECT);

int tabLayout = 0;
switch (position) {
case 0:
tabLayout = R.layout.tab1;
case 1:
tabLayout = R.layout.tab2;
case 2:
tabLayout = R.layout.tab3;

In the onCreateView method.

While navigating from one tab to another I am getting a runtime exception which says ResourcesNotFoundException. Although all layouts have been registered.

Thanks for this tutorial. I have a question. How can I set listener to editText in tab1. xml. I was trying to set it in mainActivity, but the null pointer error shows. I realised that app is searching for this editText in main.xml, not in tab1.xml. I think I should make tab1.class, and move all methods from mainActivity, to that new class. Can You give me some hints?

You can replace the inner class TabFragment:

Otherwise you can implement OnClickListener and override onClick

Hey, Luca.

Great tutorial. I was trying for sometime to do this and finally got it.
But now i’ve got another problem, maybe you can help me.
I’m trying to setText a TextView on a tab_.xml, but i keep getting NullPointerException.
After some research, i found out that’s something about the tab_.xml not being the main view, so i cant access de TextView id;
So… how can I access the tab_’s content?

Thanks. o/

In the inner static class TabFragment, in the onCreateView event you can set the text of a TextView:

In the innser class CollectionPagerAdapter, in the getItem event you can set the text of a TextView:

Very nice tut !! I’m looking for a tut like this one since a long time. Can you explain also how to load fragment instead of xml view ??

Best regards

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.