Android: problème de chevauchement avec plusieurs fragments sous MainActivity contenant des tabulations

Question

Je suis confronté à ce problème où j'ai 3 onglets dans MainActivity et chaque onglet contient un fragment. Lorsque je clique sur un élément sous le tiroir pour démarrer un nouveau fragment, il se chevauche dans la vue Tabulations de MainActivity. Voici mon code:

Fragment currentFragment; 

    @Nullable 
    @Override 
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, 
          @Nullable Bundle savedInstanceState) { 

     viewInflate = inflater.inflate(R.layout.fragment_city, container, false); 

     return viewInflate; 
    } 

    @Override 
    public boolean onNavigationItemSelected(MenuItem item) { 

     // Handle navigation view item clicks here. 
     Intent i; 
     int id = item.getItemId(); 

     if (id == R.id.nav_home) { 
      TabLayout tl = (TabLayout) findViewById(R.id.main_tabs); 
      tl.setVisibility(View.VISIBLE); 
      showFragment(new HomeFragment()); 
      setTitle(R.string.app_name); 
     } 
     if (id == R.id.nav_about_us) { 
      TabLayout tl = (TabLayout) findViewById(R.id.main_tabs); 
      tl.setVisibility(View.GONE); 
      showFragment(new AboutUsFragment()); 
      setTitle(R.string.about_us); 
     } 
     if (id == R.id.nav_favorites) { 
      TabLayout tl = (TabLayout) findViewById(R.id.main_tabs); 
      tl.setVisibility(View.GONE); 
      showFragment(new FavoritesFragment()); 
      setTitle(R.string.favorites); 
     } 
     if (id == R.id.nav_settings) { 
      i = new Intent(this, SettingsActivity.class); 
      startActivity(i); 
     } 

     DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); 
     drawer.closeDrawer(GravityCompat.START); 
     return true; 
    } 

    public void showFragment(Fragment fragment) { 

     if (currentFragment != null && fragment.getClass().equals(currentFragment.getClass())) 
      return; 

     currentFragment = fragment; 
     FragmentManager fragmentManager = this.getSupportFragmentManager(); 
     if (fragmentManager == null) 
      return; 

     FragmentTransaction ft = fragmentManager.beginTransaction(); 
     if (ft == null) 
      return; 

     ft.replace(R.id.content_frame, fragment).commitAllowingStateLoss(); 
    } 

est sous le code xml fragment_city.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/content_background" 
    tools:context="com.creationjunkies.fragments.CityFragment"> 

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <android.support.v4.widget.SwipeRefreshLayout 
      android:id="@+id/swipe_refresh" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" > 

      <android.support.v7.widget.RecyclerView 
       android:id="@+id/cityBargainsRecyclerView" 
       android:scrollbars="vertical" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent"/> 
     </android.support.v4.widget.SwipeRefreshLayout> 
    </RelativeLayout> 

</FrameLayout> 

Et activity_main.xml code est:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.DrawerLayout 
    android:background="@color/content_background" 
    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/drawer_layout" 
    android:fitsSystemWindows="true" 
    tools:openDrawer="start" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="com.creationjunkies.cities.MainActivity"> 

    <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"> 

     <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" 
       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:background="?attr/colorPrimary" 
       app:popupTheme="@style/AppTheme.PopupOverlay"> 

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

      <android.support.design.widget.TabLayout 
       android:id="@+id/main_tabs" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" /> 

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


     <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" 
      app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior" 
      android:orientation="vertical"> 

      <FrameLayout 
       android:id="@+id/frameTopAds" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 
      </FrameLayout> 

      <FrameLayout 
       android:id="@+id/content_frame" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:layout_weight="1"> 

       <android.support.v4.view.ViewPager 
        android:id="@+id/tab_container" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior" /> 

      </FrameLayout> 

      <FrameLayout 
       android:id="@+id/frameAds" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 
      </FrameLayout> 

     </LinearLayout> 

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

    <android.support.design.widget.NavigationView 
     android:id="@+id/nav_view" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_gravity="start" 
     android:fitsSystemWindows="true" 
     app:headerLayout="@layout/nav_header_main" 
     app:menu="@menu/activity_main_drawer" /> 

</android.support.v4.widget.DrawerLayout> 

Votre aide est très appréciée!

Answer 1

Définir l'arrière-plan du fragment comme étant blanc. Cela résoudra le problème.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="#ffffff" 
tools:context="com.creationjunkies.fragments.CityFragment"> 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.v4.widget.SwipeRefreshLayout 
     android:id="@+id/swipe_refresh" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" > 

     <android.support.v7.widget.RecyclerView 
      android:id="@+id/cityBargainsRecyclerView" 
      android:scrollbars="vertical" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"/> 
    </android.support.v4.widget.SwipeRefreshLayout> 
</RelativeLayout>