whatsapp_collapsingtoolbar

This project is all about the collapsing toolbar which will change the colour of the tool bar while collapsing with respect to the dominant colour in the image and gives a better colour matching ui.

What are we going to develop?


The application which we are going to develop is an whats app like collapsing tool bar which will change the colour based on the dominant colour present in image so that it can give an awesome ui experience.

Android studio, basic knowledge of card view, nested scrollview, toolbar.

Getting started:

Lets get started by creating an Android application and follow the steps below.

Step 1. Add the following dependencies.

The following dependencies should be added to the gradle file of your app.

compile ‘com.android.support:cardview-v7:24.2.0’
compile ‘com.android.support:design:24.2.0’
compile ‘com.android.support:palette-v7:24.2.0’//

this will help you to get the dominant color from the image

compile ‘com.squareup.picasso:picasso:2.5.2’//

this will help you to load the image from the internet

Step 2. Add the internet permission to the manifest.

This permission will help you to access the internet to load the images.

Step 2. Add the following to your “style.xml”

This will help you for the dynamic text appearance while the collapsing of the toolbar.

Step 3. Now we can start to design the layout “activity_main.xml”.

This xml files contains card view, collapsingtoolbarlayout, appbarlayout, textview, imageview and etc.

Step 4. Now you start coding with the “MainActivity.java”.

Define the following label globally so that it can be used across various functions in the class.

private CollapsingToolbarLayout collapsingToolbarLayout = null;

Add below code inside oncreate function of the class.

collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);

collapsingToolbarLayout.setTitle(“Ferrari”);//setting the title for the tool bar

Picasso.with(this)
        .load(“http://www.wonderslist.com/wp-content/uploads/2015/04/Ferrari-LaFerrari.jpg“)
        .resize(300, 300).centerCrop()
        .into(mImageview);//loading the image to the imageview using picasso

ToolbarTextAppearance();//its a function to which will take care of the the dynamic text appearance

 Thread thread = new Thread(new Runnable() {

     @Override
     public void run() {
         try  {

            ToolbarColor();//this function will help to determine the dominant colour of the image and set that colour to the toolbar and status bar.


         } catch (Exception e) {
             e.printStackTrace();
         }
     }
 });

 thread.start();//since thetoolbarcolour function has network call it has to run with the thread.

*if any doubt checkout comments

Step 5. “ToolBarTextAppearance” function.

This function will help you with the text appearance while collapsing and expanding of toolbar.

private void toolbarTextAppernce() {
    collapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.collapsedtoolbar);
    collapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.expandedtoolbar);
}

Step 5. “ToolBarColor” function.

This function will fetch the dominant colour from the image loaded from the internet using palette and changes the colour of the tool bar and status bar.

private void ToolbarColor() {


    try {
        URL url = new URL(“http://www.wonderslist.com/wp-content/uploads/2015/04/Ferrari-LaFerrari.jpg“);
        HttpURLConnection connection = (HttpURLConnection)
        url.openConnection();
        connection.setDoInput(true);
        connection.connect();
        InputStream input = connection.getInputStream();

//the image url will be converted to stream so that itcan be converted to the bitmap

       final Bitmap bitmap = BitmapFactory.decodeStream(input);

//bitmap will be used by palette to determine the dominant color in an image as bitmap will give access to each pixel of the image

      Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                Palette.Swatch dominant = palette.getDominantSwatch();

            //this will be used to get the dominant colour from the image

        collapsingToolbarLayout.setStatusBarScrimColor(dominant.getRgb());
        collapsingToolbarLayout.setContentScrimColor(dominant.getRgb());

                //setting the dominant colour to the toolbar

if (Build.VERSION.SDK_INT >= 21) {// used only in lolipop and above devices
                    Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(dominant.getRgb());
   //Setting the dominant color to the status bar



    } catch (Exception e) {
        // Log exception

    }

}

Conclusion:

The final result will look like this.