Toolbar height synchronization using ViewPager

Question

I have activity from the Toolbar and ViewPager, there are three Fragments in the ViewPager, each fragment should set a different height in the Toolbar, which means that when the 1st fragment is the selected fragment, the height of the toolbar should be x and when the 2nd fragment height of the dropdown should be y, etc.

Now I want the toolbar height change to be in sync with the ViewPager scrolling, any recommendations for this?

Answer 1

Here is the result.

For example code https://github.com/msquare097/MFlex-toolbar , ....

First of all, a good question and very interesting ... and for its implementation.
I used the minimum height of the toolbar by changing the scroll in the viewpager.

First of all, declare all Toolbar heights relative to fragments in your activity where ViewPager implemented.

I just take it directly as an Integer . You load it from dimen as DP and convert it to PX. In my ViewPager I took 4 fragments. So, we declare 4 toolbar heights.

 int heightForPage0 = 150; int heightForPage1 = 400; int heightForPage2 = 300; int heightForPage3 = 600; 

After configuring the adapter, just add a listener

mViewPager.addOnPageChangeListener(this);

and override all these three methods and write the code below.

 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { Log.d(TAG,positionOffset+""); int currentHeight; int nextHeight; switch (position) { case 0: currentHeight = heightForPage0; nextHeight = heightForPage1; calculateHeightAndApply(currentHeight, nextHeight, positionOffset); break; case 1: currentHeight = heightForPage1; nextHeight = heightForPage2; calculateHeightAndApply(currentHeight, nextHeight, positionOffset); break; case 2: currentHeight = heightForPage2; nextHeight = heightForPage3; calculateHeightAndApply(currentHeight, nextHeight, positionOffset); break; case 3: // for last page we don't have to worry about it. // bcoz there is no next page available; break; } } @Override public void onPageSelected(int position) {} @Override public void onPageScrollStateChanged(int state) {} 

and here is the magic method that I called onPageScrolled ..

 private void calculateHeightAndApply(int currentHeight, int nextHeight, float positionOffset) { if (positionOffset==0) { return; } int diff = nextHeight - currentHeight; int newHeight = (int) ((positionOffset*diff)); mToolbar.setMinimumHeight(currentHeight+newHeight); } 

Answer 2

You can use PageTransformer if you want to use animation.

  ViewPager pager = (ViewPager) findViewById(R.id.viewpager); pager.setPageTransformer(false, new ViewPager.PageTransformer() { @Override public void transformPage(View onepage, float position) { //Position is the offset of onepage. //If position == 0 , one page is center. //If position == 1 , one page is on the right of center page. } }); 

Answer 3

Try the following:

  int X = 30; int Y = 50; Toolbar toolbar = (Toolbar)findViewById(R.id.your_toolbar); yourViewPager.addOnPageChangeListener(pagerChangeListener()); public ViewPager.OnPageChangeListener pagerChangeListener() { return new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { if(position == 0){ toolbar.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, X)); }else{ toolbar.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, Y)); } } @Override public void onPageScrollStateChanged(int state) { } }; 

Answer 4

You can achieve this using the interface.

Interface:

 public interface ChangeToolbarHeight { void setToolbarHeight(int height); } 

Activity:

 public class MainActivity extends AppCompatActivity implements ChangeToolbarHeight { public void setToolbarHeight(int height) { RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mToolbar.getLayoutParams(); layoutParams.height = height; toolbar.setLayoutParams(layoutParams); } } 

Inside fragments:

 public class FragmentOne extends Fragment { @Override public void setUserVisibleHint(boolean isVisibleToUser) { super.setUserVisibleHint(isVisibleToUser); if (isVisibleToUser) { ChangeToolbarHeight changeHeightInterface = (ChangeToolbarHeight) getActivity(); changeHeightInterface.setToolbarHeight(150); Log.d("TAG","Current Fragment is visible"); } } } 

set a different height for each fragment.

SetUserVisbileHint is the default method for the fragment. with the help of this, you can find out which fragment is visible to the user and adjust the visibility of the visible part of the toolbar to activity.

The main use of this: viewPager by default loads three fragments, the previous, the current selection and the next, to make fling viewpager smoother.so if SetUserVisibleHint is not checked. the height of your toolbar will be implicated. When the viewpager loads the next framegang in the background.

you may have fragment 1, but the height of the toolbar will be set to fragment 3 or fragment 2.

Answer 5

You can try as below:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:ads="http://schemas.android.com/apk/res-auto" xmlns:app="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:background="#fff" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="9" android:orientation="vertical"> <ImageView android:id="@+id/bannar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/banner_1" /> <com.astuetz.PagerSlidingTabStrip android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="48dip" android:layout_below="@+id/bannar" android:background="#fff" /> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/tabs" /> </LinearLayout> </LinearLayout> 

This works for me. Hope this works for you too. thanks