How to make the toolbar visible again, which was previously hidden with layout_scrollFlags, when scrolling to another view page

Question

I currently have the following page with ViewPager

When scrolling the page on the INFO tab, the toolbar will be hidden. This behavior is implemented through CoordinatorLayout , AppBarLayout and app:layout_scrollFlags

 <?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:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:elevation="0dp" android:elevation="0dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > <android.support.v7.widget.Toolbar app:layout_scrollFlags="scroll|enterAlways|snap" android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize" android:background="@android:color/transparent" app:elevation="0dp" android:elevation="0dp" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="?attr/detailedStockTabIndicatorColor" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> 

So it looks like after scrolling.

After scrolling, the toolbar is hidden

Since this is a ViewPager , if I go to the FINANCIAL tab, it will look like this.

Following Swipe

Since the page on the FINANCIAL tab is not scrollable, we hope not to hide the Toolbar .

I was wondering how to make the toolbar visible again, which was previously hidden with layout_scrollFlags , when scrolling to another ViewPager page?

Answer 1

You can do it like this:

 final AppBarLayout appBarLayout = view.findViewById(R.id.app_bar_layout); viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { if (position == 1) appBarLayout.setExpanded(true, true); } @Override public void onPageScrollStateChanged(int state) { } }); 

therefore, when the viewPager is on the page without scrolling, it expands and the toolbar appears

Answer 2

Answer to

@Marzieh Heidari is the correct answer to this question, but I share my other approach that I use in my project to solve this problem.

In a fragment that has short content, I still keep the NestedScrollView at the root. Then I can still scroll up / down to collapse and expand the toolbar

 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" app:layout_behavior="@string/appbar_scrolling_view_behavior" android:isScrollContainer="false" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="This fragment have short content" android:textSize="100sp" /> </LinearLayout> </android.support.v4.widget.NestedScrollView> 

Hope this helps

Answer 3

I like what Marzieh Heidari suggested , but I would like to add my thoughts about this since I ran into a similar problem and implemented some additional features.

First of all, you might think that there are many ways to scroll, even if the current Fragment does not have a ScrollView . This can happen on some devices, i.e. On creation (it can happen in recreation) in your AppBarLayout you can call requestChildRectangleOnScreen , and if you look at the source code that you find out that under certain circumstances it will automatically shorten your Toolbar (that's what happened to me).

During this, I also noticed that you can drag it to the Toolbar and with scrollFlags="scroll|enterAlways|snap" you can compress (wring) your Toolbar . You can easily test it in your application by simply checking on the Toolbar (even on the FINANCIAL tab).

For these two problems, there is a very simple fix that programmatically changes scrollFlags . After that, you can no longer squeeze your Toolbar (also not by chance), and the system also does not push it.

Programmatically, you can clear scrollFlags by setting them to 0 , and on the other hand, the code will restore them when you switch to another tab.

 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { if (position == 1) { view.findViewById(R.id.app_bar_layout).setExpanded(true, true); ((AppBarLayout.LayoutParams) view.findViewById(R.id.toolbar).getLayoutParams()).setScrollFlags(0); } else if (position == 0) ((AppBarLayout.LayoutParams) view.findViewById(R.id.toolbar).getLayoutParams()).setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS | AppBarLayout.LayoutParams.SCROLL_FLAG_SNAP); } @Override public void onPageScrollStateChanged(int state) { } }); 

Answer 4

Perhaps application life cycle events can help you here by catching a new screen loading and setting up the toolbar at this point to show programmatically?

Answer 5

You need to expand the toolbar when the user swipe the second tab and make the panel without the ability to scroll

 mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { if(position == 1) { appbar.setExpanded(true, true); AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams(); params.setScrollFlags(0); // clear flags toolbar.setLayoutParams(params); } else { AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams(); params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS); toolbar.setLayoutParams(params); } } @Override public void onPageScrollStateChanged(int state) { } }); 

Answer 6

You asked a double question. your answer to the question here

 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { expandToolbar(); } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { } }); public void expandToolbar(){ AppBarLayout appBarLayout = (AppBarLayout)findViewById(R.id.app_bar_layout); appBarLayout.setExpanded(true, true); }