How to Build a Xylophone Application in Android?

Last Updated : 07 Apr, 2025

In this article, we will be building a project on Xylophone using Java/Kotlin 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: Add Colors

We need to add colors in the value of the resources directory. We will be using these colors for our Buttons. Navigate to app > res > values > colors.xml and add the following colors.

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>
    <color name="green8">#B354F2A5</color>
</resources>

Step 3: Add Key Notes

Save these audio notes in the app > res > raw directory

Note: Reference article: Resource Raw Folder in Android Studio

Step 4: 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. 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:padding="16dp"
    android:weightSum="8"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/c_key"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:backgroundTint="@color/green1" />

    <Button
        android:id="@+id/d_key"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_weight="1"
        android:backgroundTint="@color/green2" />

    <Button
        android:id="@+id/e_key"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:backgroundTint="@color/green3" />

    <Button
        android:id="@+id/f_key"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_weight="1"
        android:backgroundTint="@color/green4" />

    <Button
        android:id="@+id/g_key"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_weight="1"
        android:backgroundTint="@color/green5" />

    <Button
        android:id="@+id/a_key"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="25dp"
        android:layout_weight="1"
        android:backgroundTint="@color/green6" />

    <Button
        android:id="@+id/b_key"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_weight="1"
        android:backgroundTint="@color/green7" />

    <Button
        android:id="@+id/c2_key"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_weight="1"
        android:backgroundTint="@color/green8" />

</LinearLayout>

Design UI:

Step 5: Working with the MainActivity 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.

MainActivity.java

package org.geeksforgeeks.demo;

import android.media.SoundPool;
import android.os.Bundle;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    
    // Constants
    private static final int SIM_SOUND = 8;
    private static final float LEFT_VOLUME = 1.0f;
    private static final float RIGHT_VOLUME = 1.0f;
    private static final int LOOP = 0;
    private static final int PRIORITY = 0;
    private static final float NORMAL_PLAY_RATE = 1.0f;

    // SoundPool instance
    private SoundPool mSoundPool;
    
    // Sound IDs
    private int mCSoundId1, mDSoundId2, mESoundId3, mFSoundId4;
    private int mGSoundId5, mASoundId6, mBSoundId7, mc2SoundId8;
    
    // Buttons
    private Button c, d, e, f, g, a, b, c2;

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

        // Initialize SoundPool
        mSoundPool = new SoundPool.Builder()
                .setMaxStreams(SIM_SOUND)
                .build();

        // Initialize buttons
        c = findViewById(R.id.c_key);
        d = findViewById(R.id.d_key);
        e = findViewById(R.id.e_key);
        f = findViewById(R.id.f_key);
        g = findViewById(R.id.g_key);
        a = findViewById(R.id.a_key);
        b = findViewById(R.id.b_key);
        c2 = findViewById(R.id.c2_key);

        // Load sound files
        mCSoundId1 = mSoundPool.load(this, R.raw.note1_c, 1);
        mDSoundId2 = mSoundPool.load(this, R.raw.note2_d, 1);
        mESoundId3 = mSoundPool.load(this, R.raw.note3_e, 1);
        mFSoundId4 = mSoundPool.load(this, R.raw.note4_f, 1);
        mGSoundId5 = mSoundPool.load(this, R.raw.note5_g, 1);
        mASoundId6 = mSoundPool.load(this, R.raw.note6_a, 1);
        mBSoundId7 = mSoundPool.load(this, R.raw.note7_b, 1);
        mc2SoundId8 = mSoundPool.load(this, R.raw.note8_c2, 1);

        // Set onClickListeners for buttons
        c.setOnClickListener(v -> mSoundPool.play(mCSoundId1, LEFT_VOLUME, RIGHT_VOLUME, PRIORITY, LOOP, NORMAL_PLAY_RATE));
        d.setOnClickListener(v -> mSoundPool.play(mDSoundId2, LEFT_VOLUME, RIGHT_VOLUME, PRIORITY, LOOP, NORMAL_PLAY_RATE));
        e.setOnClickListener(v -> mSoundPool.play(mESoundId3, LEFT_VOLUME, RIGHT_VOLUME, PRIORITY, LOOP, NORMAL_PLAY_RATE));
        f.setOnClickListener(v -> mSoundPool.play(mFSoundId4, LEFT_VOLUME, RIGHT_VOLUME, PRIORITY, LOOP, NORMAL_PLAY_RATE));
        g.setOnClickListener(v -> mSoundPool.play(mGSoundId5, LEFT_VOLUME, RIGHT_VOLUME, PRIORITY, LOOP, NORMAL_PLAY_RATE));
        a.setOnClickListener(v -> mSoundPool.play(mASoundId6, LEFT_VOLUME, RIGHT_VOLUME, PRIORITY, LOOP, NORMAL_PLAY_RATE));
        b.setOnClickListener(v -> mSoundPool.play(mBSoundId7, LEFT_VOLUME, RIGHT_VOLUME, PRIORITY, LOOP, NORMAL_PLAY_RATE));
        c2.setOnClickListener(v -> mSoundPool.play(mc2SoundId8, LEFT_VOLUME, RIGHT_VOLUME, PRIORITY, LOOP, NORMAL_PLAY_RATE));
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mSoundPool != null) {
            mSoundPool.release();
            mSoundPool = null;
        }
    }
}

MainActivity.kt

package org.geeksforgeeks.demo

import android.media.AudioAttributes
import android.media.AudioManager
import android.media.SoundPool
import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity


class MainActivity : AppCompatActivity() {
    // Helpful Constants
    private val simSound = 8
    private val leftVolume = 1.0f
    private val rightVolume = 1.0f
    private val loop = 0
    private val priority = 0
    private val normalPlayRate = 1.0f

    // Add member variables here
    private lateinit var mSoundPool: SoundPool
    private var mCSoundId1 = 0
    private var mDSoundId2 = 0
    private var mESoundId3 = 0
    private var mFSoundId4 = 0
    private var mGSoundId5 = 0
    private var mASoundId6 = 0
    private var mBSoundId7 = 0
    private var mc2SoundId8 = 0

    // initialize buttons
    private lateinit var c: Button
    private lateinit var d: Button
    private lateinit var e: Button
    private lateinit var f: Button
    private lateinit var g: Button
    private lateinit var a: Button
    private lateinit var b: Button
    private lateinit var c2: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Create a new SoundPool
        mSoundPool = SoundPool.Builder()
            .setMaxStreams(simSound)
            .build()

        c = findViewById(R.id.c_key)
        d = findViewById(R.id.d_key)
        e = findViewById(R.id.e_key)
        f = findViewById(R.id.f_key)
        g = findViewById(R.id.g_key)
        a = findViewById(R.id.a_key)
        b = findViewById(R.id.b_key)
        c2 = findViewById(R.id.c2_key)

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

        // Add the play methods triggered by the buttons
        c.setOnClickListener {
            mSoundPool.play(mCSoundId1, leftVolume, rightVolume, priority, loop, normalPlayRate)
        }
        d.setOnClickListener {
            mSoundPool.play(mDSoundId2, leftVolume, rightVolume, priority, loop, normalPlayRate)
        }
        e.setOnClickListener {
            mSoundPool.play(mESoundId3, leftVolume, rightVolume, priority, loop, normalPlayRate)
        }
        f.setOnClickListener {
            mSoundPool.play(mFSoundId4, leftVolume, rightVolume, priority, loop, normalPlayRate)
        }
        g.setOnClickListener {
            mSoundPool.play(mGSoundId5, leftVolume, rightVolume, priority, loop, normalPlayRate)
        }
        a.setOnClickListener {
            mSoundPool.play(mASoundId6, leftVolume, rightVolume, priority, loop, normalPlayRate)
        }
        b.setOnClickListener {
            mSoundPool.play(mBSoundId7, leftVolume, rightVolume, priority, loop, normalPlayRate)
        }
        c2.setOnClickListener {
            mSoundPool.play(mc2SoundId8, leftVolume, rightVolume, priority, loop, normalPlayRate)
        }
    }
}

Output:

How to Build a Sticky Notes Application in Android Studio?

namanjha10

Improve

Article Tags :

Practice Tags :

Java