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);
}
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.