Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

Collapsing-Toolbar-Tutorial

We'll design this type of sample Android App using Collapsing Toolbar Layout:

Prepare Gradle

First of all add these dependencies to your gradle file:

dependencies {
    ...
    compile 'com.android.support:design:26.0.0-alpha1'
    ...
   }

Here I used version 26.0.0-alpha1 and it's the latest version (till 26th July, 2017), you should use the latest version.

XML prepare

Your XML file should contain a CoordinatorLayout to you CollapsingToolbarLayout.

Inside CoordinatorLayout take two widgets AppBarLayout and NestedScrollView as siblings. AppBarLayout contains a widget CollapsingToolbarLayout. Inside it I took an ImageView and my custom Toolbar.

NestedScrollView holds our rest of the contents. I used only a TextView to show an article.

Java class modification

AppBarStateChangeListener is an abstract class. It helps to listen the state change of AppBarLayout.

Inside the onCreate() method of MainActivity we can listen the state change by this method and take action:

appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
    @Override
    public void onStateChanged(AppBarLayout appBarLayout, State state) {
        if(state.equals(State.COLLAPSED)) {
            toolbar.setBackgroundResource(R.drawable.custom_toolbar);
            Toast.makeText(getApplicationContext(), "COLLAPSED", Toast.LENGTH_SHORT).show();
        }
        else if (state.equals(State.EXPANDED)) {
            toolbar.setBackgroundResource(R.color.transparent);
            Toast.makeText(getApplicationContext(), "EXPANDED", Toast.LENGTH_SHORT).show();
        }
        else if ((state.equals(State.IDLE))){
            Toast.makeText(getApplicationContext(), "IDLE", Toast.LENGTH_SHORT).show();
        }
    }
});

To get the whole project please clone it and run at your machine. If you see any error please let me know or send pull request.

Thank you. :-)

About

There is a tutorial blog post available in Bengali to explain this whole project. If you know Bengali please visit my blogsite:

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages