Android Question

View jumps and blinks instantly, though animateLayoutChanges="true"

I am making my TabLayout animated by using android:animateLayoutChanges="true" in AppBarLayout. But when I set TabLayout.setVisibility(View.GONE), container for my fragment goes up to ActionBar instantly for a few milliseconds. And then it returns to the end of TabLayout and goes up with it to the ActionBar. I explained this on following gif.

Following gif

The buttons Theory and Practice are behind the TabLayout for some reason but when hiding TabLayout animation starts FrameContainer that holds my view sticks to the bottom of TabLayout.

I have recorded a video that demostrates this behavior. Dropbox video player skip some frames and animation seems nice. Thats why, to notice the bug, you can load video on computer and watch 5 and 11 second in high quality. Video

My LayoutXML:

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<SurfaceView
android:layout_width="0px"
android:layout_height="0px"/>

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

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>


<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:visibility="gone"
app:tabGravity="fill"
app:tabIndicatorColor="@android:color/white"
app:tabMode="fixed"/>

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

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

<!--
This FrameLayout holds my fragments.
-->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/outer_background">

<ProgressBar
android:id="@+id/main_load_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true"/>
</FrameLayout>

<include
android:id="@+id/left_drawer_full"
layout="@layout/navigation_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"/>

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

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


In addition I am using 23.2.1 support libraries.

How can I fix this blinks and jumps?

Answer

I wasted all day to investigate this problem. And I have found one possible solution for this problem. Now i change visibility by this code

mTabLayout.postDelayed(new Runnable() {
        @Override
        public void run() {
            switch (newMode) {
                case MODE_CONTENTS:
                    mTabLayout.setVisibility(mContents.isTheoryAvailable() ? View.VISIBLE : View.GONE);
                    break;
                default:
                    findViewById(R.id.content_frame).setVisibility(View.INVISIBLE);
                    mTabLayout.setVisibility(View.GONE);
                    findViewById(R.id.content_frame).setVisibility(View.VISIBLE);
            }
        }
    }, 200);

It works well and views are not blinking now. But on old androids the bug is still presents.

Comments