Miljan Vulovic Miljan Vulovic - 17 days ago 4
Android Question

AppBarLayout with fragments

So, situation is this:

I need to implement AppBar scroll behaviour in my main activity, but, I already have CoordinatorLayout and AppBarLayout in my fragment with the same scroll behaviour.

Here is the xml from both of the layouts:

activity_main:

<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:background="#EBEDEC">

<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/ThemeOverlay.AppCompat.Light">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/toolbar_open_nav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="@drawable/filter_icon" />

<RelativeLayout
android:id="@+id/main_activity_images_relative"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/toolbar_fencity_image"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_margin="@dimen/layout_padding"
android:src="@drawable/toolbarimg"
android:visibility="gone" />


</RelativeLayout>


</RelativeLayout>


</android.support.v7.widget.Toolbar>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<FrameLayout
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@android:color/transparent" />

<com.bitage.carlo.fencity.ui.view.BottomMenuView
android:id="@+id/bottom_menu"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />


</LinearLayout>


</RelativeLayout>




and a fragment xml:

<?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:layout_marginTop="?attr/actionBarSize"
android:orientation="vertical">

<android.support.design.widget.AppBarLayout
android:id="@+id/novita_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<RelativeLayout
android:id="@+id/novita_search_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/background"
app:layout_scrollFlags="scroll|enterAlways|snap">

<EditText
android:id="@+id/search_edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/layout_padding"
android:background="@null"
android:hint="@string/search"
android:imeOptions="actionDone"
android:paddingEnd="@dimen/layout_padding"
android:paddingLeft="@dimen/padding_start"
android:paddingRight="@dimen/layout_padding"
android:paddingStart="@dimen/padding_start"
android:singleLine="true" />

<ImageView
android:id="@+id/search_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/layout_padding"
android:layout_marginStart="@dimen/layout_padding"
android:src="@drawable/ic_search" />

</RelativeLayout>

</android.support.design.widget.AppBarLayout>


<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">


<android.support.v7.widget.RecyclerView
android:id="@+id/places_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@android:color/transparent"
android:src="@drawable/nav_shadow" />

</RelativeLayout>


</android.support.design.widget.CoordinatorLayout>


Now, I need this to stay the same if possible, just somehow to add the scroll behavior
app:layout_scrollFlags="scroll|enterAlways|snap"
on toolbar only in this fragment, while search from the fragment still has the same behaviour.

How can I achieve this?

Answer

So, you can do next:

in your Fragment class, you have recyclerview. Now, what you want to do is put the recyclerView.addOnScrollListener(new YourScrollListenerClass(context, toolbar, coordinatorLayout));

Coordinator layout is the one of the fragment, please bear that in mind.

Now, create a new class YourScrollListenerClass:

    public class YourScrollListenerClass extends RecyclerView.OnScrollListener {

        private Context mContext;
        private Toolbar mToolbar;
        private CoordinatorLayout mCoordinatorLayout;
        private int mToolbarHeight;
        private int mCoordinatorLayoutTopMargin;

    public YourScrollListenerClass(Context context, @Nullable Toolbar toolbar, @Nullable final CoordinatorLayout mCoordinatorLayout) {
            this.mContext = context;
            mToolbar = toolbar;
            this.mCoordinatorLayout = mCoordinatorLayout;
            if (mToolbar != null && mCoordinatorLayout != null) {
                mToolbar.post(new Runnable() {
                    @Override
                    public void run() {
                        mToolbarHeight = mToolbar.getHeight();
                    }
                });

                mCoordinatorLayout.post(new Runnable() {
                    @Override
                    public void run() {
                        mCoordinatorLayoutTopMargin = ((FrameLayout.LayoutParams) mCoordinatorLayout.getLayoutParams()).topMargin;
                    }
                });
            }
        }

    @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            if (recyclerView != null) {
    if (mToolbar != null) {
                float offset = mToolbar.getTranslationY() - dy;
                if (offset <= 0 && offset >= -(mToolbar.getHeight())) {
                    mToolbar.setTranslationY(mToolbar.getTranslationY() - dy);
                    FrameLayout.LayoutParams params1 = (FrameLayout.LayoutParams) mCoordinatorLayout.getLayoutParams();
                    params1.setMargins(0, params1.topMargin - dy, 0, 0);
                    mCoordinatorLayout.setLayoutParams(params1);                  
                }
            }
    }
    }

@Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
         if (RecyclerView.SCROLL_STATE_IDLE == newState) {           
            if(mToolbar != null) {
                if (Math.abs(mToolbar.getTranslationY()) <= mToolbar.getHeight() / 2) {
                    ObjectAnimator animator = ObjectAnimator.ofFloat(mToolbar, View.TRANSLATION_Y, mToolbar.getTranslationY(), 0);
                    animator.setDuration(300);
                    animator.start();
                    MarginAnimation animation = new MarginAnimation(mCoordinatorLayout, ((FrameLayout.LayoutParams) mCoordinatorLayout.getLayoutParams()).topMargin, mCoordinatorLayoutTopMargin);
                    mCoordinatorLayout.startAnimation(animation);
                } else {
                    ObjectAnimator animator = ObjectAnimator.ofFloat(mToolbar, View.TRANSLATION_Y, mToolbar.getTranslationY(), -mToolbarHeight);
                    animator.setDuration(300);
                    animator.start();
                    MarginAnimation animation = new MarginAnimation(mCoordinatorLayout, ((FrameLayout.LayoutParams) mCoordinatorLayout.getLayoutParams()).topMargin, 0);
                    mCoordinatorLayout.startAnimation(animation);
                }
            }
        }
    }

    }

And for the margin animation, create new Class

public class MarginAnimation extends Animation {

    private View mView;
    private float mToMargin;
    private float mFromMargin;
    private Context mContext;

    public MarginAnimation(View v, float fromTop, float toTop) {
        mFromMargin = fromTop;
        mToMargin = toTop;
        mView = v;
        setDuration(300);
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        float topMargin = (mToMargin - mFromMargin) * interpolatedTime + mFromMargin;
        Log.d("TopMargin", String.valueOf(topMargin));
        FrameLayout.LayoutParams p = (FrameLayout.LayoutParams) mView.getLayoutParams();
        p.setMargins(0, (int) topMargin, 0, 0);
        mView.setLayoutParams(p);
        mView.requestLayout();
    }

    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
    }

    @Override
    public boolean willChangeBounds() {
        return true;
    }
}

Hope this helps...

Comments