Drum Pad Tutorial Using SoundPool

Maret 12, 2018

Drum Pad Tutorial Using SoundPool

Hello guys, In this Tutorial i will show you how to make a drum pad app using android studio. I am going to use SoundPool to play short sounds Notice : Please use small audio file size to avoid memory problem .

Firstly We Need To Add The Different Color Values For Designing

The Button In The UI For This Go To "Values" Directory and open

the "colors.xml" and add the code which is written below

<?xml version="1.0" encoding="utf-8"?><resources>
<color name="colorPrimary">#21222c</color>
<color name="colorPrimaryDark">#21222c</color>
<color name="colorAccent">#FF4081</color>
    
<!-- blue style gradient -->

 <color name="bluestartcolor">#47f9fe</color>
 <color name="blueendcolor">#1295fd</color>


<!-- orange style gradient -->

 <color name="orangestartcolor">#feed64</color>
 <color name="orangeendcolor">#dda660</color>

<!-- pink style gradient -->

<color name="pinkstartcolor">#fd75a5</color>
<color name="pinkendcolor">#ea1e77</color>

<!-- purple style gradient -->

<color name="purplestartcolor">#f75fe1</color>
<color name="purpleendcolor">#c425ec</color>

<!-- green style gradient -->

<color name="greenstartcolor">#b4FA51</color>
<color name="greenendcolor">#78cb29</color>
</resources>

Secondly We Need To Design a Gradient Background For Buttons
for this go to drawable directory and create 5 .xml files

1.blue_button.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<gradient android:startColor="@color/bluestartcolor"

android:endColor="@color/blueendcolor"

android:type="radial"

android:angle="90"

android:gradientRadius="50dp"/>
<corners android:radius="30dp"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<gradient android:startColor="@color/bluestartcolor"

 android:endColor="@color/blueendcolor"

 android:type="radial"

 android:angle="90"

 android:gradientRadius="100dp"/>
<corners android:radius="30dp"/>
</shape>
</item>
</selector>

2.green_button.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
    <shape android:shape="rectangle">
        <gradient android:startColor="@color/greenstartcolor"

 android:endColor="@color/greenendcolor"

 android:type="radial"

 android:angle="90"

 android:gradientRadius="50dp"/>
    <corners android:radius="30dp"/>
    </shape>

</item>

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <gradient android:startColor="@color/greenstartcolor"

 android:endColor="@color/greenendcolor"

 android:type="radial"

 android:angle="90"

 android:gradientRadius="100dp"/>
            <corners android:radius="30dp"/>
        </shape>
    </item>
</selector>

3.orange_button.xml

<?xml version="1.0" encoding="utf-8"?>

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
    <shape android:shape="rectangle">
        <gradient android:startColor="@color/orangestartcolor"

 android:endColor="@color/orangeendcolor"

 android:type="radial"

  android:angle="90"

 android:gradientRadius="50dp"/>
    <corners android:radius="30dp"/>
    </shape>

</item>

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <gradient android:startColor="@color/orangestartcolor

 android:endColor="@color/orangeendcolor"

 android:type="radial"

 android:angle="90"

 android:gradientRadius="100dp"/>
            <corners android:radius="30dp"/>
        </shape>
    </item>
</selector>

4.pink_button.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
    <shape android:shape="rectangle">
        <gradient android:startColor="@color/pinkstartcolor"

 android:endColor="@color/pinkendcolor"

 android:type="radial"

 android:angle="90"

 android:gradientRadius="50dp"/>
    <corners android:radius="30dp"/>
    </shape>

</item>

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <gradient android:startColor="@color/pinkstartcolor"

 android:endColor="@color/pinkendcolor"

 android:type="radial"

 android:angle="90"

 android:gradientRadius="100dp"/>
            <corners android:radius="30dp"/>
        </shape>
    </item>
</selector>

5.purple_button.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
    <shape android:shape="rectangle">
        <gradient android:startColor="@color/purplestartcolor"

 android:endColor="@color/purpleendcolor"

 android:type="radial"

 android:angle="90"

 android:gradientRadius="50dp"/>
    <corners android:radius="30dp"/>
    </shape>

</item>

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <gradient android:startColor="@color/purplestartcolor"

 android:endColor="@color/purpleendcolor"

 android:type="radial"

 android:angle="90"

 android:gradientRadius="100dp"/>
            <corners android:radius="30dp"/>
        </shape>
    </item>
</selector>

Then Come to Activity_main.xml and Paste the below code to make

the full ui by using these gradient layout as a background to buttons

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:background="@color/colorPrimary"

android:padding="10dp"

android:gravity="center"

tools:context="tushar.androidgits.com.drumpad.MainActivity">
<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

android:id="@+id/linearLayout">
<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal">
<Button

 android:background="@drawable/blue_button"

 android:layout_width="100dp"

 android:layout_height="100dp"

 android:onClick="playsound1"/>
<Button

 android:layout_marginLeft="5dp"

 android:background="@drawable/blue_button"

 android:layout_width="100dp"

 android:layout_height="100dp"

 android:onClick="playsound2"/>
<Button

 android:layout_marginLeft="5dp"

 android:background="@drawable/blue_button"

 android:layout_width="100dp"

 android:layout_height="100dp"

 android:onClick="playsound3"/>
</LinearLayout>

<LinearLayout

 android:layout_width="wrap_content"

 android:layout_height="wrap_content"

 android:orientation="horizontal">
<Button

 android:layout_marginTop="5dp"

 android:background="@drawable/purple_button"

 android:layout_width="100dp"

 android:layout_height="100dp"

 android:onClick="playsound4"/>
<Button

 android:layout_marginTop="5dp"

 android:layout_marginLeft="5dp"

 android:background="@drawable/orange_button"

 android:layout_width="100dp"

 android:layout_height="100dp"

 android:onClick="playsound5"/>
<Button

 android:layout_marginTop="5dp"

 android:layout_marginLeft="5dp"

 android:background="@drawable/pink_button"

 android:layout_width="100dp"

 android:layout_height="100dp"

 android:onClick="playsound6"/>
</LinearLayout>

<LinearLayout

 android:layout_marginTop="5dp"

 android:layout_width="wrap_content"

 android:layout_height="wrap_content"

 android:orientation="horizontal">
<Button

 android:background="@drawable/green_button"

 android:layout_width="100dp"

 android:layout_height="100dp"

 android:onClick="playsound7"/>
<Button

 android:layout_marginLeft="5dp"

 android:background="@drawable/green_button"

 android:layout_width="100dp"

 android:layout_height="100dp"

 android:onClick="playsound8"/>
<Button

 android:layout_marginLeft="5dp"

 android:background="@drawable/pink_button"

 android:layout_width="100dp"

 android:layout_height="100dp"

 android:onClick="playsound9"/>
</LinearLayout>

</LinearLayout>


</RelativeLayout>

Now Finally Come to the MainActivity.java And Lets add the Sounds

to each button by using the soundpool

MainActivity.java

package tushar.androidgits.com.drumpad;

import android.media.AudioManager;
import android.media.SoundPool;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {
private SoundPool sp;
    private int sound1;
    private int sound2;
    private int sound3;
    private int sound4;
    private int sound5;
    private int sound6;
    private int sound7;
    private int sound8;
    private int sound9;
    private int sound0;

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

        sp = new SoundPool(2, AudioManager.STREAM_MUSIC,0);
        sound1 = sp.load(getApplicationContext(),R.raw.sound1,1);
        sound2 = sp.load(getApplicationContext(),R.raw.sound2,1);
        sound3 = sp.load(getApplicationContext(),R.raw.sound3,1);
        sound4 = sp.load(getApplicationContext(),R.raw.sound4,1);
        sound5 = sp.load(getApplicationContext(),R.raw.sound5,1);
        sound6 = sp.load(getApplicationContext(),R.raw.sound6,1);
        sound7 = sp.load(getApplicationContext(),R.raw.sound7,1);
        sound8 = sp.load(getApplicationContext(),R.raw.sound8,1);
        sound9 = sp.load(getApplicationContext(),R.raw.sound9,1);
        sound0 = sp.load(getApplicationContext(),R.raw.sound0,1);
    }

    public void playsound1(View v){sp.play(sound1,1.0f,1.0f,0,0,10f);}
    public void playsound2(View v){sp.play(sound2,1.0f,1.0f,0,0,10f);}
    public void playsound3(View v){sp.play(sound3,1.0f,1.0f,0,0,10f);}
    public void playsound4(View v){sp.play(sound4,1.0f,1.0f,0,0,10f);}
    public void playsound5(View v){sp.play(sound5,1.0f,1.0f,0,0,10f);}
    public void playsound6(View v){sp.play(sound6,1.0f,1.0f,0,0,10f);}
    public void playsound7(View v){sp.play(sound7,1.0f,1.0f,0,0,10f);}
    public void playsound8(View v){sp.play(sound8,1.0f,1.0f,0,0,10f);}
    public void playsound9(View v){sp.play(sound9,1.0f,1.0f,0,0,10f);}

}

Run Your App And Enjoy The Drum Pad if you get any error or any problem

in this tutorial please let me know in the comment session

Subscribe to this blog new letter to get updated

follow me on google plus by just click on follow button in the Nav Bar

follow me on instagram : www.instagram.com/here_tushar_verma

Like share and subscribe

Written by : Tushar Verma (Author & Founder)

Cari Blog Ini

Top1 News

Drum Pad Tutorial Using SoundPool

Komentar

Posting Komentar

Postingan Populer

Implement Bubble Picker Into Your Android App

Android Circular Menu Tutorial Using ImangazalievM (Github) Library