How to use Master/Detail Flow together with Tabs on Android

Question

I want to achieve the following layout to my android-application (upper layout for tablets, lower layout for smartphones) including the capability of swiping between the subitems:

So I've created a Master/Detail-Flow Activity with Eclipse, which works fine. For the tabs I've taken a look at the Support-Library Samples (<sdk>/extras/android/support/v4/samples/), where a beautiful example is given (FragmentTabsPager.java), which extends the FragmentActivity class and makes use of ViewPager and the TabHost-Widget.

My idea was to combine both examples into one application, so instead of using the TabPage as Activity, I want to use it as Fragment. On a smartphone this works nice, but on a tablet it works only once (meaning that when started for the first time, the content is loaded correctly, but as soon as I click on another item in the left list, no more content is loaded). To be more precise: The tabs are loaded and have the correct label, but the content that should be shown in the content-area of the tab is not there, although you can swipe between the tabs, as if the content was there.

My questions are:

• Is this approach meaningful (to combine master/detail with tabs)? Or should I use a completely different approach?
• Do you know how to fix the issue, that the content is not loading properly?

To make it easier to see, I've created a demo-app from scratch with exactly this idea, which can be downloaded from https://github.com/apacha/MasterDetail_And_Tabs.

Related posts on Stackoverflow that didn't fix the issue: ViewPager PagerAdapter not updating the View,

Edit1: I've learned about http://developer.android.com/reference/android/support/v4/app/FragmentTabHost.html and found Android FragmentTabHost - Not fully baked yet?. With these hints I managed to get it almost running, but now I can chose between a working version which does not provide swipe-support (if I add the Tabs directly to the tabHost:

FragmentTabHost mTabHost = new FragmentTabHost();
// Add directly to tab-host
mTabHost.addTab(mTabHost.newTabSpec("simple1").setIndicator("Simple1"), CountingFragment.class, b);

of a buggy swipe-implementation if I add it and use the FragmentPagerAdapter

FragmentTabHost mTabHost = new FragmentTabHost();
ViewPager mViewPager = (ViewPager) rootView.findViewById(R.id.pager);
TabsAdapter mTabsAdapter = new TabsAdapter(getActivity(), mTabHost, mViewPager);
// Add to tab-host-adapter
mTabsAdapter.addTab(mTabHost.newTabSpec("simple1").setIndicator("Simple1"), CountingFragment.class, b);

I've commited all changes to the repository mentioned above.

Unapproachable

Did you solve this issue? I would like to have exactly the same structure that you mentioned, and was thinking about taking a similar approach – Elementary

Unfortunately not. But if you get it up and running, it would be great, if you could add the solution to the repository above for future visitors that encounter the same problem (create a pull-request). – Unapproachable

Answer 1

I have implemented simple master-slave design in here https://github.com/ycagri/MasterSlave.

I kept it in a public repo. If you want to play with and add some more features, feel free to fork. savedInstanceState can be implemented for orientation changes.

Basically, project has two layouts for MainActivity inside layout and layout-sw600dp-land folders. In tablet landscape, fragments defined inside the layout. Otherwise, fragments added using fragment manager. If you can find slave fragment from the layout, you are using tablet with a landscape mode.

Hope this helps...

Fingerling