Case study audio visualization view for android by Cleveroad
Android,  Java,  Mobile

How to implement WaveInApp Visualizer into an Android App

Our talented developers are always full of creative ideas. And when they have a free minute, they try to put them into action. WaveInApp is a result of musical inspiration. It is a library which lets you visualize the music, you listen on any Android device, starting from 3.0 version. In other words, it’s a player, designed as an animated graphic equalizer.

When you think about an equalizer while developing Android apps, you definitely imagine numerous lines, which dance on a screen in the rhythm of the music. In our equalizer, each line, which represents a certain audio-frequency, is placed one on another and has its own bright colour. When you turn on the music, the lines move, making splashes with bubbles and tail away when it goes silent. The colour-palette of the player is a range of colours of a bright sunset, from peachpuff to purple.

The library can be used for three purposes:

  • Music visualisation;
  • Speech Recognition (it works as a voice visualization when the user speaks);
  • Audio recording by means of a microphone.

Now let us tell you about the creation process of the library and how you can implement it.

The library creation

All things and services around us have overcome the stage of the idea’s appearance and its implementation. Our WaveInApp library is not an exclusion. These were the stages of the development process:

  • The concept formation;
  • Clarification and further detalization;
  • Product development.

Each stage should be planned and fleshed out, if it is necessary for the team and the project.

The concept formation

First there was a general idea to create an audio visualizer with a great design for Android OS. Our idea was to unite musical styles of two generations. We joined the vinyl turntable pattern and the dynamics of an equalizer. When the idea became clear enough, a step-by-step plan was created. And the work started!

Clarification and detalization

In the design of this project we wanted to make an emphasis on the equalizer. If you have an idea about an equalizer, you probably know, that it shows different audio frequencies. That’s why the waves motions and the bubbles are the main features, we have payed attention to.

Product making

Mostly, equalizers are used by professionals for sound customization. The plan was to create a product with equalizer features to delight the eye of Android users. To allocate the sounds of music from the lowest to the highest, physical formulas were used. To image the waves and splashes with bubbles, the team used After Effects CC.

The library implementation

It doesn’t require much efforts to start using the library. Hereinafter we will describe 10 steps, which you should perform to apply our library features to your project.

The 1st step is adding the dependency to the build.gradlefile:

dependencies { compile 'com.cleveroad:audiovisualization:0.9.1' }

Step 2. Implement this line of code to create proper waves by means of the Audio Visualizer:

<uses-feature android:glEsVersion="0x00020000" android:required="true" />

Step 3. To start using VisualizerDbmHandler, add these permissions into your code:

<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>

Step 4. To imbed the speech recognition function, SpeechRecognizerDbmHandler must be used. For this purpose, add this permission:

<uses-permission android:name="android.permission.RECORD_AUDIO"/>

Step 5. Add GLAudioVisualizationView into your layout. You can do it in two ways.

  1. right inside XML layout file;
  2. by means of a builder in Java code.

In XML file:


In Java code:

 new GLAudioVisualizationView.Builder(getContext())

Step 6. GLAudioVisualizationView actuates AudioVisualization interface. If you are sure that there is no need in GLSurfaceView’s public methods, you can just cast your view to AudioVisualization interface and run it.

When using the visualization view, be attentive and take into account the permission nuances in the latest Android versions.

private AudioVisualization audioVisualization;
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        // you can extract AudioVisualization interface for simplifying things
        audioVisualization = (AudioVisualization) glAudioVisualizationView;

Step 7. To associate the audio visualization view with an audio output, apply linkTo (DbmHandler) method. To find the list of vacant handler implementations, use DbmHandler.Factory class.

  SpeechRecognizerDbmHandler handler = DbmHandler.Factory.newSpeechRecognizerHandler(context);

Step 8. To pause the visualization and save the CPU resources, onPause method must be used.

    public void onResume() {
    public void onPause() {

Step 9. Once the application is turned off, call release() method to free the device resources.

    public void onDestroyView() {

Step 10. It is also possible to use your DbmHandler. To do this, extend your class from DbmHandler class and implement onDataReceivedImpl (T object, int layersCount, float [] outDbmValues, float [] outAmpValues) method where:

  • object – your custom data type;
  • layersCount – count of layers you passed in Builder.
  • OutDbmValues – an array with size equals to layersCount. Fill it with normalized dBm values for the layer in range [0..1].
  • outAmpValues – an array with size equals to layersCount. Fill it with amplitude values for the layer. Check JavaDoc of this method for more info.

Then call onDataReceived (T object) method to visualize your data.

Your handler will receive onResume (), onPause () and release () events from audio visualization view.

The library project threads

Except the equaliser, there is a music player widget and a playlist, designed as a cloud of bubbles. They look perfectly, being used together.

All the project is licensed and has a complete guide to its implementation.

The team of developers generates new ideas pretty often and likes to work on new project. We regularly surprise the IT community with new decisions.

Olga Anoshyna is a Writer at Cleveroad Web and Mobile app development company in Ukraine. Our main aim is to help startups, small, and medium businesses create competitive and winning software.

Leave a Reply

Your email address will not be published. Required fields are marked *