My inspiration for this project came with the introduction of Material Design 3 and Android 12, which was a major visual overhaul for Google and Android interfaces. This new design language brought the concept of Dynamic Color, new Material guidelines and a more consistent and expressive experience. While all of these new changes were very exciting, the one that caught my eyes the most was the new media player notification on Android, which featured an animated progress bar that moved like a wave.
Being an Android developer and Material Design fan, I set out to search for this new wavy progress bar, assuming that it would be available in the new release of the Android SDK, but I couldn’t find it anywhere (and no third party libraries like Google’s Accompanist contained a way to get this new component). Having just learned Jetpack Compose, I decided to just take the leap and attempt to do it myself and figure out a way to make this mysterious component possible to use.
WaveSlider is an open-source native Android library that contains the Jetpack Compose component of the animated wavy slider featured starting in Android 12, and is customizable, lightweight and straightforward to use.
I wrote and published documentation for WaveSlider on the GitHub Wiki for my project’s repository, outlining what everything means, a quick start guide, and all client-facing customizations and ways to implement WaveSlider.
Since the library is published on JitPack, the documentation also includes instructions on how to set that up in Android Studio and add the dependency to a project.
The main goal was to simplify the process as much as possible with various code samples and visuals, so that using the library is as seamless as possible for developers.
View the documentation here ->
WaveSlider is fully open source and created collaboratively on GitHub. As of now, I’ve worked with 4 collaborators to merge multiple pull requests and solve issues found by library users.
It’s really exciting to see this library being used (at least until Material adds an official implementation of this) in many projects, as of now the repository has 100+ stars and 10+ forks, and has been shared among many developers on sites like Stack Overflow & X.
In addition to the library, I’ve also created a demo application that allows both prospective and current users to test out the core functionality of the library. In the interface, it has toggles that can customize some of the core parameters that the component has, and it also shows off what a sample implementation of the slider would look like in an app that adheres to Material 3 guidelines using Dynamic Color.
For current users of the library, a look into the demo application source code shows best practices and a real-world implementation of the library, which can help with troubleshooting regarding how to initially add the WaveSlider library, how to use the component, and more.
Although this library is fairly straightforward (having only a single component), it does have a lot of moving parts and was a valuable experience for me, broadening my perspective and getting exposure to different developer tools.
Since WaveSlider is a library, designing and implementing it was a little bit of a different process than projects that I'm used to (mobile apps). When I'm building apps, I keep users in mind in how I design the interface, and what features I add to the product, however in this project, I had to shift my perspective to still have users in mind, but also keep the developer experience in mind. It was a good exercise in code quality, since it won't just be me who goes back and uses the code from this project, but it could be potentially hundrdeds of other developers who are using this in their product, or who are contribtuing to the project.
It also brought me to learn how to publish a library on JitPack, and best practices for release cycles (when to release, what to include in each release, how to publish and name different versions, etc.)
