Actionbar Tab Navigation design/issues

Question

I'm attempting to implement a pretty basic navigation structure using Actionbar tabs and fragments. Basically I have three fragments which are selected using the tabs on an actionbar. Each one of these fragments is a listview which should allow the user to select an item and open a detail view.

I'm wondering the best way to add a new fragment to the screen from an existing fragment. I currently have the detail views all implemented as activities (which obviously is not ideal since the action bar tabs aren't there, and navigation using the back button returns to tab 1 regardless of current location).

I'm adding all of the list fragments in my MainActivity;

    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        if (tab.getPosition() == 0) {
            Frag1 frag = new Frag1();
            ft.replace(android.R.id.content, frag);
        } else if (tab.getPosition() == 1) {
            Frag2 frag = new Frag2();
            ft.replace(android.R.id.content, frag);
        } else if (tab.getPosition() == 2) {
            Frag3 frag = new Frag3();
            ft.replace(android.R.id.content, frag);
        }
    }

What do I need to implement on those fragments to launch a detail view? I've attempted something like this, but navigation still does not work how I would like it.

private void onListItemClick(View v, int pos, long id) {
    Log.d(TAG, "Clicked at position: " + pos);
    NewsModel selectedModel = newsItems.get(pos);
    Log.d(TAG, "Item: " + selectedModel.getTitle());

    NewsDetailFragment fragment = NewsDetailFragment.newInstance(selectedModel);
    FragmentTransaction ft  = getFragmentManager().beginTransaction();
    ft.replace(R.id.content, fragment);
    ft.addToBackStack(null);
    ft.commit();

I'm coming generally from the iOS world so some of my paradigms might be a little out of wack with how Android is meant to function.

Thanks!

Why would navigating back always load tab 1? You should save what tab the user has selected and restore it back when your activity reloads. Otherwise, you'll have the same issue when they hit the home button and come back. — ianhanniballake
Well I suppose that's a separate (easily solved) issue than my main question. Once I have displayed a list fragment, how do I handle displaying a new 'detail' fragment and getting the desired back or up button behavior? Do I need to override any methods to unwind the transaction I just added to the backstack? — mElling

ianhanniballake ianhanniballake · Accepted Answer · 2013-04-05T02:25:36

As stated in the Supporting Tablets and Handsets training document, the standard way for using Fragments for showing a master/detail view is as separate activities on handsets (when you don't have enough room to show both) and side by side on tablets. The SDK comes with a Master/Detail sample which implements this suggestion (if you are using Eclipse, go to New->Other->Android->Android Activity->Master/Detail Flow).

You can combine this training with the tab code you already have (replacing the left side fragment when tabs are selected, probably also want to remove the detail view on the right hand side when a tab is selected as well) to get a layout that works on all Android devices.

Some additional information you might find useful is Multi-pane layout design guidelines and the entire Fragment Training set.

Actionbar Tab Navigation design/issues

1 Answers