Showing a hidden toolbar animation not smooth

Question

in one of my recent apps I implemented the hide/show toolbar when the user is scrolling in a list (Recyclerview). My app has 3 fragments and a view pager to present them.The toolbar hides appropriately when scrolling. However, when I change the fragment (onPageChange listener is called on the view page) I am expanding the toolbar. Sometimes when it is expanding the animation is smooth, but sometimes there is a slight delay. I dont understand what I am doing wrong. To illustrate this I recorded my screen, please lick here to see the video.

This is my main_layout:

<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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.studentsins.lust.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/appBarLayouy"
    android:theme="@style/AppTheme.AppBarOverlay">

    <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/AppTheme.PopupOverlay"
        app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tabsHeight"
        style="@style/NavigationTab"/>


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


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

<com.getbase.floatingactionbutton.FloatingActionsMenu
    android:id="@+id/floatingActionMenu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    fab:fab_addButtonColorNormal="@color/blood_orange"
    fab:fab_addButtonColorPressed="@color/dirtyWhite"
    fab:fab_addButtonPlusIconColor="@color/dirtyWhite"
    fab:fab_addButtonSize = "normal"
    fab:fab_labelStyle="@style/menu_labels_style"
    fab:fab_labelsPosition="left"
    app:layout_anchor="@id/viewpager"
    app:layout_anchorGravity="bottom|end">

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/createPlanBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_colorNormal="@color/blood_orange"
        fab:fab_title="Create a plan"
        fab:fab_size="normal"
        app:fab_icon="@drawable/ic_event_white_48dp"
        fab:fab_colorPressed="@color/dirtyWhite"/>

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/changeStatusBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_colorNormal="@color/blood_orange"
        fab:fab_size="normal"
        app:fab_icon="@drawable/ic_textsms_white_48dp"
        fab:fab_title="Change status"
        fab:fab_colorPressed="@color/dirtyWhite"/>

</com.getbase.floatingactionbutton.FloatingActionsMenu>

This is my feed_fragment:

public class FeedFragment extends Fragment {
public static final String ARG_PAGE = "ARG_PAGE";
private static final String TAG = FeedFragment.class.getSimpleName();
private int mPage;
private RecyclerView mRefreshLayout;
private Context mActivity;

public static FeedFragment newInstance(int page) {
    Bundle args = new Bundle();
    args.putInt(ARG_PAGE, page);
    FeedFragment fragment = new FeedFragment();
    fragment.setArguments(args);
    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mPage = getArguments().getInt(ARG_PAGE);
    mActivity = getActivity();
    Log.d("MainActivity", "onCreate" + mPage);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_feed_layout,container,false);

    mRefreshLayout = (RecyclerView) view.findViewById(R.id.feedCardViewList);
    LinearLayoutManager linearLayoutManager = new LinearLayoutManager(mActivity);
    linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
    mRefreshLayout.setLayoutManager(linearLayoutManager);

    mRefreshLayout.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);

            if (dy >= 0) {
                // Scrolling up.. hide the FAB
                MainActivity.mFloatingActionsMenu.animate()
                        .setDuration(150)
                        .translationY(300);
            } else {
                // Scrolling down.. show the FAB
                MainActivity.mFloatingActionsMenu.animate()
                        .setDuration(150)
                        .translationY(0);
            }

            Log.d(TAG,"DY value: "+dy);

        }
    });
    ArrayList<String> users = new ArrayList<>();
    users.add("Georgi Koemdzhiev");
    users.add("Mariya Menova");
    users.add("Simeon Simeonov");
    users.add("Ivan Dqkov");
    users.add("Dymityr Vasilev");
    users.add("Petar Dimov");
    users.add("Stoyan Stoyanov");
    users.add("Alexander Lunar");
    users.add("Awesome Jhon");

    FeedCardAdapter adapter = new FeedCardAdapter(users,mActivity);

    mRefreshLayout.setAdapter(adapter);
    Log.d("MainActivity", "onCreateView" + mPage);
    return view;
}
}

This is my MainActivity onCreate method:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);


    sharedPreferences = PreferenceManager.getDefaultSharedPreferences(MainActivity.this);
    editor = sharedPreferences.edit();

   Boolean isUserLoggedIn = sharedPreferences.getBoolean(Constants.USER_IF_LOG_IN,false);
    if(!isUserLoggedIn){
        navigateToLogin();
    }

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    final ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setAdapter(new LustFragmentPagerAdapter(getSupportFragmentManager(), this));
    // Give the TabLayout the ViewPager
    final TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    tabLayout.setupWithViewPager(viewPager);

    mFloatingActionsMenu = (FloatingActionsMenu)findViewById(R.id.floatingActionMenu);

    mChangeStatus = (FloatingActionButton)findViewById(R.id.changeStatusBtn);
    mChangeStatus.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Log.d(TAG,"Change Status pressed! | " + viewPager.getCurrentItem());
            mFloatingActionsMenu.collapse();
        }
    });
    mCreatePlan = (FloatingActionButton)findViewById(R.id.createPlanBtn);
    mCreatePlan.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Log.d(TAG,"Create plan pressed! | " + viewPager.getCurrentItem());
            mFloatingActionsMenu.collapse();
        }
    });

    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            //Make sure that the fab is visible when scrolling the pages...
            MainActivity.mFloatingActionsMenu.animate()
                    .setDuration(150)
                    .translationY(0);
            //show the toolbar
            expandToolbar();

        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });


}

this is my expandToolbar method code:

public void expandToolbar(){
    //setExpanded(boolean expanded, boolean animate)
    AppBarLayout appBarLayout = (AppBarLayout)findViewById(R.id.appBarLayouy);
    appBarLayout.setExpanded(true, true);
}

Answer 1

Please change android.support.design.widget.AppBarLayout to other ViewGroup It can resolve your issue. Cheer up!

Answer 2

I found out what was causing this delay of the expand animation of the toolbar. The problem was that in the onPageChanged method in the listener was called many many times, thus the bellow code was called many times:

 onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        //Make sure that the fab is visible when scrolling the pages...
        MainActivity.mFloatingActionsMenu.animate()
                .setDuration(150)
                .translationY(0);
        //show the toolbar
        expandToolbar();

So I assume that this was causing the system to struggle a bit from time to time when dealing with so many calls/animations.

What I did to solve the issue is simply moving my code from onScrolled to the "onPageScrollStateChanged" method (which is called once per viewpager swipe left/right).

Answer 3

Can I suggest you another method? Just Show/Hide the top bar using set Visibility from GONE to VISIBLE or from visible to gone depend of show/hide need. And add android:animateLayoutChanges="true" to the parent of top bar.