WHOATEMYNOODLES
WHOATEMYNOODLES

Reputation: 2641

CollapsingToolbar - How do I disable the title animation?

I'm trying to display the title when the collapsing toolbar is Expanded or Collapsed. However in any of those states, the title always has a shifting animation:

enter image description here

How do I completely get rid of the animation and make the title stay in one position?

I've tried setting titleEnabled to false but that only disables title and not show it anymore

https://stackoverflow.com/a/35975029/11110509

<android.support.design.widget.CollapsingToolbarLayout
        app:titleEnabled="false"
        ...
>

Edit1: My full layout: ___________________________________________________________________________

    <?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <com.google.android.material.appbar.AppBarLayout
       android:id="@+id/appbar_layout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@color/colorWhite">

      <com.google.android.material.appbar.CollapsingToolbarLayout
          android:id="@+id/collapsing_toolbar"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:contentScrim="@color/standardBlue"
          app:title="Title"
          app:layout_scrollFlags="scroll|exitUntilCollapsed">

         <RelativeLayout
             android:id="@+id/activityprofile_topsection"
             android:layout_width="match_parent"
             android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/activityprofile_coverpicture"
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:background="@color/standardBlue" />


            <ImageView
                android:id="@+id/activityprofile_profilepicture"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="70dp"
                android:background="@drawable/profile_picture_white_border" />

            <TextView
                android:id="@+id/activityprofile_username"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/activityprofile_profilepicture"
                android:layout_marginStart="15dp"
                android:layout_marginTop="5dp"
                android:text="Username"
                android:textColor="@color/colorBlackFont"
                android:textSize="16sp" />

         </RelativeLayout>

         <androidx.appcompat.widget.Toolbar
             android:layout_width="match_parent"
             android:layout_height="?attr/actionBarSize"
             app:contentInsetStart="0dp"
             app:layout_collapseMode="pin">

            <ImageView
                android:id="@+id/activityprofile_backbutton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="?attr/actionBarItemBackground"
                android:padding="15dp"
                app:srcCompat="@drawable/icon_back_white_arrow" />
         </androidx.appcompat.widget.Toolbar>

      </com.google.android.material.appbar.CollapsingToolbarLayout>

      <com.google.android.material.tabs.TabLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content">

         <com.google.android.material.tabs.TabItem
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:icon="@drawable/icon_back_black_arrow" />

         <com.google.android.material.tabs.TabItem
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:icon="@drawable/ic_heart" />
      </com.google.android.material.tabs.TabLayout>

   </com.google.android.material.appbar.AppBarLayout>


   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

As soon as I add app:titleEnabled="false" the title disappears

Still can't get CollapsingToolbar's title animation to be disabled.

Upvotes: 3

Views: 3000

Answers (1)

mmBs
mmBs

Reputation: 8559

I believe you could possibly do something incorrectly with your layouts. I checked this behaviour and when you add app:titleEnabled="false", the title should stay in the same place without any animation.

app:titleEnabled="true" (or without this attribute)

enter image description here

app:titleEnabled="false"

enter image description here

As you can see, this is the behaviour you want to achieve. Below I added a skeleton of a layout, which should work correctly.

<?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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    >

  <android.support.design.widget.AppBarLayout
      android:id="@+id/appbar_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@android:color/transparent"
      android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
      >

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:elevation="@dimen/toolbar_elevation"
        app:contentScrim="@color/colorWhite"
        app:titleEnabled="false"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >

      <RelativeLayout
          android:id="@+id/it_could_be_any_layout"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:background="@drawable/profile_bg"
          android:scaleType="centerCrop"
          app:layout_collapseMode="parallax"
          >

       <!-- Your content here -->
       
      </RelativeLayout>

      <android.support.v7.widget.Toolbar
          android:id="@+id/toolbarProfile"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          app:layout_collapseMode="pin"
          app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
          />

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

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

  <android.support.v4.widget.NestedScrollView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@color/colorWhite"
      app:layout_behavior="@string/appbar_scrolling_view_behavior"
      >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
        <!-- Your RecyclerView here or even replace this LinearLayout -->
    </LinearLayout>

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

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

I think that you should check again your implementation and play with layout_behavior, app:layout_scrollFlags, collapseMode attributes and so on. I hope you'll be able to fix this issue.

Upvotes: 7

Related Questions