How do I fix fragment overlaping with main_activity fragment in Kotlin

Question

So I have a layout\activity_main.xml file that appears on screen as soon as the user launches the app. I then have fragment called fragment1.xml. In my activity_main.xml I have a settings button that should launch fragment1.xml on screen and it does but everything from activity_main.xml is in the background so in a sense, fragment1 is transparent. Here's the contents of activity_main.xml

<?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"
    android:orientation="vertical"
    android:padding="16dp"
    android:gravity="center_horizontal">

    <FrameLayout
        android:id="@+id/fragment1ID"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toBottomOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
   ///Remaining layout addons

</androidx.constraintlayout.widget.ConstraintLayout>

I've assigned the settings button and fragment as follows:

settingsBtn.setOnClickListener {
            val fragment = Fragment1() 
            val transaction = supportFragmentManager.beginTransaction()
            transaction.replace(R.id.fragment1ID, fragment) 
            transaction.addToBackStack(null)  
            transaction.commit()
        }

I'll provide the code for fragment1.xml

<?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"
    android:background="@color/pink"
    >




    <TextView
        android:id="@+id/instructions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Please enter the temperature and humidity."
        app:layout_constraintBottom_toTopOf="@+id/editTextText2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editTextText"
        android:layout_width="132dp"
        android:layout_height="77dp"
        android:layout_marginStart="48dp"
        android:layout_marginTop="204dp"
        android:ems="10"
        android:inputType="text"
        android:text="Temperature"
        app:layout_constraintBottom_toTopOf="@+id/enterBtn"
        app:layout_constraintEnd_toStartOf="@+id/enterBtn"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.154" />

    <EditText
        android:id="@+id/editTextText2"
        android:layout_width="132dp"
        android:layout_height="77dp"
        android:layout_marginTop="204dp"
        android:layout_marginEnd="48dp"
        android:ems="10"
        android:inputType="text"
        android:text="Humidity"
        app:layout_constraintBottom_toTopOf="@+id/enterBtn"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/enterBtn"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.156" />

    <Button
        android:id="@+id/enterBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="Enter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Here's a screenshot of when the user clicks on the settings button:

I tried adding a solid colour like the pink one as seen in one of the screenshots but that didn't seem to work as suggested by what I found online.