Clicking on Fragment goes through in Activity

Question

I have a button in my MainActivity that opens FragmentA. FragmentA covers the whole screen, but I still see the button from MainActivity, and I can still click on it.

I've tried using clickable in my fragment layout but it's not working

MainActivty

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        button.setOnClickListener {
            val fragmentManager = [email protected]
            fragmentManager.beginTransaction()
                .add(R.id.fragment_container, AFragment())
                .addToBackStack(null)
                .commit()
        }
    }

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:id="@+id/fragment_container">

    <Button
            android:text="Button Main"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button" app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>

fragment_a.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:clickable="true"
              android:focusable="true">
              android:background="@color/colorPrimary"
    <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="A"/>

</LinearLayout>

Answer 1

This is happening because you placed your Button inside of the ConstraintLayout you're using as the container of your Fragment.

When you add a fragment into a container like what you're doing, it's simply adding it in the same manner as if it was a View.

Therefore, if you add a Fragment into a ConstraintLayout that already possesses a Button as a child, the Fragment will be shown alongside the Button due to ConstraintLayout allowing for overlapping Views.

This is also why, if your container was a LinearLayout, then adding a Fragment will place the fragment underneath your Button instead.

So, with that in mind, the solution would be to handle it as if they were Views.

If you added a View into a layout and you have another View overlapping, how would you get rid of it?

The most common solution would be to set the Button's visibility to INVISIBLE or GONE when the Fragment is added.

Another solution might be to raise the elevation of the Fragment, so it's now higher than your Button.

Of course, you may also remove the button from the Container and place it inside a Fragment too.

This way, you can use the replace() method in a FragmentManager to replace the Fragment containing your Button with the Fragment you want to show.