Search code examples
androidandroid-tabhost

Create Tabs in TabHost with different content


In my application I can create Tabs for a TabHost view with this code:

TabSpec spec1 = tabHost.newTabSpec("1");
spec1.setContent(R.id.tab1);
spec1.setIndicator("1");   

tabHost.addTab(spec1);

My problem now is that I do not know how many tabs I have to create (the number is generated at runtime). For every tab I have to call setContent with a layout id but if I use the same layout id for different tabs thees tabs allways have the same content. How can I create so many tabs with different contents as I need?

This is my current code which creats two tabs but with the same layout at all:

TabSpec spec1=tabHost.newTabSpec("1");
spec1.setContent(R.id.tab1);
spec1.setIndicator("1");

LinearLayout v = (LinearLayout) tabHost.findViewById(R.id.tab1);
TextView tv = new TextView(getActivity());
tv.setText("Hello World");
v.addView(tv);

tabHost.addTab(spec1);

TabSpec spec2=tabHost.newTabSpec("2");
spec2.setContent(R.id.tab1);
spec2.setIndicator("2");      

tabHost.addTab(spec2);

Solution

  • I'm attaching you a way of creating tabs dynamically. There's not any difficulty doing them, you just have to be clear what you're doing. I'm adding as much comments as I can:

    // This function defines the layout itself. In my case, my tab bar is made
    // of a customized layout called 'tabs_bg', so I simply inflate my layout.
    // You don't need to do this actually if you've enough with the default
    // Android's layout. You don't need to call this function explicitely, the 
    // function below does that.
    private View createTabView(final Context context, final String text) {
      final View view = LayoutInflater.from(context).inflate(R.layout.tabs_bg, null);
    
      // In my customized layout, I have a TextView and an ImageView, I just set
      // some parameters on them.
      final TextView tv = (TextView) view.findViewById(R.id.tabsText);
      final ImageView iv = (ImageView) view.findViewById(R.id.tabsIcon);
    
      tv.setText(text);
      iv.setLayoutParams(new LinearLayout.LayoutParams(..., ...));
    
      return view;
    }
    
    // Each time you want to create a new tab, call this method, which
    // will call the above one. So if you want to have a TextView as a content,
    // you'd call: setupTab(new TextView(this), "My personal tab");
    private void setupTab(final TextView view, final String tag) {
      final TabHost th = (TabHost) findViewById(android.R.id.tabhost);
    
      // The line below will create the tab in the tab bar
      final View tabview = createTabView(th.getContext(), tag);
    
      // And this code will create the content, take a look at the TabContentFactory part
      final TabSpec setContent = th.newTabSpec(tag).setIndicator(tabview).setContent(new TabContentFactory() {
        public View createTabContent(String tag) {
          // Here tabs_content is created in a similar way than the tab layout itself,
          // with a layout file which is later inflated. All those ID's are from that file.
          final View ll_view = LayoutInflater.from(context.inflate(R.layout.tabs_content, null);
          final TextView view = (TextView) ll_view.findViewById(R.id.tabsContent);
    
          view.setMovementMethod(new ScrollingMovementMethod());
    
          // Anything else you may need... This is the content that should vary
          // on each tab!!!
          view.setText("Hello, this is my tab number: " + th.getChildCount() + 1);
    
          return ll_view;
        }
      });
    
      // There you assign your content you just created.
      th.addTab(setContent);
    }