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
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 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); } } |
