Android Toolbar überlappende TabLayout in CollapsingToolbarLayout

Ich versuche CollapsingToolbarLayout mit Toolbar und TabLayout darunter zu machen, aber sie einander überlappen, und ich bekomme this Android Toolbar überlappende TabLayout in CollapsingToolbarLayout

ich viele Lösungen versucht haben, aber immer noch habe dieses Problem. Hier ist meine 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:fab="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

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

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fitsSystemWindows="true" 
      app:contentScrim="@color/colorAppPrimary" 
      app:expandedTitleMarginEnd="64dp" 
      app:expandedTitleMarginStart="48dp" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <RelativeLayout 
       android:id="@+id/image" 
       android:layout_width="match_parent" 
       android:layout_height="250dp" 
       android:background="@drawable/material_plane" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       android:src="@drawable/header_png" 
       app:layout_collapseMode="parallax" 
       app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> 

       <ImageView 
        android:id="@+id/imageViewPhoto" 
        android:layout_width="80dp" 
        android:layout_height="80dp" 
        android:layout_centerInParent="true" /> 

       <TextView 
        android:id="@+id/textViewName" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentBottom="false" 
        android:layout_below="@+id/imageViewPhoto" 
        android:layout_centerHorizontal="true" 
        android:layout_marginTop="5dp" 
        android:text="TEXT" 
        android:textColor="@color/white" 
        android:textSize="16dp" /> 
      </RelativeLayout> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:fitsSystemWindows="true" 
       android:gravity="top" 
       app:layout_collapseMode="pin" 
       app:layout_scrollFlags="scroll|enterAlways"> 

       <TextView 
        android:id="@+id/toolbar_title" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:gravity="center" 
        android:textColor="@color/white" 
        android:textSize="20dp" 
        android:textStyle="bold" /> 
      </android.support.v7.widget.Toolbar> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:layout_gravity="bottom" 
       android:fitsSystemWindows="true" 
       app:tabBackground="@android:color/transparent" 
       app:tabMode="scrollable" /> 

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

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

    <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.support.design.widget.CoordinatorLayout>

Quelle

2016-02-05 Simple AI

Versuchen Sie, diese funktioniert entfernen aus Ihrem RelativeLayout:

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

Oder lass sie einfach so sein:

app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

Es war ein Fehler, denke ich.

AKTUALISIERT: Check this link: http://blog.grafixartist.com/parallax-scrolling-tabs-design-support-library/

<android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/collapsing_toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:fitsSystemWindows="true" 
     app:contentScrim="@color/colorPrimaryDark" 
     app:expandedTitleMarginEnd="64dp" 
     app:expandedTitleMarginStart="48dp" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

     <RelativeLayout 
      android:id="@+id/image" 
      android:layout_width="match_parent" 
      android:layout_height="250dp" 
      android:background="@drawable/header" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop"> 

      <ImageView 
       android:id="@+id/imageViewPhoto" 
       android:layout_width="80dp" 
       android:layout_height="80dp" 
       android:layout_centerInParent="true" 
       app:layout_collapseMode="parallax" /> 

      <TextView 
       android:id="@+id/textViewName" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentBottom="false" 
       android:layout_below="@+id/imageViewPhoto" 
       android:layout_centerHorizontal="true" 
       android:layout_marginTop="5dp" 
       android:text="TEXT" 
       android:textSize="16dp" /> 

     </RelativeLayout> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:fitsSystemWindows="true" 
      android:gravity="top" 
      app:layout_collapseMode="pin" 
      app:layout_scrollFlags="scroll|enterAlways"> 

      <TextView 
       android:id="@+id/toolbar_title" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:gravity="center" 
       android:textSize="20dp" 
       android:textStyle="bold" /> 
     </android.support.v7.widget.Toolbar> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/htab_tabs" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:layout_gravity="bottom" 
      app:tabIndicatorColor="@android:color/white" /> 

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

Quelle

2016-02-05 11:36:43 Mohsen

Ich habe das versucht, aber dann mein 'CollapsingToolbarLayout' höher geworden und ich kann' TabLayout' nicht hineinlegen. (Ich brauche transparent 'TabLayout') –

Wollen Sie etwas wie dieses Beispiel? : https://github.com/TheLittleNaruto/SupportDesignExample Ich habe gerade die Antwort aktualisiert. – Mohsen

ja !, Aber mit transparent 'TabLayout' –

Bearbeiten Sie Ihre XML wie folgt aus:

<android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:layout_gravity="bottom" 
      android:fitsSystemWindows="true" 
      android:marginTop="?attr/actionBarSize" 
      app:tabBackground="@android:color/transparent" 
      app:tabMode="scrollable"/>

Kommentar, wenn es nicht

Quelle

2016-02-05 11:35:11 Manikanta

Immer noch ein Problem –

ich auch in ähnliche Art von Problem bekam, habe ich versucht, android:fitsSystemWindows="true" von CoordinatorLayout. zu entfernen und es funktionierte .

Quelle

2016-06-12 07:30:00

Sie haben Ihre TabLayout unter dem CollapsingToolbarLayout zu halten, und es wird sicher arbeiten, können Sie meinen Code von unten sehen:

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

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/collapsing_toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true" 
     app:contentScrim="?attr/colorPrimary" 
     app:expandedTitleMarginBottom="@dimen/_32sdp" 
     app:expandedTitleMarginEnd="@dimen/_64sdp" 
     app:expandedTitleMarginStart="@dimen/_48sdp" 
     app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Large" 
     app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> 

     <!-- Your View that you want to hide on animation --> 
     <android.support.v4.view.ViewPager 
      android:id="@+id/pager" 
      android:layout_width="match_parent" 
      android:layout_height="@dimen/_250sdp" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop" 
      app:layout_collapseMode="parallax" /> 

     <!-- Your toolbar should always below your View otherwise it won't be visible --> 
     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolBar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:layout_collapseMode="pin" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" 
      app:title="title text" 
      app:titleTextColor="@color/white" /> 

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

    <!--your tablayout should be here which will come below the toolbar--> 
    <android.support.design.widget.TabLayout 
     android:id="@+id/tabs" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/_50sdp" 
     android:layout_below="@+id/toolbar" 
     android:layout_gravity="bottom" 
     android:background="@color/theme_color" 
     android:overScrollMode="never" 
     android:scrollbars="horizontal" 
     android:visibility="visible" 
     app:layout_anchor="@id/appbar" 
     app:layout_anchorGravity="bottom" 
     app:tabIndicatorColor="@color/orrange" 
     app:tabMode="scrollable" /> 

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


<android.support.v4.widget.NestedScrollView 
    android:id="@+id/scrollView" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

    <include layout="@layout/content" /> 

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

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

alles Gute.

Quelle

2017-11-28 06:04:51

Android Toolbar überlappende TabLayout in CollapsingToolbarLayout

Antwort

Verwandte Themen