Search code examples
androidandroid-fragmentsmaterial-designandroid-coordinatorlayoutandroid-appbarlayout

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?


Solution

  • 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...