单击浮动操作按钮时，片段与另一个片段重叠

Question

I am trying to open another fragment inside a fragment. However, when I click on the fab, I see the layout has been replaced but the previous fragment still stays there. I try to replace the whole layout of the profile XML but it doesn't replace properly. I tried to call it as an intent but I can't call fragment as an activity.

The Fragment:

    private RecyclerView recyclerView;
    private RecyclerView.Adapter adapter;
    private RecyclerView.LayoutManager layoutManager;
    private FloatingActionButton fab;

    public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {

        View root = inflater.inflate(R.layout.fragment_profile, container, false);
        ArrayList<ProfileItem> profileList = new ArrayList<>();

        fab = root.findViewById(R.id.fab);
        container.clearDisappearingChildren();

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AddProfileFragment fragment = new AddProfileFragment();
                Bundle args = new Bundle();
                fragment.setArguments(args);
                FragmentTransaction transaction = getActivity().getSupportFragmentManager().beginTransaction();
                transaction.replace(R.id.profile_container, fragment);
                transaction.commit();


            }
        });

The XML file I want to replace

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.profile.ProfileFragment"
    android:backgroundTint="@color/white"
    android:id="@+id/profile_container" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/content_frame" />

    <TextView
        android:id="@+id/text_profile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:fontFamily="@font/nunito_regular"
        android:text="@string/profiles"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.024"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.097"
        android:layout_below="@+id/up_toolbar"/>

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:id="@+id/profileRecView"
        android:scrollbars="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_profile"
        android:layout_below="@+id/text_profile"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_gravity="end|bottom"
        android:layout_marginRight="29dp"
        android:layout_marginBottom="70dp"
        android:backgroundTint="@color/primary_green"
        android:contentDescription="Submit"
        android:src="@drawable/ic_add" />

</RelativeLayout>

The home activity where I access the profile fragment:

  public class HomeActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        BottomNavigationView navView = findViewById(R.id.nav_view);
        Toolbar toolbar = findViewById(R.id.nav_toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
                R.id.navigation_home, R.id.navigation_data, R.id.navigation_profile)
                .build();
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
        NavigationUI.setupWithNavController(navView, navController);


    }
}

Layout of the add profile that's overlapping:

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context=".ui.addProfile.AddProfileFragment">


    <EditText
        android:id="@+id/editTextHumidityLow"
        android:layout_width="60sp"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:layout_marginTop="10dp"
        android:ems="10"
        android:inputType="number"
        app:layout_constraintStart_toEndOf="@+id/textView14"
        app:layout_constraintTop_toBottomOf="@+id/textView13" />

    <EditText
        android:id="@+id/editTextHumidityHigh"
        android:layout_width="60sp"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="number"
        app:layout_constraintStart_toEndOf="@+id/textView12"
        app:layout_constraintTop_toBottomOf="@+id/imageView3" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="25sp"
        android:layout_height="25sp"
        android:layout_marginStart="12dp"
        android:layout_marginTop="38dp"
        android:src="@drawable/ic_thermostat"
        app:layout_constraintStart_toEndOf="@+id/textView13"
        app:layout_constraintTop_toBottomOf="@+id/editTextCO2High"
        app:srcCompat="@drawable/ic_carbon_humidity" />

    <TextView
        android:id="@+id/textView13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="28dp"
        android:layout_marginTop="38dp"
        android:fontFamily="@font/nunito_bold"
        android:text="Humidity threshold"
        android:textColor="@color/black"
        android:textSize="17sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextCO2Low" />

    <TextView
        android:id="@+id/textView14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="28dp"
        android:layout_marginTop="32dp"
        android:fontFamily="@font/nunito_regular"
        android:text="Low:"
        android:textColor="@color/black"
        android:textSize="17sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView13" />

    <TextView
        android:id="@+id/textView12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="60dp"
        android:layout_marginTop="28dp"
        android:fontFamily="@font/nunito_regular"
        android:text="High:"
        android:textColor="@color/black"
        android:textSize="17sp"
        app:layout_constraintStart_toEndOf="@+id/editTextHumidityLow"
        app:layout_constraintTop_toBottomOf="@+id/imageView3" />

    <TextView
        android:id="@+id/textView10"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="38dp"
        android:fontFamily="@font/nunito_bold"
        android:text="CO2 threshold"
        android:textColor="@color/black"
        android:textSize="17sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTemperatureLow" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="28dp"
        android:text="Low:"
        android:fontFamily="@font/nunito_regular"
        android:textColor="@color/black"
        android:textSize="17sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView10" />

    <EditText
        android:id="@+id/editTextCO2Low"
        android:layout_width="60sp"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="number"
        app:layout_constraintStart_toEndOf="@+id/textView9"
        app:layout_constraintTop_toBottomOf="@+id/textView10" />

    <TextView
        android:id="@+id/textView11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="56dp"
        android:layout_marginTop="28dp"
        android:text="High:"
        android:fontFamily="@font/nunito_regular"
        android:textColor="@color/black"
        android:textSize="17sp"
        app:layout_constraintStart_toEndOf="@+id/editTextCO2Low"
        app:layout_constraintTop_toBottomOf="@+id/imageView2" />

    <EditText
        android:id="@+id/editTextCO2High"

        android:layout_width="60sp"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="number"
        app:layout_constraintStart_toEndOf="@+id/textView11"
        app:layout_constraintTop_toBottomOf="@+id/imageView2" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="25sp"
        android:layout_height="25sp"
        android:layout_marginStart="12dp"
        android:layout_marginTop="38dp"
        android:src="@drawable/ic_thermostat"
        app:layout_constraintStart_toEndOf="@+id/textView10"
        app:layout_constraintTop_toBottomOf="@+id/editTextTemperatureHigh"
        app:srcCompat="@drawable/ic_iwwa_co2" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="44dp"
        android:fontFamily="@font/nunito_bold"
        android:text="Create a new profile"
        android:textColor="@color/black"
        android:textSize="30sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="36dp"
        android:fontFamily="@font/nunito_bold"
        android:text="Name of the profile:"
        android:textColor="@color/black"
        android:textSize="17sp"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView4" />

    <EditText
        android:id="@+id/editTextProfileName"
        android:layout_width="170sp"
        android:layout_height="45sp"
        android:layout_marginStart="30dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="30dp"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toEndOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView4" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="34dp"
        android:layout_marginTop="38dp"
        android:fontFamily="@font/nunito_bold"
        android:text="Temperature threshold"
        android:textColor="@color/black"
        android:textSize="17sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="33dp"
        android:layout_marginTop="30dp"
        android:text="Low:"
        android:fontFamily="@font/nunito_regular"
        android:textColor="@color/black"
        android:textSize="17sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView5" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="60dp"
        android:layout_marginTop="30dp"
        android:text="High:"
        android:fontFamily="@font/nunito_regular"
        android:textColor="@color/black"
        android:textSize="17sp"
        app:layout_constraintStart_toEndOf="@+id/editTextTemperatureLow"
        app:layout_constraintTop_toBottomOf="@+id/textView5" />

    <EditText
        android:id="@+id/editTextTemperatureLow"
        android:layout_width="60sp"
        android:layout_height="wrap_content"
        android:layout_marginStart="3dp"
        android:layout_marginTop="10dp"
        android:ems="10"
        android:inputType="number"
        app:layout_constraintStart_toEndOf="@+id/textView7"
        app:layout_constraintTop_toBottomOf="@+id/textView5" />

    <EditText
        android:id="@+id/editTextTemperatureHigh"
        android:layout_width="60sp"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:inputType="number"
        app:layout_constraintStart_toEndOf="@+id/textView8"
        app:layout_constraintTop_toBottomOf="@+id/textView5" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="25sp"
        android:layout_height="25sp"
        android:layout_marginStart="12dp"
        android:layout_marginTop="30dp"
        android:src="@drawable/ic_thermostat"
        app:layout_constraintStart_toEndOf="@+id/textView5"
        app:layout_constraintTop_toBottomOf="@+id/editTextProfileName" />

    <Button
        android:id="@+id/button_save_profile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="40dp"
        android:backgroundTint="@color/primary_green"
        android:text="Save"
        android:fontFamily="@font/nunito_bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextHumidityHigh" />

    <Button
        android:id="@+id/button_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="16dp"
        android:text="Cancel"
        android:fontFamily="@font/nunito_bold"
        android:backgroundTint="@color/faded_gray"
        android:textColor="@color/black"
        app:layout_constraintEnd_toStartOf="@+id/button_save_profile"
        app:layout_constraintTop_toBottomOf="@+id/editTextHumidityHigh" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

AddProfileFragment fragment = new AddProfileFragment();
Bundle args = new Bundle();
fragment.setArguments(args);
FragmentTransaction transaction = getActivity().getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.profile_container, fragment);
transaction.commit();

You are trying to replace fragment in a container with id R.id.profile_container , and actually this id is not for a container in the activity layout, but it's for the root layout of the current fragment.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.profile.ProfileFragment"
    android:backgroundTint="@color/white"
    android:id="@+id/profile_container"
    >
....

To fix this, you need to have some container/placeholder ViewGroup in the activity that hosts your shared fragment, and replace the profile_container in below script with that id

transaction.replace(R.id.profile_container, fragment);

UPDATE

The first fragment transaction is handled by the AppBarConfiguration

Now you are using Navigation Architecture components for fragment transaction, and this is done with the fist fragment transaction, but you used the FragmentTransaction for the second fragment, although the navController is the responsible for fragment transaction in Navigation Architecture Components.

So, to solve you need to use the navController for the second transaction:

public View onCreateView(@NonNull LayoutInflater inflater,
                         ViewGroup container, Bundle savedInstanceState) {

    View root = inflater.inflate(R.layout.fragment_profile, container, false);
    ArrayList<ProfileItem> profileList = new ArrayList<>();

    fab = root.findViewById(R.id.fab);
    container.clearDisappearingChildren();

    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
        
            Bundle args = new Bundle();
            
            NavHostFragment navHostFragment = (NavHostFragment) mActivity.getSupportFragmentManager().findFragmentById(R.id.nav_host_fragment); 
            if (navHostFragment != null) {
                NavController navController = navHostFragment.getNavController();
                navController.navigate(R.id.navigation_profile, args);
            }
        }
    });