Neria Nachum Neria Nachum - 4 months ago 14
Android Question

Changing AppBarLayout height makes list below "jump" sharply

I switched to

CoordinatorLayout
/
AppBarLayout
mainly to utilize
app:layout_scrollFlags="scroll|enterAlways"
(view peeks from the top when scrolling upwards). I'm using a
RecyclerView
without a
NestedScrollLayout
as the second prevents the view from recycling and after loading a lot of items it starts to lag.

The "peeking" view is the
AppBarLayout
and it's being resized when clicked in order to show/hide filter options. Everything works as expected, except that when resizing the
AppBarLayout
(by setting child views visibility), it seems like the whole layout is being rendered, for a mere moment the
RecyclerView
is "jumping" to the top and then back to the expected behavior. It's very very quick yet very annoying. When replaced with a
LinearLayout
it doesn't happen, but obviously the view doesn't peek.

My 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/fragment_notifications"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:animateLayoutChanges="true">

<android.support.design.widget.AppBarLayout android:id="@+id/fragment_notifications_filter_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:animateLayoutChanges="true">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
app:layout_scrollFlags="scroll|enterAlways">

<!--Two example views with different heights, of which only one is visible at a time -->
<ImageView android:id="@+id/view1"
android:layout_width="match_parent"
android:layout_height="68dp"
android:src="@drawable/ic_launcher"/>

<ImageView android:id="@+id/view2"
android:layout_width="match_parent"
android:layout_height="44dp"
android:src="@drawable/ic_launcher"/>
...
</RelativeLayout>

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

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

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.RecyclerView
android:id="@+id/fragment_notifications_notifications"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scrollbars="vertical" />

</FrameLayout>
</android.support.v4.widget.SwipeRefreshLayout>

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


The Java code is pretty simple; just setting the visibility of views inside the
AppBarLayout
:

someViewInsideAppBarLayout.setVisibility(visible ? View.VISIBLE : View.GONE);


Any idea how to deal with this? Thanks!

Answer Source

I had to enable the transition of type LayoutTransition.CHANGING (disabled by default) in the ViewGroup that has the appbar scrolling behavior (in my case it's the SwipeRefreshLayout).

LayoutTransition layoutTransition = swipeRefreshLayout.getLayoutTransition();
layoutTransition.enableTransitionType(LayoutTransition.CHANGING);

Later on I faced additional odd animation behavior that was solved by changing the LayoutTransition.CHANGE_DISAPPEARING value of the parents of the disappearing view(s) to 0 (originally 300):

relativeLayout.getLayoutTransition().setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);
appBar.getLayoutTransition().setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);
coordinatorLayout.getLayoutTransition().setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);