How to use tabs with items within the same xml without using Fragments?

Question

I have a Activity where I’ll just need 2 tabs, one that will open right away telling a story using simple textview, and another about members of a team using gridview.

I didn’t want to use Fragments in this case, so I thought I’d put the tabs at the top, and the layouts below where I could switch using visibility VISIBLE and GONE

I thought of something in the style tab onclicklistner, but I do not know how to do this with tabs, and the examples I find on google does not show a solution to this.

I also thought about using tabhost, but I do not understand how it works, because when I put in my xml it does not appear when I run the app.

Could someone help me with this solution if possible?

If there is a way to get the tab id while clicking it would help me a lot.

The structure I made this so:

And XML is like this:

<android.support.constraint.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/SobreLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="br.com.teste.teste.SobreFragment">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabsobrepagesitens"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIndicatorColor="@android:color/white"
        app:tabSelectedTextColor="@android:color/white"
        app:tabTextColor="@android:color/white">

        <android.support.design.widget.TabItem
            android:id="@+id/tabitem_sobre_historia"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nossa história" />

        <android.support.design.widget.TabItem
            android:id="@+id/tabitem_sobre_equipe"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Equipe" />

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

    <android.support.constraint.ConstraintLayout
        android:id="@+id/cl_sobre_historia"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@android:color/white"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tabsobrepagesitens">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:text="Texto Sobre nós"
            android:textColor="@color/DarkPagesColor"
            android:textSize="30sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </android.support.constraint.ConstraintLayout>

    <GridView
        android:id="@+id/gv_sobre_equipe"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="center_vertical"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:horizontalSpacing="8dp"
        android:importantForAutofill="auto"
        android:numColumns="auto_fit"
        android:padding="8dp"
        android:verticalSpacing="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tabsobrepagesitens">

    </GridView>


</android.support.constraint.ConstraintLayout>

Answer 1

I ended up solving it this way and it worked:

final ConstraintLayout clhistoria = (ConstraintLayout) view.findViewById(R.id.cl_sobre_historia);
    final GridView gvequipe = (GridView) view.findViewById(R.id.gv_sobre_equipe);

    TabLayout tabsobreitens = (TabLayout) view.findViewById(R.id.tabsobrepagesitens);
    tabsobreitens.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            switch(tab.getPosition()) {
                case 0:
                    clhistoria.setVisibility(View.VISIBLE);
                    gvequipe.setVisibility(View.GONE);
                break;
                case 1:
                    clhistoria.setVisibility(View.GONE);
                    gvequipe.setVisibility(View.VISIBLE);
                    break;
            }
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) { }

        @Override
        public void onTabReselected(TabLayout.Tab tab) { }
    });

Even though someone knows other ways and can share I appreciate.