android: Replace fragment container inside a CoordinatorLayout

Question

I have the following XML:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<!--I use this include as container with the FrameLayout below-->
<!--<include layout="@layout/content_main" />-->
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.improvemybrand.MainActivity"
    tools:showIn="@layout/app_bar_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</FrameLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_input_add" />

and the problem is simple:

When I try to replace the container FrameLayout from my Coordinator, it does not work, it shows the new fragment but also keeps the old one, in my simple example, the TextView with Hello world will remains.

To replace, I'm using the following code:

FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.replace(R.id.content_main, fragment);
        transaction.commit();

Any ideas?

Answer 1

FragmentTransactions deal only with Fragments and their Views. The TextView you've defined in your layout is not (part of) a Fragment's View, so it will not be affected by a FragmentTransaction, and the Fragment in your snippet will just be added on top of it.

You have a few options. You could hide or remove the TextView yourself when performing the transaction. This might be preferable, if that simple TextView is all you need initially, and sticking it in a Fragment could be overkill. You could also simply set an opaque background on the Fragment's layout, which will effectively hide the TextView.

The probably best option, however, is to put the TextView in a layout for another Fragment which is loaded at startup. Subsequent transactions will then replace/remove it as you're expecting. Do note that any Fragment you wish to replace/remove at runtime must be loaded dynamically in your code. That is, they cannot be defined in <fragment> elements in your Activity's layout.