How to Build a Xylophone Application in Android?

In this article, we will be building a project on Xylophone using Java and XML in android. Xylophone originally is an instrument played by striking a row of wooden bars. This application will be implementing a Xylophone-like instrument that is capable of producing sounds. We will create few Buttons in this app that will act as keys of the instrument when struck. This is going to be a single activity application. A sample video is given below to get an idea about what we are going to do in this article. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Before going to the coding section first you have to do some pre-task

Add Colors: We need to add colors in the value of the resources directory. We will be using these colors for our Buttons.

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="green1">#0F9D58</color>
    <color name="green2">#F21BB56A</color>
    <color name="green3">#E620C374</color>
    <color name="green4">#D929CF7E</color>
    <color name="green5">#CC2ED885</color>
    <color name="green6">#BF34E18D</color>
    <color name="green7">#B33FF39B</color>
</resources>

Add Key Notes: Save these audio notes in the app > res > raw directory

Note: Reference article: Resource Raw Folder in Android Studio

• Note 1
• Note 2
• Note 3
• Note 4
• Note 5
• Note 6
• Note 7

Step 3: Working with the activity_main.xml file

The XML codes are used to build the structure of the activity as well as its styling part. In this XML file, we will create a LinearLayout with vertical orientation. This will contain seven Buttons each with different onClick functions. The width of the button reduces as we go down to give it a look of a xylophone and also to symbolize that the smaller the button less is the note sound. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        style="@style/KeyStyle"
        android:id="@+id/c_key"
        android:background="@color/green1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="c"/>

    <Button
        style="@style/KeyStyle"
        android:id="@+id/d_key"
        android:background="@color/green2"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="d"/>

    <Button
        style="@style/KeyStyle"
        android:id="@+id/e_key"
        android:background="@color/green3"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="e"/>

    <Button
        style="@style/KeyStyle"
        android:id="@+id/f_key"
        android:background="@color/green4"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="f"/>

    <Button
        style="@style/KeyStyle"
        android:id="@+id/g_key"
        android:background="@color/green5"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="g"/>

    <Button
        style="@style/KeyStyle"
        android:id="@+id/a_key"
        android:background="@color/green6"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="25dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="a"/>

    <Button
        style="@style/KeyStyle"
        android:id="@+id/b_key"
        android:background="@color/green7"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="b"/>

</LinearLayout>

Step 4: Working with the MainActivity.java file

In the MainActivity we need to create a new SoundPool. A Soundpool uses MediaPlayer library services to load audio files. We will create a function for each key button with a different audio note. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.media.AudioManager;
import android.media.SoundPool;
import android.os.Bundle;
import android.util.Log;
import android.view.View;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    // Helpful Constants
    private final int sim_sound = 7;
    private final float lft_vol = 1.0f;
    private final float rgt_vol = 1.0f;
    private final int loop = 0;
    private final int prty = 0;
    private final float NORMAL_PLAY_RATE = 1.0f;

    // Add member variables here
    private SoundPool mSoundPool;
    private int mCSoundId1;
    private int mDSoundId2;
    private int mESoundId3;
    private int mFSoundId4;
    private int mGSoundId5;
    private int mASoundId6;
    private int mBSoundId7;

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

        // Create a new SoundPool
        mSoundPool = new SoundPool(sim_sound, AudioManager.STREAM_MUSIC, 0);

        // Load and get the IDs to identify the sounds
        mCSoundId1 = mSoundPool.load(getApplicationContext(), R.raw.note1_c, 1);
        mDSoundId2 = mSoundPool.load(getApplicationContext(), R.raw.note2_d, 1);
        mESoundId3 = mSoundPool.load(getApplicationContext(), R.raw.note3_e, 1);
        mFSoundId4 = mSoundPool.load(getApplicationContext(), R.raw.note4_f, 1);
        mGSoundId5 = mSoundPool.load(getApplicationContext(), R.raw.note5_g, 1);
        mASoundId6 = mSoundPool.load(getApplicationContext(), R.raw.note6_a, 1);
        mBSoundId7 = mSoundPool.load(getApplicationContext(), R.raw.note7_b, 1);

    }

    // Add the play methods triggered by the buttons
    public void c (View v){
        mSoundPool.play(mCSoundId1, lft_vol, rgt_vol, prty,loop,NORMAL_PLAY_RATE);
    }

    public void d (View v){
        mSoundPool.play(mDSoundId2, lft_vol, rgt_vol, prty,loop,NORMAL_PLAY_RATE);
    }

    // Add the play methods triggered by the buttons
    public void e (View v){
        mSoundPool.play(mESoundId3, lft_vol, rgt_vol, prty,loop,NORMAL_PLAY_RATE);
    }

    public void f (View v){
        mSoundPool.play(mFSoundId4, lft_vol, rgt_vol, prty,loop,NORMAL_PLAY_RATE);
    }

    public void g (View v){
        mSoundPool.play(mGSoundId5, lft_vol, rgt_vol, prty,loop,NORMAL_PLAY_RATE);
    }

    public void a (View v){
        mSoundPool.play(mASoundId6, lft_vol, rgt_vol, prty,loop,NORMAL_PLAY_RATE);
    }

    public void b (View v){
        mSoundPool.play(mBSoundId7, lft_vol, rgt_vol, prty,loop,NORMAL_PLAY_RATE);
    }

}

Output: