Tabs content is visible on top of another after screen rotation

Question

I have read alot on stackoverflow on fragments issues but I cant find a solution to my problem.

I have a Tabhost and when I change rotation of the device and then select another tab, the view from the first tab is also visible. So both tabs content is on top of each other.

I'm using a a custom tablistener and every tab is a fragment. I could bypass this with android:configChanges="keyboardHidden|orientation|screenSize"but this solution gave me a list of other problems and I read that this is a bad solution.

public class TabListener<T extends Fragment> implements ActionBar.TabListener {

    private Fragment fragment;
    private final FragmentActivity activity;
    private final String tag;
    private final Class<T> myClass;
    private long id;

    public TabListener(FragmentActivity a, String t, Class<T> c, long id) {
        tag = t;
        myClass = c;
        activity = a;
        this.id = id;
    }

    /** The following are each of the ActionBar.TabListener callbacks */
    public void onTabSelected(Tab tab, FragmentTransaction ft) { 
        // Check if the fragment is already initialized
        if (fragment == null) {
            fragment = Fragment.instantiate(activity, myClass.getName());

            // Sends stored TimerClass id to fragment
            if(id != 0) {
                Bundle b = new Bundle();
                b.putLong("id", id);
                fragment.setArguments(b);
            }

            ft.add(android.R.id.content, fragment, tag);

        } else { // If it exists, simply attach it in order to show it
            ft.attach(fragment);
        }
    }

    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        if (fragment != null)
            ft.detach(fragment);
    }

    public void onTabReselected(Tab tab, FragmentTransaction ft) {
        editNameDialog();
    }
}

I dont know it this should be handled in the fragment, the activity or in the TabListener. The tabs content is viewd correctly until I change the screens orientation.

score 2 · Accepted Answer · edited May 23 '17 at 12:18

I found parts of the answer here on stackoverflow.

Solution

This is how I solved the problem. In the tab listeners I put:

fragment = activity.getSupportFragmentManager().findFragmentByTag(tag);

in both onTabSelect() and onTabUnselect()

Select correct tab after orientation change

When the screen rotates the activity is recreated(?) we need to store the last selected tab index. Save last selected tab (this goes in the activity):

@Override
protected void onSaveInstanceState(Bundle savedInstanceState) {
    super.onSaveInstanceState(savedInstanceState);
    savedInstanceState.putInt("lastTab", actionBar.getSelectedNavigationIndex());
}

To load tab index, put this in onCreate() of the activity, this way we retreive the last tab index and selects it:

if (savedInstanceState != null) {
    actionBar.selectTab(actionBar.getTabAt(savedInstanceState.getInt("lastTab")));
}

Initialize controllers in the fragment

To prevent the controls to diplay and behave odd I moved all controls inits in the fragment to onCreateView() like this:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.timer, container, false);
    initializeControls(v);
    setSeekBars(v);      
    return v;
}

I hope this will help someone else out there.

Tabs content is visible on top of another after screen rotation

1 Answers1