How to Use Waterfall Toolbar Library in Android App?

The Waterfall Toolbar Library is an Android library that is designed to provide some dynamic effects to the toolbar to make an application look better. So what this library actually does is dynamise an ordinary toolbar, increasing and decreasing its shadow when an associated view is scrolled. The view can be a RecyclerView or ScrollView. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Now let’s see how can you use the WaterFallToolbar library in your Android application.

Step by Step Implementation

Step 1: Create a New Project

So the first step is to create a new project on the Welcome screen of Android Studio, click on Create New Project and If you have a project already opened, Go to File > New > New Project. Then select a Project Template window, select Empty Activity and click Next. Enter your App Name in the Name field and select Java from the Language drop-down menu.

Step 2: Add dependency and JitPack Repository

To add the library dependencies Go to app > Gradle Scripts > gradle.build(Module: app) and add the following dependencies.

dependencies {
    // library required to add the waterfall effect
    implementation 'com.github.hugocastelani:waterfall-toolbar:0.5.0'
    
    // for adding recyclerview
    implementation 'androidx.recyclerview:recyclerview:1.2.0'
  
    // for adding cardview
    implementation 'androidx.cardview:cardview:1.0.0'
}

Add the JitPack repository to your build file. Add it to your root build.gradle at the end of repositories inside the allprojects{ } section.

allprojects {

 repositories {

   …

   maven { url “https://jitpack.io” }

     }

}

After adding this dependency sync your project and now we will move towards its implementation.  

Step 3: Go to activity_main.xml and add the following code

In the activity_main.xml add waterfall toolbar and recyclerview to it or you can also use ScrollView instead of RecyclerView. If you don’t know about RecyclerViewyou can refer recyclerview using Java or recyclerview using kotlin. Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    
    <!-- Adding waterfall toolbar -->
    <com.hugocastelani.waterfalltoolbar.WaterfallToolbar
        android:id="@+id/waterfall_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- adding toolbar -->
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:background="#0F9D58" />

    </com.hugocastelani.waterfalltoolbar.WaterfallToolbar>
    
    <!-- Adding the recyclerview -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:itemCount="5"
        tools:listitem="@layout/recyclerview_items" />

</LinearLayout>

Step 4: Implementing the RecyclerView

After adding the RecyclerView into the activity_main.xml create a new Layout Resource File which will be used to design our CardView layout. Go to app > res > layout > right-click on layout > New > Layout Resource File and add the code provided below. In this file, you can design the layout to show it into the RecyclerView. Below is the code for the recyclerview_items.xml file.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 
    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="55dp"
    android:orientation="vertical"
    app:cardBackgroundColor="#0f9d58">

    <!-- adding the text view into the 
         cardview which will show
         our data inside recyclerview -->
    <TextView
        android:id="@+id/recyclerview_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textColor="@color/cardview_light_background"
        android:textSize="25sp" />

</androidx.cardview.widget.CardView>

Then, Go to app > java > package name > right-click > New > Java class. Name that file as ItemsModel and then click on OK. This file will hold the information of every item which you want to show in your RecyclerView. Below is the code for the ItemsModel.java file.

class ItemsModel {
    
    private String data;

    // Constructor
    public ItemsModel(String data) {
        this.data = data;
    }

    // Getter
    public String getData() {
        return data;
    }

    // Setter
    public void setData(String data) {
        this.data = data;
    }
}

After creating ItemsModel.java create another class Go to app > java > package name > right-click > New > Java class and name that file as CustomAdapter and then click on OK. After this add the code provided below. Comments are added inside the code to understand the code in detail. Below is the code for the CustomAdapter.java file.

package com.example.waterfalltoolbar;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

class CustomAdapter extends RecyclerView.Adapter<Adapter.ViewHolder> {

    Context context;
    
    // list to store the items
    List<ItemsModel> list;

    // Adapter's constructor
    public Adapter(Context context, List<ItemsModel> list) {
        this.context = context;
        this.list = list;
    }
    
    // method to create new views
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // inflates the recyclerview_design view
        // that is used to hold list item
        View view = LayoutInflater.from(context).inflate(R.layout.recyclerview_items, parent, false);
        return new ViewHolder(view);
    }

    // binds the list items to a view
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        ItemsModel model = list.get(position);
        // sets the text to the textview from our ItemsModel class
        holder.item.setText(model.getData());
    }

    // return the number of the items in the list
    @Override
    public int getItemCount() {
        return list.size();
    }


    // Holds the views for adding it to image and text
    public static class ViewHolder extends RecyclerView.ViewHolder {
        
        private TextView item;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            item = itemView.findViewById(R.id.recyclerview_txt);
        }
    }
}

Step 5: Working with MainActivity

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

import android.graphics.Color;
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.hugocastelani.waterfalltoolbar.Dp;
import com.hugocastelani.waterfalltoolbar.WaterfallToolbar;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerView;
    ArrayList<ItemsModel> items;
    Toolbar toolbar;

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

        // getting the recyclerview by its id
        recyclerView = findViewById(R.id.recyclerview);
        
        // getting the toolbar by its id
        toolbar = findViewById(R.id.toolbar);

        // setting the action bar
        setSupportActionBar(toolbar);
        
        // changing the color of the toolbar's text
        toolbar.setTitleTextColor(Color.WHITE);

        // creating list of items
        items = new ArrayList<>();

        // This loop will create 20 Views containing the text
        for (int i = 0; i <= 20; i++) {
            // adding the items into the arraylist
            items.add(new ItemsModel("Item " + i));
        }

        // This will pass the ArrayList to our Adapter
        Adapter adapter = new Adapter(this, items);
        
        // setting the layout manager for the recyclerview
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        
        // Setting the Adapter with the recyclerview
        recyclerView.setAdapter(adapter);


        // finding waterfall toolbar by its id
        WaterfallToolbar waterfallToolbar = findViewById(R.id.waterfall_toolbar);
        
        // setting the recyclerview to the waterfall toolbar
        waterfallToolbar.setRecyclerView(recyclerView);

        // setting the initial elevation of the toolbar
        waterfallToolbar.setInitialElevation(new Dp(0).toPx());

        // setting the final elevation of the toolbar
        waterfallToolbar.setFinalElevation(new Dp(30).toPx());

    }
}

Step 6: Working with the themes.xml file

Go to the themes.xml file and change the parent attribute to NoActionBar like this.

<style name="Theme.WaterfallToolbar" parent="Theme.MaterialComponents.DayNight.NoActionBar">

Customization

You can also customize the toolbar according to you by changing some parameters. You can customize the elevation and the scroll position of the waterfall toolbar according to your choice. 

Initial Elevation

By Default the elevation value of the waterfall toolbar is 0dp. You can customize it by calling the setInitialElevation() method and provide an integer value as a parameter.

Example:

Java 

waterfallToolbar.setInitialElevation(new Dp(1).toPx());

XML

app:initial_elevation="1dp"

Final Elevation

By Default the final elevation value of the toolbar is 4dp. You can customize it by calling the setFinalElevation() method and provide an integer value as a parameter. It will make the shadow of the toolbar much bigger or according to the value passed as a parameter to setFinalElevation().

Example:

Java

waterfallToolbar.setFinalElevation(new Dp(10).toPx());

XML

app:final_elevation="10dp"

Scroll Final position

In the scroll final position, you can set the elevation according to the screen’s height percentage when the view is scrolled. The default percentage is 12%.

Example:

It will provide the elevation when the screen is scrolled 20% of the total screen’s height.

Java

waterfallToolbar.setScrollFinalPosition(20);

XML

app:scroll_final_elevation="20"

Output:

pushpender007

Follow

Improve

Article Tags :

• Android
• Java

Practice Tags :

• Java