ViewPager chevauche AppBarLayout

Question

Je suis en train d'installer une mise en page pour un Activity qui contiendra N Fragments. Dans la mise en page que je l'ai utilisé un ViewPager et un AppBarLayout, le problème que je suis confronté est que le ViewPager chevauche la AppBarLayout comme vous pouvez le voir sur la capture d'écran:

Ceci est mon activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.DrawerLayout 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:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
tools:openDrawer="start"> 

<include 
    layout="@layout/app_bar_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

<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.view.ViewPager 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    android:id="@+id/containter"> 

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

Et voici mon app_bar_main.xml qui contient le AppBarLayout

<?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" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="com.app.app.MainActivity"> 

    <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:popupTheme="@style/AppTheme.PopupOverlay" /> 

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


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

Comment puis-je empêcher le chevauchement de ces éléments?

Answer 1

@Signo,

Votre problème pourrait être résolu avec quelques ajustements de mise en page.

Essayez ceci:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.DrawerLayout 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:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
tools:openDrawer="start"> 

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

    <LinearLayout 
     android:orientation="vertical" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <include 
      layout="@layout/app_bar_main" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" /> 

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

    </LinearLayout> 

Answer 2

d'abord essayer d'ajouter un viewGroup au dessus de votre point de vue quelque chose comme:

<RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 
//... your views here 
</RelativeLayout> 

et vous devez changer la hauteur de votre barre d'accès à wrap_content et ajouter un peu de id

<include 
      android:id="@+id/app_bar_id" 
      layout="@layout/app_bar_main" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"/> 

puis de définir votre attribut layout_below comme ceci :

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