Нижняя панель навигации: при попытке заменить текущий фрагмент кнопкой вне навигационной панели она помещается поверх, а не заменяется

Question

так что я работаю над групповым проектом android, и один из парней из моей команды использовал https://github.com/aurelhubert/ahbottomnavigation. Мы все плохо знакомы с android, поэтому он не совсем понимает, что он делает, и я тоже.Не похоже, что он использует транзакцию фрагмента для переключения между вкладками, что меня смущает.

По сути, моя проблема в том, что одна из вкладок на нижней панели навигации - это моя домашняя страница, и ясоздал там кнопку для отправки мне другого фрагмента для профиля пользователя.

ImageButton profileButton = (ImageButton) rootView.findViewById(R.id.profile_button);

    profileButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            FragmentTransaction fragmentTransaction =  getActivity().getSupportFragmentManager().beginTransaction();
            fragmentTransaction.replace(R.id.coordinator, new ProfileFragment());
            fragmentTransaction.commit();
        }
    });

Но это вовсе не заменяет текущий фрагмент, а просто помещает его сверху.Тогда фрагмент профиля остается сверху, даже если вы используете нижнюю панель навигации для переключения на другой фрагмент.

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

<ImageButton
    android:layout_width="50dp"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:src="@drawable/ic_profile"
    android:background="@null"
    android:id="@+id/profile_button"
    />

<include
    layout="@layout/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</LinearLayout>

А затем content_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.example.william.homepage.MainActivity"
tools:showIn="@layout/activity_main">


<com.dinuscxj.progressbar.CircleProgressBar
    android:id="@+id/custom_progress5"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_marginTop="25dp"
    android:gravity="center"
    app:progress_background_color="@color/holo_darker_gray"
    app:progress_end_color="@color/holo_green_light"
    app:progress_start_color="@color/holo_green_light"
    app:progress_stroke_width="10dp"
    app:progress_text_color="@color/holo_green_light"
    app:progress_text_size="40dp"
    app:style="solid_line" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textSize="20sp" />

<TextView
    android:id="@+id/count"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:textSize="60sp" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Total Steps"
    android:textSize="30sp"
    android:visibility="visible" />


<Button
    android:id="@+id/logout_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Logout" />

</LinearLayout>

А затем Activity_main.xml.Первоначально я попытался заменить на R.id.viewpager, но затем текущий домашний фрагмент исчезает, а фрагмент профиля - нет, это просто пустой экран.

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.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:id="@+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

<edu.umd.arturomcgill.healcity.NoSwipePager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:background="#EFEFEF"/>

<com.aurelhubert.ahbottomnavigation.AHBottomNavigation
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"/>

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

Если кто-то может сказать мне, где ячто-то пошло не так и как заставить отображаться фрагмент профиля, я бы очень, очень признателен.Спасибо!