Android issue with Tab initialization

Question

Hi,

I have a problem with a tab view on android.

I am using 4 xml layout files (each a RelativeLayout) as the content for tabs in a tab view.

The main.xml contains: TabHost (@android:id/tabhost) containing a linearLayout which contains a TabWidget (@android:id/tabs) and a FrameLayout (@android:id/tabcontent)

If I embedd the multiple one after another in the in the main.xml everything works fine... (except my main.xml is unmaintainable which is the problem i want to solve by splitting the files into a simple main.xml which defines the tab and the content frame and then push the views onto this...).

The code i have to inflate and insert the 4 RelativeLayout xml files into the tab content is as follows:

mTabHost = getTabHost();

View wv = null;
wv = LayoutInflater.from(this).inflate(R.layout.user_tab, mTabHost.getTabContentView(), true);
mTabHost.addTab(mTabHost.newTabSpec("User").setIndicator("User").setContent(wv.getId()));

wv = LayoutInflater.from(this).inflate(R.layout.track_tab, mTabHost.getTabContentView(), true);
mTabHost.addTab(mTabHost.newTabSpec("Track").setIndicator("Track").setContent(wv.getId()));

wv = LayoutInflater.from(this).inflate(R.layout.chart_tab, mTabHost.getTabContentView(), true);
mTabHost.addTab(mTabHost.newTabSpec("Chart").setIndicator("Chart").setContent(wv.getId()));

// And so on for the multiple tabs.

When i run this the first tab (User) is empty and the remaining tabs have all the content from all the views... So tab2 has the content from tab1-4, tab3 has the content from tab1-4 and tab4 has the content from tab1-4... Returning to tab1 it then has all the content from tab1-4 now.

The code works just fine, the events on the various objects in the views etc all are good... It is just that they are all muddled together in the view...

Any ideas on what is causing this and how to correct it?

Thanks in advance.

Jim

Answer 1

Any ideas on what is causing this and how to correct it?

First, replace:

setContent(wv.getId())

with:

setContent(wv)

Second, replace:

LayoutInflater.from(this).inflate(R.layout.user_tab, mTabHost.getTabContentView(), true);

with:

getLayoutInflater().inflate(R.layout.user_tab, mTabHost.getTabContentView(), false);

The key there being the false in third parameter.

Answer 2

Ok... Figured out why the original approach did not work... and fixed it... Also a great solution from @CommonsWare (Thanks!)

The solution for the original code turned out to be this:

wv = getLayoutInflater().inflate(R.layout.user_tab, mTabHost.getTabContentView(), false);
mTabHost.getTabContentView().addView(wv);
mTabHost.addTab(mTabHost.newTabSpec("User").setIndicator("User").setContent(wv.getId()));

The key point seems to be that the inflated view needs to be added to the tab content view, BUT, the id that is passed to setContent must be the new tab view I just inflated.

So, if I call inflate with true, it does the add as a sub view, but returns the parent view (i.e. the tabContent frame)... if this is the id i pass to setContent it puts all of the objects in that view on the screen... my original problem.

So, but calling with false creates the view but skips the add to parent stage, Critically however, it returns the NEW view. So, if i add this tabContentView to the frame with:

mTabHost.getTabContentView().addView(wv);

And then in the the setContent, set the id to the one for the new view, c

Bingo: works

Thanks for the help!