Extra space between the recyclerview in fragment with toolbar for parallax effect

568 views Asked by At

I want to implement Parallax effect in my app. I have two fragments(actually one fragment that holds two views). in both fragments I have recyclerView to Showing Items. everything is okay but the problem is when i Scroll the recyclerView and toolbar goes up if i switch to the second fragment there will be a extra white space between recyclerview and tab because of the toolbar been gone and i dont know how handle this this the link of video i taken to show you the problem: video link

this is my fragment class:

    public class FirstFragment extends Fragment implements RecycleAdapter.OnViewClickedListener{

    private ArrayList<String> items = new ArrayList<>();

    public static Fragment getInstance(int catId){
        FirstFragment firstFragment = new FirstFragment();
        Bundle bundle = new Bundle();
        bundle.putInt("CAT_ID", catId);
        firstFragment.setArguments(bundle);
        return firstFragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view;
        int id = getArguments().getInt("CAT_ID");
        if (id == 1){
            view = inflater.inflate(R.layout.first_fragment,container,false);
        }else{
            view = inflater.inflate(R.layout.second_fragment,container,false);
        }

        RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
        final LinearLayoutManager manager = new LinearLayoutManager(getActivity().getApplicationContext());
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);
        RecycleAdapter adapter = new RecycleAdapter(this,items);
        final MainActivity mainActivity = (MainActivity) getActivity();
        final int toolbarHeight = Utils.getToolbarHeight(getActivity());
        recyclerView.setOnScrollListener(new MaterialRecycler(getActivity()) {
            @Override
            public void onMoved(int distance) {
                mainActivity.toolbarContainer.setTranslationY(-distance);
            }

            @Override
            public void onShow() {
                mainActivity.toolbarContainer.animate().translationY(0).setInterpolator(new AccelerateInterpolator());
            }

            @Override
            public void onHide() {
                mainActivity.toolbarContainer.animate().translationY(-toolbarHeight).setInterpolator(new DecelerateInterpolator());

            }
        });
        recyclerView.setAdapter(adapter);
        feedArray();
        return view;
    }

and this is my class that handle the recyclerview scrolling

    private int toolbarOffset=0;
    private int toolbarHeight;
    private boolean controlsVisible=true;
    private int totalScrolledDistance;
    private static final int HIDE_OFFSET = 10;
    private static final int SHOW_OFFSET = 80;

    public MaterialRecycler(Context context){
        toolbarHeight = Utils.getToolbarHeight(context);
    }

    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);

        if (newState == RecyclerView.SCROLL_STATE_IDLE){
            if (totalScrolledDistance < toolbarHeight){
                setVisible();
            }else{
                if (controlsVisible){
                    if (toolbarOffset > HIDE_OFFSET){
                        setInvisible();
                    }else{
                        setVisible();
                    }
                }else{
                    if (toolbarHeight - toolbarOffset > SHOW_OFFSET){
                        setVisible();
                    }else{
                        setInvisible();
                    }
                }
            }
        }

    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, final int dy) {
        super.onScrolled(recyclerView, dx, dy);

        clipOffset();
        onMoved(toolbarOffset);

        if ((toolbarOffset < toolbarHeight && dy >0) || (toolbarOffset > 0 && dy<0)){
            toolbarOffset +=dy;
        }

        totalScrolledDistance +=dy;
    }

    private void clipOffset(){
        if (toolbarOffset > toolbarHeight){
            toolbarOffset = toolbarHeight;
        }else if (toolbarOffset < 0){
            toolbarOffset = 0;
        }
    }


    private void setVisible(){
        if (toolbarOffset > 0){
            onShow();
            toolbarOffset =0;
        }
        controlsVisible = true;
    }

    private void setInvisible(){
        if (toolbarOffset < toolbarHeight){
            onHide();
            toolbarOffset = toolbarHeight;
        }

        controlsVisible = false;
    }

    public abstract void onMoved(int distance);
    public abstract void onShow();
    public abstract void onHide();

this is my activity_main.xml file:

        <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    xmlns:tools="http://schemas.android.com/tools"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    tools:context=".MainActivity" android:background="#fff">


        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/pager"/>

        <LinearLayout android:layout_width="match_parent"
                      android:id="@+id/toolbarContainer"
                      android:orientation="vertical"
                      android:layout_height="wrap_content">
            <include layout="@layout/toolbar" />
            <include layout="@layout/tab" />
        </LinearLayout>

    </FrameLayout>

also my recycler.xml for recyclerView:

       <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:clipToPadding="false"
                android:id="@+id/recyclerView"
                android:paddingTop="120dp"
                />

    </FrameLayout>

toolbar:

      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:orientation="vertical"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent" android:gravity="top">

        <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="top"
                android:background="#3e2723"
                >
            <android.support.v7.widget.Toolbar
                    android:layout_width="match_parent"
                    android:layout_height="72dp"
                    android:id="@+id/toolbar"
                    android:clipToPadding="false">

                <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
                          android:text="Material App"
                          android:textSize="18dp"
                          android:gravity="left"
                          android:padding="14dp"
                          android:textColor="#fff"
                        />
            </android.support.v7.widget.Toolbar>
        </LinearLayout>
    </LinearLayout>

tab.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent" android:gravity="top">

    <com.astuetz.PagerSlidingTabStrip android:layout_width="match_parent"
          android:layout_height="48dp"
          android:id="@+id/tab"
          android:layout_gravity="top"
          android:background="#3e2723"
          app:pstsDividerColor="#00000000"
          app:pstsIndicatorColor="#fff"
          app:pstsIndicatorHeight="3dp"
          app:pstsShouldExpand="true"
            >
    </com.astuetz.PagerSlidingTabStrip>
</LinearLayout>

and finally the first_fragment.xml:

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:background="#fff"
              android:layout_height="match_parent">

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

</FrameLayout>
0

There are 0 answers