why I still can't set progress bar in the center of the screen ? even though I have set it in constraint layout

Question

as you can see from the image above, the progress bar is always right below the tab layout, even though I have set the progress bar always in the center of the screen like this

but if I choose the tab index == 1 then when the progress bar will show in the center while fetching data from the internet

here is the xml I use

<?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:id="@+id/constraintLayout_upcomingPastEvent_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Fragments.Reusable.UserPage.UpcomingAndPastEventsFragment">


    <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout_upcoming_past_event"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="8dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:tabRippleColor="@null"
            app:tabTextAppearance="@style/CustomTextAppearanceTab">

        <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Akan Hadir" />

        <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Telah Selesai" />


    </com.google.android.material.tabs.TabLayout>

    <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView_upcoming_past"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scrollbars="vertical"
            android:nestedScrollingEnabled="false"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tabLayout_upcoming_past_event"
            app:layout_constraintVertical_bias="0.516"
            tools:listitem="@layout/item_general_event"></androidx.recyclerview.widget.RecyclerView>

    <ProgressBar
            android:id="@+id/progressBar_upComingPast"
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tabLayout_upcoming_past_event" />


</androidx.constraintlayout.widget.ConstraintLayout>