Collapsing ToolbarLayout using Design support library (IV)

Collapsing Toolbar layout using Coordinator Layout

In this tutorial, you will learn to hide and show Toolbar/AppBarLayout while scrolling the content/screen like Google play music, play store. If your application/game requires more space then you can hide toolbar on scroll. You can also do same thing for TabLayout also if you are using tabs along.

Before going to start we must be add below dependencies into gradle file.

compile 'com.android.support:design:25.0.1'

compile 'com.android.support:palette-v7:25.0.1' 

First of all we have to define custom style.

style.xml

<resources>

    <!--Make sure in AppTheme use NoActionBar like blow-->    <!-- Base application theme. -->

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>


    <!--below two stle are used for collaps  toolbar.-->

    <style name="expandedappbar" parent="@android:style/TextAppearance.Medium">
        <item name="android:textSize">48sp</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="collapsedappbar" parent="@android:style/TextAppearance.Medium">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@color/white</item>
    </style>

</resources>

Below is color.xml

<?xml version="1.0" encoding="utf-8"?><resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="primary_dark">#303F9F</color>
    <color name="accent">#FF4081</color>
    <color name="white">#ffffff</color>
    <color name="black">#000000</color>

</resources>

Here is string.xml file.

<resources>
    <string name="app_name">Collapsing Toolbar Example</string>
    <string name="user_name">First Name</string>
</resources>

Add code to activity_mail.xml.

 <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.support.design.widget.AppBarLayout        

     android:layout_width="match_parent"        

     android:layout_height="250dp"        

     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout            

         android:id="@+id/collapsing_toolbar"            

         android:layout_width="match_parent"            

         android:layout_height="match_parent"            

         app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!--app:contentScrim="?attr/colorPrimary"-->

            <ImageView                 

             android:layout_width="match_parent"                

             android:layout_height="match_parent"                

             android:scaleType="centerCrop"                

             android:fitsSystemWindows="true"                

             android:background="@drawable/profile_pic"                

             android:id="@+id/profile_id"                

             app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar                

             android:id="@+id/toolbar"                

             android:layout_width="match_parent"                

             android:layout_height="?attr/actionBarSize"                

             app:layout_collapseMode="pin" />

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

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

    <android.support.v4.widget.NestedScrollView        

     android:layout_width="match_parent"        

     android:layout_height="match_parent"        

     app:layout_behavior="@string/appbar_scrolling_view_behavior">

     

   <LinearLayout            

    android:layout_width="match_parent"            

    android:layout_height="match_parent"            

    android:orientation="vertical"            

    android:paddingTop="10dp">


    </LinearLayout>


    </android.support.v4.widget.NestedScrollView>

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

Here is my MainActivity.

public class MainActivity extends AppCompatActivity {

    private CollapsingToolbarLayout collapsingToolbarLayout = null;

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);

        collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        collapsingToolbarLayout.setTitle(getResources().getString(R.string.user_name));

        dynamicToolbarColor();

        toolbarTextAppernce();
    }


    private void dynamicToolbarColor() {

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
                R.drawable.profile_pic);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override            public void onGenerated(Palette palette) {
                collapsingToolbarLayout.setContentScrimColor(palette.getMutedColor(R.color.colorPrimary));
                collapsingToolbarLayout.setStatusBarScrimColor(palette.getMutedColor(R.color.colorPrimaryDark));
            }
        });
    }


    private void toolbarTextAppernce() {
        collapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.collapsedappbar);
        collapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.expandedappbar);
    }
}