Signup/Sign In

How to Implement Audio Visualizer in Android App [UPDATED]

Posted in Programming   LAST UPDATED: JUNE 26, 2023

    We have seen different types of apps 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 an 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.

    How to Implement Audio Visualizer in 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: Add ing 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 the below dependencies and click the "sync Now" shown 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,

    implement audio visualizer in android

    2. Inside App info, click on Permissions,

    implement audio visualizer in android

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

    implement audio visualizer in android

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

    implement audio visualizer in android

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

    implement audio visualizer in android

    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 the App is opened for the first time:

    implement audio visualizer in android

    When we click on the "Line Visualizer" Button:

    implement audio visualizer in android

    When we clicked on the "Bar Visualizer" Button:

    implement audio visualizer in android

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

    implement audio visualizer in android

    When we clicked on the "Circle Visualizer" Button:

    implement audio visualizer in android

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

    v

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

    implement audio visualizer in android

    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.

    Through this article, we have explored the process of implementing an audio visualizer in an Android app. From understanding the concepts and choosing visualization techniques to integrate the visualizer into your app, you now have the foundation to embark on your visualizer journey. Remember to experiment, iterate, and consider the user experience as you design and refine your visualizations.

    As you continue to enhance your Android app with audio visualizations, keep in mind the performance considerations and adapt the visualizer to different screen sizes and orientations. Aim for a balance between aesthetic appeal and optimized resource usage to deliver a smooth and delightful experience to your users.

    Frequently Asked Questions(FAQs)

    1. Can I implement an audio visualizer in any Android app?

    Yes, you can implement an audio visualizer in any Android app that incorporates audio playback. Whether you're building a music player, a video streaming app, or any other app with audio elements, you can enhance the user experience with an audio visualizer.

    2. What are the visualization techniques commonly used in audio visualizers?

    Common visualization techniques include waveform visualization, frequency spectrum analysis, spectrogram display, and animated graphical effects synced to the audio beat.

    3. Are there any libraries or APIs available for implementing audio visualizers in Android?

    Yes, there are several libraries and APIs available for implementing audio visualizers in Android, such as Visualizer API, ExoPlayer, and third-party libraries like AudioWaves and AudioVisualizationView. These libraries provide pre-built components and utilities to simplify the implementation process.

    4. How can I optimize the performance of my audio visualizer in Android?

    To optimize performance, consider using hardware acceleration, leveraging caching and buffering techniques, and minimizing unnecessary rendering or computation. Additionally, profile your app using tools like Android Profiler to identify and address performance bottlenecks.

    5. Can I customize the visualizations to match the design and branding of my app?

    Yes, you can customize the visualizations to match your app's design and branding. You can adjust colors, shapes, animations, and other visual elements to create a cohesive and visually appealing experience that aligns with your app's aesthetics.

    You may also like:

    About the author:
    K S Lohan is an accomplished author and expert in technical writing on Android language and develop android App. He is highly skilled at communicating complex programming concepts in a clear and concise manner.
    Tags:javaandroid
    IF YOU LIKE IT, THEN SHARE IT
     

    RELATED POSTS