FragmentTransaction takes content from the previous fragment

Good afternoon.

I'm using tabs, bottomnavigation; My problem is that when I go from a tab to a BottomNavigation option, the contents of the tab fragment remain on the screen.

This is the xml where everything is located, the TabLayout and the BOTTOMNAVIGATION (BottomBar).

<android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/BarLayout"
      android:animateLayoutChanges="true"
    >

        <include
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             layout="@layout/toolbar_layout"
             app:layout_behavior="@string/appbar_scrolling_view_behavior"
             android:id="@+id/include" />


        <android.support.design.widget.TabLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:id="@+id/TabLayout"
           app:tabMode="fixed"
           app:tabGravity="fill"
           app:tabTextColor="@color/blanco"
            app:tabIndicatorColor="@color/blanco"
         />

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




 <FrameLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:id="@+id/frame"         
     app:layout_behavior="@string/appbar_scrolling_view_behavior"
     />


<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/ViewPager"
    android:layout_below="@+id/BarLayout"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    />

<com.roughike.bottombar.BottomBar
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:id="@+id/Bar"
    android:layout_gravity="bottom"
    app:bb_tabXmlResource="@xml/bottombar_tabs"
    app:bb_behavior="shifting"
    app:bb_showShadow="true"
    app:bb_activeTabColor="#fff"
    android:layout_below="@id/ViewPager"
    />

This is my activity where is the code to go from fragment and more.

public class Activity_Inicio extends AppCompatActivity {

BottomBar bar;
Toolbar toolbar;
TabLayout tabLayout;
ViewPager viewPager;
private AdaptadorViewPager adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity__inicio);


    toolbar = (Toolbar) findViewById(R.id.include);
    setSupportActionBar(toolbar);

    tabLayout = (TabLayout) findViewById(R.id.TabLayout);
    viewPager = (ViewPager) findViewById(R.id.ViewPager);
    bar = (BottomBar) findViewById(R.id.Bar);


    adapter = new AdaptadorViewPager(getSupportFragmentManager());
    adapter.AdaptadorViewPager(new FragmentLapidas(), "Lápidas");
    adapter.AdaptadorViewPager(new FragmentLozas(), "Lozas");
    adapter.AdaptadorViewPager(new FragmentTazas(), "Tazas");


    viewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(viewPager);



    bar.setOnTabSelectListener(new OnTabSelectListener() {
        @Override
        public void onTabSelected(@IdRes int tabId) {

            FragmentManager fragmentManager = getSupportFragmentManager();
            FragmentTransaction trans = fragmentManager.beginTransaction();


            switch (tabId){

                case R.id.tab_home:

                    FragmentHome home = new FragmentHome();
                    trans.replace(R.id.frame, home).commit();
                    toolbar.setTitle("Fotocerámica");
                    tabLayout.setVisibility(View.VISIBLE);

                    break;

                case R.id.tab_videos:

                    FragmentVideos videos = new FragmentVideos();
                    trans.replace(R.id.frame, videos).commit();
                    toolbar.setTitle("Videos");
                    tabLayout.setVisibility(View.GONE);

                    break;

                case R.id.tab_testi:

                    FragmentTestimonios testimonios = new FragmentTestimonios();
                    trans.replace(R.id.frame, testimonios).commit();
                    toolbar.setTitle("Testimonios");
                    tabLayout.setVisibility(View.GONE);

                    break;

                case R.id.tab_info:

                    FragmentInfo info = new FragmentInfo();
                    trans.replace(R.id.frame, info).commit();
                    toolbar.setTitle("Información");
                    tabLayout.setVisibility(View.GONE);

                    break;


            }
        }
    });
  }
}

When I go from a BottomNav option to another BottomNav option it works correctly; then summarizing my query, this would be: How to fix that, I mean that the fragment content of the tab that I select will no longer remain when I select a BottomNavigation option.

I hope you have explained me well.

I'll give you an example

The "Hello blank fragment" is the content of a tab and the "info" is the content of the "Info" option of BottonNav.