WebView inside SherlockFragment - FragmentTransaction.Detach() does not remove the webview

Question

I am using ActionBarSherlock's action bar tabs in my application with each tab populated by a single fragment inside a SherlockActivity Tabs.

One of my Tabs contains a fragment, FragmentHome, with a list of news articles. When an article is selected, FragmentHome is replaced by another fragment, FragmentNews.

FragmentNews just contains a webview to load the selected article. The article is loaded fine. I override the onBackPressed in my activity so that FragmentHome is reattached and FragmentNews is removed.

While there are no errors, the webview inside FragmentHome is never removed from the view and overlaps with other fragments. (See screenshots)

Its weird because the same code works for a another SherlockFragment with ListView in it but is messed up when using a WebView. Here is the code to replace FragmentHome with FragmentNews initially:

@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
        long id) {
    listNews.setItemChecked(position, true);
    Bundle bundle = new Bundle();
    bundle.putStringArray("NEWS",
            new String[] {
                    mNews.newsFeed.get(position).getTitle(),
                    mNews.newsFeed.get(position).getLink()
                            .toExternalForm() });

    FragmentTransaction ft = getSherlockActivity()
            .getSupportFragmentManager().beginTransaction();
    Fragment frag = SherlockFragment.instantiate(getSherlockActivity(),
            FragmentNews.class.getName(), bundle);
    ft.detach(getSherlockActivity().getSupportFragmentManager()
            .findFragmentById(getId()));
    ft.add(android.R.id.content, frag, Tabs.FRAG_NEWS);
    ft.commit();
}

Overriden onBackPressed in Tabs:

@Override
public void onBackPressed() {
    Fragment frag = getSupportFragmentManager().findFragmentByTag(
            FRAG_DETAILS);

    if (frag != null && frag.isVisible()) {
        FragmentTransaction ft = getSupportFragmentManager()
                .beginTransaction();
        ft.remove(frag);

        Fragment mFragment = getSupportFragmentManager().findFragmentByTag(
                TAB_PORTFOLIO);
        if (mFragment == null) {
            mFragment = SherlockFragment.instantiate(this,
                    FragmentPortfolioList.class.getName(), null);
            ft.add(android.R.id.content, mFragment, TAB_PORTFOLIO);
        } else {
            ft.attach(mFragment);

        }
        ft.commit();
    } else {

        frag = getSupportFragmentManager().findFragmentByTag(FRAG_NEWS);
        if (frag != null && !frag.isDetached()) {
            Log.e("onBackPressed", "for " + frag.getTag());
            FragmentTransaction ft = getSupportFragmentManager()
                    .beginTransaction();
            ft.remove(frag);

            Fragment mFragment = getSupportFragmentManager()
                    .findFragmentByTag(TAB_HOME);
            if (mFragment == null) {
                mFragment = SherlockFragment.instantiate(this,
                        FragmentHome.class.getName(), null);
                ft.add(android.R.id.content, mFragment, TAB_HOME);
            } else {
                ft.attach(mFragment);
            }
            ft.commit();
        } else {
            Log.e("onBackPressed", "inside else");
            super.onBackPressed();
        }
    }
}

Snippet from FragmentNews

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        arr = getArguments().getStringArray("NEWS");
        setRetainInstance(true);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_news, container);
        newsView = (WebView) view.findViewById(R.id.news_WV_Brief);
        newsView.getSettings()
                .setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        newsView.getSettings().setGeolocationEnabled(false);
        newsView.getSettings().setAllowFileAccess(false);

        newsView.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.e("override", url);
                return true;
            }
        });

        return super.onCreateView(inflater, container, savedInstanceState);

    }

    @Override
    public void onResume() {
        super.onResume();
        newsView.loadUrl(arr[1]);

    }

I have seen posts talking about FlashPlayer causing issues because of SurfaceView cutting a hole but I am just displaying simple webpages without any videos. Help highly appreciated.

Answer 1

I figured out the problem while going over the source code of WebViewFragment. I realized there isn't much going on other than pause/resume of webview.

I had two serious errors in my code:

1. I never returned the inflated view in onCreatView in FragmentNews. I was returning super.onCreateView(inflater, container, savedInstanceState).

2. I forgot to set attachToRoot to false in onCreateView when inflating the XML layout - View view = inflater.inflate(R.layout.fragment_news, container, **false**)

Therefore, the inflated view was just standing on its own without being attached to the fragment. When the fragment was replaced, it resulted in a mashed up display because the inflated layout containing the WebView was never removed. Unfortunately, this complied without errors.