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>