Android Tabs with Fragments

Evelina Vrabie

Dedicated coder, occasional blogger, hackathon goer and friendly team mate.

You may also read...

94 Responses

  1. best hack says:

    Everyone loves what you guys are usually up too. This kind of clever work and
    exposure! Keep up the awesome works guys I’ve you guys to my
    own blogroll.

  2. First off I want to say awesome blog! I had a quick question that I’d like
    to ask if you don’t mind. I was interested to find out how you center yourself and clear
    your head before writing. I’ve had trouble clearing my mind in getting my thoughts
    out there. I truly do enjoy writing but it just seems like the first 10
    to 15 minutes are generally wasted just trying to figure out how to begin.
    Any ideas or hints? Thank you!

  3. Willem Ghijsen says:

    Nevermind. I played around with it, and the strings are called from strings.xml. I originally thought it was in the java code:
    public static final String TAB_WORDS = “words”;
    public static final String TAB_NUMBERS = “numbers”;
    but that was incorrect

  4. Willem Ghijsen says:

    I was going through the code, and added an extra tab to experiment. This was successful, however, I cannot seem to find out how/why the tabs start with a capital letter, since the strings passed in are all lowercase. Does anyone know why this happens?

  5. Thanks designed for sharing such a nice thinking, piece of writing is fastidious, thats why i have read it entirely

    Feel free to surf to my web page … boom beach hack tool (http://Www.youtube.Com)

  6. An interesting discussion is worth comment. I believe that you ought to publish more on
    this issue, it might not be a taboo matter but usually people don’t
    speak about such issues. To the next! Cheers!!

    my blog Royal Revolt 2 Hack Tool

  7. thx for this tutorial !but i have a question !!
    how to hide the titles of the tabs !
    need your help !

  8. These are in fact enormous ideas in on the topic of blogging.

    You have touched some nice factors here. Any way keep up wrinting.

  9. k40s says:

    Thanks a lot for this

  10. John says:

    Very useful. Thanks

  11. bahaha says:

    Can you please post the entire source code? Where is r.id.bar defined, new to android here.

  12. vkhooda says:

    Well Blog post…By the developer for the developers….:)
    Thanks for sharing good tutorial about tab in fragments.

  13. Tom says:

    Brilliant! I was looking for use of custom tabs with fragments because I wanted to use the new Navigation Drawer! Only tutorial I can find that does what I want and I’ve been looking for 3 days! A+++!

  14. Zeus says:

    Can u pls suggest as to how can i add an onclick listener to one of the tab to open a new activity or fragment inside the same tab

  15. Zeus says:

    What if i wanted to start a child activity form one of the tabs then would the tabs still be maintained on that child

    activity as well

  16. Ankit Rohilla says:

    thank you for great tutorial
    Its working

  17. Babar says:

    Hi How can i have tabs at bottom??

  18. Shakir Orakzai says:

    wonderfull very nice

  19. arw357 says:

    Thx . usefull indeed !

  20. rashid says:

    How do i implement this using ListView instead of Creating a list of LinearLayouts? Pls help.

  21. mesi says:

    what is R.id.bar ? pls mention

  22. Jim_Welke says:

    Right on, Evalina! Great code sample; it clarified a lot things I (an Android newbie) was struggling with. Specifically, how to structure the .xml files so that configuration info and selectors work right. I appreciate the clarity in your comments, too. Thanks. Peace.

  23. Authman Apatira says:

    This project (FragmentTabs) crashes when you rotate the device 4x.

  24. dereky says:

    it really helps me a lot,thanks very much

  25. Dusan says:

    OMFG! Does anybody know why i cant set weight atribut on root LinearLayout in tabs.xml. I tryed a lot of thing, but it wont work… I want tabs to spread out to take whole screen…

  26. Dim says:

    Is it simple enough to add each fragment to the backstack such that hitting the back button returns to the previous tab?

  27. nate says:

    If you wanted to make one of the fragments a mapview how would you go about do that?

  28. Everton Barros says:

    Very nice post, I needed to do something similar, only in my case I needed to put tabs in a popup, after picking up a bit, I managed to reach the final solution. Thank you!

  29. rathael says:

    I think you must change “getListView().setAdapter(mAdapter);” by “setListAdapter(mAdapter);”.

  30. jin says:

    Hi, This tutorial really helped me a lot. I want to make a third tab, but unable to code it. Pl help for the same.

  31. CH4:D says:

    Line 106 is wrong. It should just simply be
    if (mPosition < mTotal).

    As it stands, the last element in the array won't show up if you add the "- 1" because it stops one item behind.

  32. Alex says:

    this is crashing on second orientation change

  33. binhbt says:

    Oh man. Thanks a lot. nice example :X:X:X:X:X:X:X:X::-*

  34. zx81 says:

    Hi, Thanx for nice example, saves lot of learning time.

    BTW, what is R.layout.tab in newTab() and how can I create a proper XML for that element?

  35. seetha says:

    you are superb dear….

  36. Filip Bulovic says:

    Very nice example, thanks.

  37. mith says:

    Hi. Thanks for the wonderful code and tutorial. I have a question though. How could I make the tabs scrollable as in if I add many tabs , how to make it scrollable horizontally ?
    Thanks

    • mith says:

      A quick google search helped me.. This is how I did

      Hope this helps somebody.
      Thanks

    • evelyne24 says:

      Hey, thanks for the comment. My code has become a bit obsolete because there are other people out there creating compatibility libraries to support all kinds of ICS features, including tabs, tabs + swipe, etc. Best look for Jake Wharton’s libraries (he’s the author of ActionBarSherlock). Check out this library: https://github.com/JakeWharton/Android-ViewPagerIndicator/ it probably has everything you want.

      • Thomas Markle says:

        You should add an update at the top of the post, I just found the ABSherlock library and it looks like it’s a great time saver.

  38. nicolas raby says:

    Hi, android.support.v4.app.FragmentActivity , does I mean the code requires Android v4 at least ?

  39. kyk says:

    Thanks for posting a working project!

  40. Gladiatornoida says:

    I found it in your code. Thanks!

  41. Gladiatornoida says:

    private TabSpec newTab(String tag, int labelId, int tabContentId) {
    Log.d(TAG, “buildTab(): tag=” + tag);

    View indicator = LayoutInflater.from(getActivity()).inflate(
    R.id.tab,
    (ViewGroup) mRoot.findViewById(android.R.id.tabs), false);
    ((TextView) indicator.findViewById(R.id.text)).setText(labelId);

    TabSpec tabSpec = mTabHost.newTabSpec(tag);
    tabSpec.setIndicator(indicator);
    tabSpec.setContent(tabContentId);
    return tabSpec;
    }

    Can you please give explanation for R.id.tab & indicator.findViewById(R.id.text). From where these ids come?

    • Kyle Beckman says:

      I have the same question…. any help?

      • Nelson says:

        I’m not sure about R.id.tab, but I think you actually mean android.R.id.tabs, but R.id.text is just the id of a TextView defined in the list_item.xml file. She’s not talking about it in the text, but if you download the tar file with the whole project there you can see that file, which is actually the layout for every single row displayed in the listview.

        • Nico Sordoni says:

          R.id.tab doesn’t appear anywhere, but instead appear R.layout.tab, that is the layout used as “background” for the indicators of the tabs. R.id.text is a TextView inside this layout, used to contain the text of the tab’s indicator.

  42. Tom Karni says:

    This is a greate tutorial, helped me a lot.

  43. samcool says:

    Is there an article only for fragments ? I searched around for lot of tutorials and tried implementing by following them but couldn’t get it working. I am looking for fragment implementation which will work on all the android versions. That will be really helpful. Thank you in advance.

  44. Zerotvt says:

    Thanks

  45. Dada Venki says:

    hi i have read your tutorial its nice but i have a doubt if in any tab if i want to move another screen (same tab) like clicking any of the rows in listview how it can be done any suggestion will be a great help

  46. ye009 says:

    Can you post some code for listFragment with which used customlistAdapter in setAdapter and listfragment loads data from asychTaskLoader, I am having problem with how to refresh the listfragment when data is loaded from asynchTaskLoader. Please help

  47. Vinesh Gaadhe says:

    Ohhh man u rocks… I was looking for this from last 24 hours…thanks a lot man

  48. Cloud Jacker says:

    Thanks! I dont understand what your activity is doing though, why do the individual tabs load the words and numbers so slowly? Is that a fragment feature?

    I need to use tabs to load full layouts. Ie tab 1 loads an activity and tab 2 loads a separate activity! But TabActivity and that entire methodology is deprecated, yet this fragment “replacement” isn’t very intuitive for froyo+

    • Evelina Vrabie says:

      Have you read the code? The words are loaded slowly because I wanted to simulate an operation that takes time, like a network call. If you actually read the code you’ll see there’s a Thread.sleep() that does the trick (there’s a comment that says that as well).

      About the methodology, if you think it’s deprecated then use something else that you see fit. If you find a better way, please share so we can all learn

  49. Abe Froman says:

    When I try running the code you provided I just get a loading icon that never goes away. The done loading string appears in my LogCat but nothing is appearing on the screen. If you have any ideas what I may have done wrong please let me know.

    • Brill Pappin says:

      Run it through the debugger, that’s that it’s for.
      I had to modify it as well for my project, but it works just fine.

      • Tom Karni says:

        I had the same problem when I used it in my project but not when I ran this package. Brill, how did you solve it?

      • href="http://trymyhacksandcheats.blogspot.com/hack boom beach says:

        I am actually pleased with your writing skills as well as with the structure on your own weblog. Is this a paid theme or have you modify this yourself? Either way keep up the wonderful quality writing, It’s rare to see a good weblog such as this one nowadays. You can have a pick inside my site to. It is actually regarding how to add gems and gold in Clash of Clans.

    • U Sargin says:

      i have used android-support-v13 no v4 and i have same problem

      • Tom Karni says:

        I finally solved it with:
        @Override
        public void onLoadFinished(Loader loader, Void result) {
        //update adapter

        setListShown(true);
        }

        • CH4:D says:

          God, this really solved my issue as well! I’ve been up all night trying to customize this tutorial to suit my needs but even simple label and id adjustments screw this app up.

          I don’t know if this is an android or eclipse bug but i tried tracking the changes little by little and rerunning at each change.

          It appears that if you add one extra tab to the tabs_fragment.xml the whole application gets foobar’d. However, this may not be the exact cause but probably a consequence because the issue is intermittent.

          Sometimes the loading screen shows up even if you undo the changes and uninstall the app. Sometimes it just corrects itself after a few runs.

        • rathael says:

          Try to change “getListView().setAdapter(mAdapter);” by “setListAdapter(mAdapter);”.

  50. Brill Pappin says:

    Here is anther tip. The tab in your example are left aligned.
    if you add the android:layout_weight=”1″ attribute to the root LinierLayout of tabs.xml they will spread out to take up the whole width of the screen.

    Long labels will still cause some tabs to be longer than others, but that would be an issue no matter what you did.

    It was also easy to add an image to the tabs.xml so that you get a more “iphone” like effect.

  51. Brill Pappin says:

    Best example of Tabs with Fragments i’ve seen yet. A simple as can be and the code is clean and obvious.

  52. tabbykitten says:

    Thanks for tips
    tab_1, tab_2 is overhead for tabhost_fragment.xml is overhead, you can use android.R.id.tabcontent directly

  53. Vinh Bui says:

    Thanks a lot, it’s really useful to me.

  54. peng wang says:

    thanks,it is help me .

  55. Evelina Vrabie says:

    Glad to help

  56. Jalota_arun says:

    Thnx alot…this exact i have been lokking for last 3 days…!!gr8 post thnk u!!!

Leave a Reply

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

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