Pourquoi ma disposition d'onglets et ma barre d'outils sont-ils affichés de la sorte?

Question

Comme vous pouvez le voir sur l'image. Ces deux ne sont pas alignés correctement. Je ne suis pas capable de comprendre pourquoi cela arrive.

Ma barre d'outils se trouve dans la présentation du coordinateur dans app_bar_main.xml et ma disposition de tabulation dans fragment_main. Je n'ai pas ajouté la mise en page de l'onglet dans la mise en page du coordinateur car je ne veux pas l'afficher dans toutes mes vues, seulement dans mon fragment de fichier principal.

Mon code app_bar_main.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"> 

    <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="wrap_content" 
      android:minHeight="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      app:popupTheme="@style/AppTheme.PopupOverlay" /> 

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

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

    </FrameLayout> 

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

code dans fragment_main.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:fitsSystemWindows="true" 
    xmlns:app="http://schemas.android.com/apk/res-auto"> 

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

    <android.support.design.widget.TabLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="40dp" 
     android:id="@+id/tabs" 
     android:backgroundTint="#FFFFFF" 
     app:tabMode="fixed" 
     app:tabGravity="fill" 
     app:popupTheme="@style/AppTheme.PopupOverlay"> 
    </android.support.design.widget.TabLayout> 

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

    <android.support.v4.view.ViewPager 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:id="@+id/view_pager_1"> 

    </android.support.v4.view.ViewPager> 

</FrameLayout> 

Pouvez-vous dire ce que je fais mal?

Image

Answer 1

Pour ceux qui ne sont pas en mesure de résoudre ce problème.

J'ai été capable de le résoudre grâce à une approche.

J'ai ajouté le code ci-dessus dans l'activité principale, puis définissez la visibilité de tablayout et de la barre d'outils dans d'autres fragments comme GONE et dans le fragment que je veux activer comme VISIBLE.

Pour définir la visibilité que vous faites parti:

TabLayout tabLayout = (TabLayout) getActivity().findViewById(R.id.tabs); 
     tabLayout.setVisibility(View.GONE); 
     ViewPager viewPager = (ViewPager) getActivity().findViewById(R.id.view_pager_1); 
     viewPager.setVisibility(View.GONE); 

Et pour la définir comme visible il suffit de remplacer avec GONE VISIBLE.

Answer 2

app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 

    android:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:fitsSystemWindows="true" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     app:elevation="0dp"> 

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

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

    <!-- The main content view --> 
    <FrameLayout 
     android:id="@+id/fragment_container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

    </FrameLayout> 

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

fragment_main.xml

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

    <android.support.design.widget.TabLayout 
     android:id="@+id/tab_layout" 

     android:layout_width="match_parent" 
     android:layout_height="50dp" 

     app:tabMode="fixed" 
     app:tabGravity="fill" 
     app:tabTextColor="@color/empty_area" 
     app:tabSelectedTextColor="@android:color/white" 
     app:tabIndicatorColor="@android:color/white" 

     android:background="@color/colorPrimary" /> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/pager" 
     android:layout_width="match_parent" 

     android:layout_height="match_parent" 
     android:layout_below="@+id/tab_layout" /> 

    <View 
     android:id="@+id/drop_shadow" 
     android:layout_width="match_parent" 

     android:layout_height="3dp" 
     android:layout_below="@+id/tab_layout" 
     android:background="@drawable/shadow_bottom" /> 

</RelativeLayout> 

L'autre façon, comme vous l'avez mentionné est de mettre la disposition des onglets à l'intérieur du AppBarLayout dans app_bar_main.xml