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
-
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)
-
Choose "Empty Activity" from the project template window and click Next
-
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 ))
-
Next, click on the Finish button after filling in the above details
-
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,
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 the 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.
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:
