TabLayoutとBottomNavigationViewを組み合わせたときに何か不具合がありました

Question

TabLayoutとBottomNavigationViewを1つのTabsActivity.javaファイルに結合しようとしています。 TabLayoutはうまく機能しますが、BottomNavigationViewの問題に直面しています。フラグメントページの内容はViewPager (@+id/container)には表示されませんが、TabLayoutと表示されています。つまり、switch (item.getItemId()) {の場合です。

アプリ起動時に最初のページを読み込むしかし一番下のタブをクリックすると、すべてのタブの白いページが表示されます。任意のアイデアどのようにこの問題を解決するには？

javaの

public class TabActivity extends AppCompatActivity { 

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


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

     final SectionsPagerAdapter mSectionsPagerAdapter; 
     mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); 
     final ViewPager mViewPager; 

     mViewPager = (ViewPager) findViewById(R.id.container); 
     mViewPager.setAdapter(mSectionsPagerAdapter); 

     final TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); 
     tabLayout.setupWithViewPager(mViewPager); 

     BottomNavigationView bottomNavigationView = (BottomNavigationView) 
       findViewById(R.id.navigation); 

     bottomNavigationView.setOnNavigationItemSelectedListener 
       (new BottomNavigationView.OnNavigationItemSelectedListener() { 
        @Override 
        public boolean onNavigationItemSelected(@NonNull MenuItem item) { 
         Fragment selectedFragment = null; 
         switch (item.getItemId()) { 
          case R.id.action_item1: 
           selectedFragment = HomeTab.newInstance(); 
           tabLayout.setVisibility(View.VISIBLE); 
           break; 
          case R.id.action_item2: 
           selectedFragment = StatusTab.newInstance(); 
           tabLayout.setVisibility(View.GONE); 
           break; 
         } 
         FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); 
         transaction.replace(R.id.container, selectedFragment); 
         transaction.commit(); 
         return true; 
        } 
       }); 

     FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); 
     transaction.replace(R.id.container, HomeTab.newInstance()); 
     transaction.commit(); 


    } 

    public void do_refresh(View v){ 
     //try refresh onclick 
    } 


    private class SectionsPagerAdapter extends FragmentPagerAdapter { 

     private SectionsPagerAdapter(FragmentManager fm) { 
      super(fm); 
     } 

     @Override 
     public Fragment getItem(int position) { 
      switch (position){ 
       case 0: 
        return new HomeTab(); 
       case 1: 
        return new SecondTab(); 
       case 2: 
        return new ThirdTab(); 
       default: 
        return null; 
      } 
     } 

     @Override 
     public int getCount() { 
      return 3; 
     } 

     @Override 
     public CharSequence getPageTitle(int position) { 
      switch (position) { 
       case 0: 
        return "Home"; 
       case 1: 
        return "Second"; 
       case 2: 
        return "Third"; 
      } 
      return null; 
     } 
    } 
} 

XML

<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:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:context="com.tesrs.serv"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|enterAlways" 
      app:popupTheme="@style/AppTheme.PopupOverlay"> 


       <TextView 
        android:id="@+id/custom_toolbar_title" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginEnd="20dp" 
        android:layout_gravity="end" 
        android:onClick="do_refresh" 
        android:text="test"/> 


     </android.support.v7.widget.Toolbar> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="45dp" 
      android:background="@color/greyish" 
      app:tabTextColor="@color/inactiveblack" 
      app:tabSelectedTextColor="@color/activeblack"/> 

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

    <android.support.v4.view.ViewPager 
     android:id="@+id/container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:paddingBottom="40dp" 
     android:layout_marginTop="85dp"/> 


    <android.support.design.widget.BottomNavigationView 
     android:id="@+id/navigation" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_gravity="bottom" 
     android:background="@color/greyish" 
     app:itemIconTint="@color/black" 
     app:itemTextColor="@color/black" 
     app:menu="@menu/bottom_tab"/> 
</android.support.design.widget.CoordinatorLayout> 

Answer 1

transaction.replace(R.id.container, selectedFragment); 

は、それが選択されたフラグメントと交換するあなたのフレームのレイアウトである必要があり、ページャを表示しませ

<FrameLayout 
     android:id="@+id/container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:animateLayoutChanges="true"> 

    </FrameLayout>