Platzgestaltung unter dem AppBar (wie in Messenger)

Question

Guten Tag,

Ich versuche, eine zu platzieren (Relative? Linear? Rahmen?) Layout unter dem AppBar und die über dem ViewPager, wie in dem Facebook Messenger App .

Like "TOUS MESSENGER SMS" im Bild unten:

Hier ist der Code, den ich versuchte, aber es funktioniert nicht, ist das Layout nicht unter der AppBar gezeigt.

<?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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <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/ThemeOverlay.AppCompat.Light" 
      app:layout_scrollFlags="scroll|enterAlways|snap" /> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      app:tabIndicatorColor="@color/fullWhite" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" /> 

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

    <!-- This is the part I need to put between the AppBar and the content (ViewPager), but it is not shown --> 
    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:id="@+id/content_frame"> 
     <include layout="@layout/tous_messenger_sms"/> 
    </FrameLayout> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     android:background="@color/separator_color"/> 
</android.support.design.widget.CoordinatorLayout> 

Und hier ist mein "tous_messenger_sms" Layout-Datei (das Problem ist wahrscheinlich nicht so):

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:gravity="center_horizontal" 
     android:layout_marginLeft="16sp" 
     android:layout_marginRight="16sp"> 

    <Button 
     style="?android:textAppearanceSmall" 
     android:layout_width="wrap_content" 
     android:layout_height="28sp" 
     android:id="@+id/tous_btn" 
     android:text="TOUS" 
     android:textColor="@color/colorPrimary" 
     android:layout_weight="1" 
     android:background="@drawable/button_shape_tous" 
     android:stateListAnimator="@null" /> 

    <Button 
     style="?android:textAppearanceSmall" 
     android:layout_width="wrap_content" 
     android:layout_height="28sp" 
     android:id="@+id/messenger_btn" 
     android:text="MESSENGER" 
     android:textColor="@color/colorPrimary" 
     android:layout_weight="1" 
     android:background="@drawable/button_shape_messenger" 
     android:stateListAnimator="@null" /> 

    <Button 
     style="?android:textAppearanceSmall" 
     android:layout_width="wrap_content" 
     android:layout_height="28sp" 
     android:id="@+id/sms_btn" 
     android:text="SMS" 
     android:textColor="@color/colorPrimary" 
     android:layout_weight="1" 
     android:background="@drawable/button_shape_sms" 
     android:stateListAnimator="@null" /> 
</LinearLayout> 

Answer 1

Versuchen Sie dieses Layout

<?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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <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/ThemeOverlay.AppCompat.Light" 
      app:layout_scrollFlags="scroll|enterAlways|snap" /> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      app:tabIndicatorColor="@color/fullWhite" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" /> 

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

    <!-- This is the part I need to put between the AppBar and the content (ViewPager), but it is not shown --> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:id="@+id/content_frame"> 
      <include layout="@layout/tous_messenger_sms"/> 
     </FrameLayout> 

     <android.support.v4.view.ViewPager 
      android:id="@+id/viewpager" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@color/separator_color" /> 

    </LinearLayout> 

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