morristech / waterfall-toolbar Goto Github PK

Waterfall Toolbar

Made in Kotlin, Waterfall Toolbar is an Android version of Material Design's web component waterfall toolbar. Basically, what it does is dynamize an ordinary Toolbar, increasing and decreasing its shadow when an associated view is scrolled.

Sample

You can install the sample.apk to get a better notion of what's going on. Also available at Play Store (click in the badge above).

Setup

Gradle dependency

Waterfall Toolbar is available on Jitpack.
To add this library to your project, write the code below in your root (not module) build.gradle file:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

And this one to your module build.gradle file:

dependencies {
    ...
    implementation 'com.github.hugocastelani:waterfall-toolbar:0.4.0'
}

Implementation

Since almost everyone who knows Java knows Kotlin, I'm going to base the implementation in Java, but Kotlin is fully supported.
Implementing Waterfall Toolbar is quite simple. All you gotta do is add it to your layout and refer a RecyclerView or a ScrollView.
Your XML code:

<com.hugocastelani.waterfalltoolbar.WaterfallToolbar
    android:id="@+id/waterfall_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"/>
        
</com.hugocastelani.waterfalltoolbar.WaterfallToolbar>

Your Java code:

public class MainActivity extends AppCompatActivity {
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ...
        WaterfallToolbar waterfallToolbar = (WaterfallToolbar) findViewById(R.id.waterfall_toolbar);
        waterfallToolbar.setRecyclerView(recyclerView);
    }
}

Congratulations, you're all set!
Note: you can do whatever you want with your inner Toolbar, Waterfall Toolbar won't interfere.

Customization

Note: sample project provides a nice environment to test all these things. Maybe you should give it a try.
Well, there are people who follow standards and people who create their standards. These last ones can customize three aspects of Waterfall Toolbar with Java or XML. However, to set those attributes in Java, you have to use WaterfallToolbar's unit classes: Px and Dp.

How to use Px and Dp classes

I've created these classes to simplify the conversion between px and dp, which happens often inside WaterfallToolbar class. Using them is quite simple. If you have a WaterfallToolbar object instantiated in your class, just create a new object passing the intended size:

final Pixel pixel = new Pixel(50);

But if you're using them before instantiating, you have to give your display density:

DimensionUnitsKt.setDensity(getResources().getDisplayMetrics().density);

Initial elevation

The elevation with which the toolbar starts. Default value: 0 dp. Java and XML implementation, respectively:

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

app:initial_elevation="1dp"

Result:

As you can see, there's now a tiny initial shadow.
Note: Waterfall Toolbar extends CardView, and its elevation in taken seriously by Android. Since elevation is set to 0dp, if there's another view below it, Waterfall Toolbar is going to be overlaid. Fortunately, if you set the views' limits properly, you won't have any related trouble.

Final elevation

The elevation the toolbar gets when it reaches final scroll elevation. Default value: 4 dp. Java and XML implementation, respectively:

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

app:final_elevation="10dp"

Result:

As result, the final shadow gets much bigger.

Scroll final position

The percentage of the screen's height that is going to be scrolled to reach the final elevation. Default value: 12%. Java and XML implementation, respectively:
Short value:

waterfallToolbar.setScrollFinalPosition(4);

app:scroll_final_elevation="4"

Long value:

waterfallToolbar.setScrollFinalPosition(40);

app:scroll_final_elevation="40"

Respective results:

Now the final shadow takes much less and much longer to completely appear, respectively.

Current project situation

Waterfall Toolbar is stable, but ListView would come in handy. If you want to contribute, please read this.

Developer

Contact me

Google+
Telegram

Support me

[email protected]
If you enjoy my work and have lots of money left over, please support me via PayPal using the email above :)

License

MIT License
 
Copyright (c) 2017 Hugo Castelani
 
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
 
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
 
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.