How to move from (and replace) TabLayout and ViewPager to a new fragment?

Issue

I want to navigate from my main screen (which uses a TabLayout and a ViewPager) to a new fragment (which is not a tab).

I want my new fragment to completely cover the screen (and not be a part of the ViewPager).

You can see below how the (upper half of the) main screen looks like, it has 4 tabs.

This is how the new fragment on top of the main fragment looks like. It was shown after clicking on "Study" from the main screen. As you can see, the TabLayout and ViewPager are not displayed anymore.

In other words, when I am in the main screen (which has a TabLayout and ViewPager) and I perform an action (clicking on Study for example) I want to show a new fragment that covers the entire screen (including the TabLayout and ViewPager). I don't want this new fragment to be a new tab in the TabLayout and ViewPager and I don't want the new fragment to replace another tab. I want the new fragment to completely replace what was previously shown on the screen.

If it helps understanding the question, this how my activity_main.xml (main screen) looks like (it's not the one from the photos). I want to move from here to a new fragment and completely replace this activity_main.xml layout with the new fragment.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".MainActivity">

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/Theme.MyApp.AppBarOverlay">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:tabSelectedTextColor="@android:color/white"
        app:tabTextColor="@android:color/darker_gray" />
</com.google.android.material.appbar.AppBarLayout>

<androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Solution

I found a solution:

val trans = supportFragmentManager.beginTransaction()
trans.replace(android.R.id.content, MyNewFragment())
trans.addToBackStack(null)
trans.commit()

Another solution would be moving the contents of activity_main.xml in a new Fragment and using the nav_graph.xml for navigation.

Answered By - Cristian