Почему моя вкладка и панель инструментов отображаются так?

Question

Как вы можете видеть на картинке. Эти два не выровнены правильно. Я не могу понять, почему это происходит.

Моя панель инструментов находится в макете координатора в app_bar_main.xml, а макет моей вкладки находится в файле фрагмента_майн. Я не добавил компоновку вкладок в макет координатора, потому что не хочу показывать его во всех моих представлениях, только в основном файле фрагмента.

Мой код в 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> 

Код в 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> 

Можете ли вы сказать, что я делаю неправильно?

Image

Answer 1

Для тех, кто не смог решить эту проблему.

Я смог решить это с помощью подхода.

Я добавил вышеприведенный код в главную деятельность, а затем установил видимость tablayout и панели инструментов в других фрагментах как GONE и в фрагменте, который я хочу включить в качестве VISIBLE.

Чтобы установить видимость, как пошли вы:

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); 

и установить его как видно просто заменить Унесенные 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> 

Другой способ, как вы упомянули, чтобы поместить макет вкладки внутри AppBarLayout в app_bar_main.xml