Implement Audio Visualizer in Android App

We have seen different types of app in which the audio or music is shown in the form of waves, bars, etc such as the Music Player app (when we are playing the music or any other audio in the app), like Audio Recorder App (when we are recording the audio), or some Voice Changer App (when we change the voice), etc.

Such visualization is used to show simple waves of the audio file to the user representing the volume and other properties of the audio being played or recorded. It makes the UI of an Android app more beautiful and interactive and also leaves a good impression on the end-user.

What is Chibde Audio Visualizer?

This is an external library available on Github with the name Chibde Audio Visualizer that can be used to do implement audio visualizer in an Android App. You can learn more about the Chibde Audio Visualizer on GitHub here.

So let's implement a simple Chibde Audio Visualizer in our android app.

Step 1: Create a new Project

1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to set up Android Studio and create your first Android project)

2. Choose "Empty Activity" from the project template window and click Next

3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ), and minimum SDK(we are using API 19: Android 4.4 ( KitKat ))

4. Next click on the Finish button after filling in the above details

5. Now, wait for the project to finish building.

Step 2: Adding the Chibde Audio Visualizer dependency

To show the Audio Visualizer in our app we have to implement the Chibde Audio Visualizer in our app, to do so follow the below steps.

Go to Gradle Scripts -> build.gradle (Module: app) section and import below dependencies and click the "sync Now" show at the top:

dependencies {
 // Adding chibde audio visualizer Library
    implementation 'com.chibde:audiovisualizer:2.2.0'
}

Step 3: Modify AndroidManifest.xml

Go to app->manifests->AndroidManifest.xml file and add the record audio permission to the Android Manifest file:

<manifest>
 <!-- adding record audio  permission -->
 <uses-permission android:name = "android.permission.RECORD_AUDIO"/>
</manifest>

Step 4: Modify activity_main.xml

Now go to app -> res -> layout -> activity_main.xml and add a LinearLayout with orientation vertical. and inside LinearLayout we add buttons for showing different types of audio visualizations as shown below:

  <LinearLayout
        android:layout_alignParentBottom = "true"
        android:orientation = "vertical"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content">

        <Button
            android:onClick = "lineVisualization"
            android:text = "Line Visualizer"
            android:layout_margin = "4dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>
        <Button
            android:onClick = "barVisualization"
            android:text = "Bar Visualizer"
            android:layout_margin = "4dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>
        <Button
            android:onClick = "circleBarVisualization"
            android:text = "Circle Bar Visualizer"
            android:layout_margin = "4dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>
        <Button
            android:onClick = "circleVisualization"
            android:text = "Circle Visualizer"
            android:layout_margin = "4dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>
        <Button
            android:onClick = "squareBarVisualization"
            android:text = "Square Bar Visualizer"
            android:layout_margin = "4dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>
        <Button
            android:onClick = "lineBarVisualization"
            android:text = "Line Bar Visualizer"
            android:layout_margin = "4dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>

    </LinearLayout>

Next, We add different visualizers inside a RelativeLayout as shown below:

    <com.chibde.visualizer.LineVisualizer
        android:id = "@+id/visualizerLine"
        android:layout_width = "match_parent"
        android:layout_height = "240dp"/>

    <com.chibde.visualizer.BarVisualizer
        android:id = "@+id/visualizerBar"
        android:layout_width = "match_parent"
        android:layout_height = "240dp"/>

    <com.chibde.visualizer.CircleBarVisualizer
        android:id = "@+id/visualizerCircleBar"
        android:layout_width = "match_parent"
        android:layout_height = "240dp"/>

    <com.chibde.visualizer.CircleVisualizer
        android:id = "@+id/visualizerCircle"
        android:layout_width = "match_parent"
        android:layout_height = "240dp"/>

    <com.chibde.visualizer.SquareBarVisualizer
        android:id = "@+id/visualizerSquareBar"
        android:layout_width = "match_parent"
        android:layout_height = "240dp"/>

    <com.chibde.visualizer.LineBarVisualizer
        android:id = "@+id/visualizerLineBar"
        android:layout_width = "match_parent"
        android:layout_height = "240dp" />

The complete code of activity_main.xml is shown below:

<?xml version  =  "1.0" encoding  =  "utf-8"?>
<RelativeLayout xmlns:android  =  "http://schemas.android.com/apk/res/android"
    xmlns:app  =  "http://schemas.android.com/apk/res-auto"
    xmlns:tools  =  "http://schemas.android.com/tools"
    android:layout_width  =  "match_parent"
    android:layout_height  =  "match_parent"
    tools:context  =  ".MainActivity">

    <LinearLayout
        android:layout_alignParentBottom = "true"
        android:orientation = "vertical"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content">

        <Button
            android:onClick = "lineVisualization"
            android:text = "Line Visualizer"
            android:layout_margin = "4dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>
        <Button
            android:onClick = "barVisualization"
            android:text = "Bar Visualizer"
            android:layout_margin = "4dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>
        <Button
            android:onClick = "circleBarVisualization"
            android:text = "Circle Bar Visualizer"
            android:layout_margin = "4dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>
        <Button
            android:onClick = "circleVisualization"
            android:text = "Circle Visualizer"
            android:layout_margin = "4dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>
        <Button
            android:onClick = "squareBarVisualization"
            android:text = "Square Bar Visualizer"
            android:layout_margin = "4dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>
        <Button
            android:onClick = "lineBarVisualization"
            android:text = "Line Bar Visualizer"
            android:layout_margin = "4dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>
    </LinearLayout>

    <com.chibde.visualizer.LineVisualizer
        android:id = "@+id/visualizerLine"
        android:layout_width = "match_parent"
        android:layout_height = "240dp"/>

    <com.chibde.visualizer.BarVisualizer
        android:id = "@+id/visualizerBar"
        android:layout_width = "match_parent"
        android:layout_height = "240dp"/>

    <com.chibde.visualizer.CircleBarVisualizer
        android:id = "@+id/visualizerCircleBar"
        android:layout_width = "match_parent"
        android:layout_height = "240dp"/>

    <com.chibde.visualizer.CircleVisualizer
        android:id = "@+id/visualizerCircle"
        android:layout_width = "match_parent"
        android:layout_height = "240dp"/>

    <com.chibde.visualizer.SquareBarVisualizer
        android:id = "@+id/visualizerSquareBar"
        android:layout_width = "match_parent"
        android:layout_height = "240dp"/>

    <com.chibde.visualizer.LineBarVisualizer
        android:id = "@+id/visualizerLineBar"
        android:layout_width = "match_parent"
        android:layout_height = "240dp" />

</RelativeLayout>

Step 5: MainActivity.java file

Now open the MainActivity.java file and import some basic classes as shown below:

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;

//importing required classes
import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.View;
import com.chibde.visualizer.BarVisualizer;
import com.chibde.visualizer.CircleBarVisualizer;
import com.chibde.visualizer.CircleVisualizer;
import com.chibde.visualizer.LineBarVisualizer;
import com.chibde.visualizer.LineVisualizer;
import com.chibde.visualizer.SquareBarVisualizer;

Next, we create the object of MediaPlayer class inside MainActivity class as shown below:

//creating object of mediaPlayer 
public MediaPlayer mediaPlayer;

Now inside the onCreate method, we initialize the MediaPlayer and we start the media player:

//initializing the media player 
mediaPlayer = MediaPlayer.create( this,  R.raw.song);

//playing media
mediaPlayer.start();

Now we create different methods for different types of visualizations as shown below:

• Line audio visualization

• Bar audio visualization

• Circle Bar audio visualization

• Circle audio visualization

• Square Bar audio visualization

• Line Bar audio visualization

  public void lineVisualization(View view) {
        LineVisualizer lineVisualizer = findViewById(R.id.visualizerLine);

        lineVisualizer.setVisibility(View.VISIBLE);

        // set a custom color to the line.
        lineVisualizer.setColor(ContextCompat.getColor(this, R.color.myColor1));

        // set the line width for the visualizer between 1-10 default is  1.
        lineVisualizer.setStrokeWidth(1);

        // Setting the media player to the visualizer.
        lineVisualizer.setPlayer(mediaPlayer.getAudioSessionId());
    }

    public void barVisualization(View view) {
        BarVisualizer barVisualizer = findViewById(R.id.visualizerBar);

        barVisualizer.setVisibility(View.VISIBLE);
        // set the custom color to the line.
        barVisualizer.setColor(ContextCompat.getColor(this, R.color.myColor2));

        // define a custom number of bars we want in the visualizer it is between (10 - 256).
        barVisualizer.setDensity(80);

        // Set your media player to the visualizer.
        barVisualizer.setPlayer(mediaPlayer.getAudioSessionId());
    }

    public void circleBarVisualization(View view) {
        CircleBarVisualizer circleBarVisualizer = findViewById(R.id.visualizerCircleBar);

        circleBarVisualizer.setVisibility(View.VISIBLE);

        // set the custom color to the line.
        circleBarVisualizer.setColor(ContextCompat.getColor(this, R.color.myColor3));

        // Set the media player to the visualizer.
        circleBarVisualizer.setPlayer(mediaPlayer.getAudioSessionId());
    }

    public void circleVisualization(View view) {

        CircleVisualizer circleVisualizer = findViewById(R.id.visualizerCircle);

        circleVisualizer.setVisibility(View.VISIBLE);

        // set custom color to the line.
        circleVisualizer.setColor(ContextCompat.getColor(this, R.color.myColor4));

        // Customize the size of the circle. by default, the multipliers are 1.
        circleVisualizer.setRadiusMultiplier(2.2f);

        // set the line with for the visualizer between 1-10 default 1.
        circleVisualizer.setStrokeWidth(2);

        // Set the media player to the visualizer.
        circleVisualizer.setPlayer(mediaPlayer.getAudioSessionId());
    }

    public void squareBarVisualization(View view) {
        SquareBarVisualizer squareBarVisualizer = findViewById(R.id.visualizerSquareBar);

        squareBarVisualizer.setVisibility(View.VISIBLE);

        // set custom color to the line.
        squareBarVisualizer.setColor(ContextCompat.getColor(this, R.color.myColor5));

        // define a custom number of bars you want in the visualizer between (10 - 256).
        squareBarVisualizer.setDensity(65);

        // Set Spacing
        squareBarVisualizer.setGap(2);

        // Set the media player to the visualizer.
        squareBarVisualizer.setPlayer(mediaPlayer.getAudioSessionId());
    }

    public void lineBarVisualization(View view) {
        LineBarVisualizer lineBarVisualizer = findViewById(R.id.visualizerLineBar);

        lineBarVisualizer.setVisibility(View.VISIBLE);

        // setting the custom color to the line.
        lineBarVisualizer.setColor(ContextCompat.getColor(this, R.color.myColor6));

        // define the custom number of bars we want in the visualizer between (10 - 256).
        lineBarVisualizer.setDensity(60);

        // Setting the media player to the visualizer.
        lineBarVisualizer.setPlayer(mediaPlayer.getAudioSessionId());
    }

We have added different colors in the app-> res-> values-> colors.xml as shown below:

<?xml version = "1.0" encoding = "utf-8"?>
<resources>
    <color name = "purple_200">#FFBB86FC</color>
    <color name = "purple_500">#FF6200EE</color>
    <color name = "purple_700">#FF3700B3</color>
    <color name = "teal_200">#FF03DAC5</color>
    <color name = "teal_700">#FF018786</color>
    <color name = "black">#FF000000</color>
    <color name = "white">#FFFFFFFF</color>
    <color name = "myColor1">#FF0000</color>
    <color name = "myColor2">#0099FF</color>
    <color name = "myColor3">#00FF5D</color>
    <color name = "myColor4">#FFEB3B</color>
    <color name = "myColor5">#341A63</color>
    <color name = "myColor6">#FF5722</color>
</resources>

The complete code of the MainActivity.java is shown below:

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;

import android.media.MediaPlayer;
import android.os.Bundle;
import android.view.View;
import com.chibde.visualizer.BarVisualizer;
import com.chibde.visualizer.CircleBarVisualizer;
import com.chibde.visualizer.CircleVisualizer;
import com.chibde.visualizer.LineBarVisualizer;
import com.chibde.visualizer.LineVisualizer;
import com.chibde.visualizer.SquareBarVisualizer;

public class MainActivity extends AppCompatActivity {

    //creating object of mediaPlayer
    public MediaPlayer mediaPlayer;

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

        //initializing the media player
        mediaPlayer = MediaPlayer.create( this,  R.raw.song);

        //playing media
        mediaPlayer.start();
    }

    public void lineVisualization(View view) {
        LineVisualizer lineVisualizer = findViewById(R.id.visualizerLine);
        
        lineVisualizer.setVisibility(View.VISIBLE);

        // set a custom color to the line.
        lineVisualizer.setColor(ContextCompat.getColor(this, R.color.myColor1));

        // set the line width for the visualizer between 1-10 default is  1.
        lineVisualizer.setStrokeWidth(1);

        // Setting the media player to the visualizer.
        lineVisualizer.setPlayer(mediaPlayer.getAudioSessionId());
    }

    public void barVisualization(View view) {
        BarVisualizer barVisualizer = findViewById(R.id.visualizerBar);
        
        barVisualizer.setVisibility(View.VISIBLE);
        // set the custom color to the line.
        barVisualizer.setColor(ContextCompat.getColor(this, R.color.myColor2));

        // define a custom number of bars we want in the visualizer it is between (10 - 256).
        barVisualizer.setDensity(80);

        // Set your media player to the visualizer.
        barVisualizer.setPlayer(mediaPlayer.getAudioSessionId());
    }

    public void circleBarVisualization(View view) {
        CircleBarVisualizer circleBarVisualizer = findViewById(R.id.visualizerCircleBar);

        circleBarVisualizer.setVisibility(View.VISIBLE);

        // set the custom color to the line.
        circleBarVisualizer.setColor(ContextCompat.getColor(this, R.color.myColor3));

        // Set the media player to the visualizer.
        circleBarVisualizer.setPlayer(mediaPlayer.getAudioSessionId());
    }

    public void circleVisualization(View view) {

        CircleVisualizer circleVisualizer = findViewById(R.id.visualizerCircle);

        circleVisualizer.setVisibility(View.VISIBLE);

        // set custom color to the line.
        circleVisualizer.setColor(ContextCompat.getColor(this, R.color.myColor4));

        // Customize the size of the circle. by default, the multipliers are 1.
        circleVisualizer.setRadiusMultiplier(2.2f);

        // set the line with for the visualizer between 1-10 default 1.
        circleVisualizer.setStrokeWidth(2);

        // Set the media player to the visualizer.
        circleVisualizer.setPlayer(mediaPlayer.getAudioSessionId());
    }

    public void squareBarVisualization(View view) {
        SquareBarVisualizer squareBarVisualizer = findViewById(R.id.visualizerSquareBar);

        squareBarVisualizer.setVisibility(View.VISIBLE);

        // set custom color to the line.
        squareBarVisualizer.setColor(ContextCompat.getColor(this, R.color.myColor5));

        // define a custom number of bars you want in the visualizer between (10 - 256).
        squareBarVisualizer.setDensity(65);

        // Set Spacing
        squareBarVisualizer.setGap(2);

        // Set the media player to the visualizer.
        squareBarVisualizer.setPlayer(mediaPlayer.getAudioSessionId());

    }

    public void lineBarVisualization(View view) {
        LineBarVisualizer lineBarVisualizer = findViewById(R.id.visualizerLineBar);

        lineBarVisualizer.setVisibility(View.VISIBLE);

        // setting the custom color to the line.
        lineBarVisualizer.setColor(ContextCompat.getColor(this, R.color.myColor6));

        // define the custom number of bars we want in the visualizer between (10 - 256).
        lineBarVisualizer.setDensity(60);

        // Setting the media player to the visualizer.
        lineBarVisualizer.setPlayer(mediaPlayer.getAudioSessionId());
    }

}

Build the App:

Now our app is ready for build and run, but when you will run the app, the app will close automatically due to some error. So how to solve this error?

Follow these basic steps to resolve the issue:

1. Long press on the app icon and click on App info,

2. Inside App info, click on Permissions,

3. Inside Permissions, you will see that Microphone Permission is DENIED. Now click on the Microphone,

4. Now Click on Allow only while using the app,

5. Now our Microphone Permission is Allowed as shown in the below snapshot:

Now our app is ready, below is the output of the app.

Output:

In the below snapshots, you can see how Chibde Audio Visualizer will look in the android application.

When App is opened for the first time:

When we click on the "Line Visualizer" Button:

When we clicked on the "Bar Visualizer" Button:

When we clicked on the "Circle Bar Visualizer" Button:

When we clicked on the "Circle Visualizer" Button:

When we clicked on the "Square Bar Visualizer" Button:

When we clicked on the "Line Bar Visualizer" Button:

Conclusion:

In just 5 simple steps we have integrated and shown you the basic example for creating an audio visualization using Chibde Audio Visualizer in your android app. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.