CODEWITHSUNDEEP
androidandroid-actionbarandroid-toolbarandroid-appbarlayoutandroid-collapsingtoolbarlayout
Esa Hannila
Esa Hannila

Reputation: 1318

How to use CollapsingToolbarLayout to have only 2 position, Expanded and collapsed after scroll ended

I'm trying to have CollapsingToolbarLayout to be expand/collapse when certain amount of scroll happened and scroll ended.

I got it working as supposed to be, but what I need is that toolbar is either visible or hidden, not semi, so basically to be expanded or collabsed.

I tried to find solution without luck.

Here is how I have it now:

my_activity.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:id="@+id/myLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:padding="0dp"
        android:layout_margin="0dp"
        android:id="@+id/myPager"/>

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="112dp"
        android:minHeight="?attr/actionBarSize">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:titleEnabled="false"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/appToolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                >
            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                style="@style/AppTheme.TabLayout"
                android:id="@+id/appTabs"
                android:scrollbars="horizontal"
                android:layout_gravity="bottom"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:layout_scrollFlags="scroll|enterAlways" />

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

If I use onOffsetChanged, my app freezes, so is it reason, it happens everytime when scroll changing?

MyActivity.java

public class MyActivity extends AppCompatActivity {
    private AppBarLayout appBarLayout;
    private android.support.v7.app.ActionBar mToolbar;


    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_activity);

        appBarLayout = (AppBarLayout)findViewById(R.id.appBar);
        mToolbar = getSupportActionBar();

        appBarLayout.setExpanded(true);
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if(verticalOffset == 0 || verticalOffset <= mToolbar.getHeight()) {
                    appBarLayout.setExpanded(false);
                } else {
                    appBarLayout.setExpanded(true);
                }
            }
        });


    }
}

Upvotes: 2

Views: 2355

Answers (2)

gouvinb
gouvinb

Reputation: 21

I found the solution, write this in your AppCompatActivity and adapts it to your code: 

@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
    try {
        AppBarLayout appBarLayout;
        appBarLayout = ((AppBarLayout) findViewById(R.id.layout_toolbar));
        if (ev.getAction() == ev.ACTION_UP) {
            if ((collapsingToolbarLayout.getBottom() - collapsingToolbarLayout.getTop()) > appBarLayout.getBottom() * 2) {
                appBarLayout.setExpanded(false);
            } else {
                appBarLayout.setExpanded(true);
            }
        }
        return super.dispatchTouchEvent(ev);
    } catch (Exception e) {
        Log.e(TAG, "dispatchTouchEvent " + e.toString());
        return false;
    }
}

It gets the ACTION_UP event and checks only at this moment if the CollapsingToolbarLayout is taller than half its height.

Edit : Outdated, see this response

Upvotes: 2

miguelt
miguelt

Reputation: 384

Just specify snap...

app:layout_scrollFlags="exitUntilCollapsed|scroll|snap"

... inside your XML definition:

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:titleEnabled="false"
    app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

Upvotes: 4

Related Questions