How to create a ListView of Buttons that play different sounds on click

Question

I need to make an Activity with a ListView that could have more than 50 ImageButtons that each play a different Sound.

This is the main activity (that would have the buttons):

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"

    tools:context="com.werewolve.freaksound.sounds"
    android:background="@drawable/f_background_fit">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:src="@drawable/f_logo" />

    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/soundList"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp" />
</RelativeLayout>

This is my custom layout for each line of the listview:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/list_item_string"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:textSize="18sp"
        android:textStyle="bold" />

    <ImageButton
        android:id="@+id/play_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="#00000000"
        android:src="@drawable/f_button_s"
        android:layout_centerVertical="true"
        android:layout_marginRight="5dp" />

</RelativeLayout>

Each button will play a different sound with the onClick "play_btn" and a text according to the sound with the string "list_item_string".

Example:

---

* (Laugh Sound) * (Play Button) ***

---

Answer 1

You should create a custom adapter like so:

public class PlaySoundsAdapter extends BaseAdapter implements View.OnClickListener {

    SoundExample[] sounds;
    Activity context;
    PlaySoundAlert soundPlayerAlert;

    public PlaySoundsAdapter(Activity context, SoundExample[] soundsArray) {
        this.context = context;
        this.sounds = soundsArray;

        // Hooks up the PlaySoundAlert.PlaySound in MainActivity
        this.soundPlayerAlert = (PlaySoundAlert)context;
    }

    @Override
    public int getCount() {
        return sounds == null ? 0 : sounds.length;
    }

    @Override
    public Object getItem(int i) {
        return sounds[i];
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {

        SoundExample item = (SoundExample)getItem(i);

        if (view == null) // reuse existing view
            view = context.getLayoutInflater().inflate(R.layout.custom_sound_layout,
                    viewGroup, false);

        // Set the TextView to the name of the sound
        TextView t = (TextView)view.findViewById(R.id.txtName);
        t.setText(item.getSoundName());

        // Set the tag of the button to the sound resource id (uri)
        Button b = (Button)view.findViewById(R.id.play_btn);
        b.setTag(item.getSoundUri());

        // When the button is clicked, play the associated sound
        b.setOnClickListener(this);

        return view;
    }

    @Override
    public void onClick(View view) {
        Button b = (Button) view;
        if (b != null) {
            int soundUri = (int)b.getTag();

            // Notify listener (MainActivity) to play the required sound
            if (soundPlayerAlert != null) {
                soundPlayerAlert.playSound(soundUri);
            }
        }
    }
}

Next create an interface you can implement in your activity to play a sound like this:

public interface PlaySoundAlert {
    public void playSound(int uri);
}

As you can see the Adapter I created above uses this interface to fire off an event to play the required sound.

Your SoundExample class might like something like this:

public class SoundExample {

    private int soundUri;
    private String soundName;

    public String getSoundName() {
        return soundName;
    }

    public void setSoundName(String soundName) {
        this.soundName = soundName;
    }

    public int getSoundUri() {
        return soundUri;
    }

    public void setSoundUri(int soundUri) {
        this.soundUri = soundUri;
    }
}

And to use this inside your Activity or Fragment use the following:

public class MainActivity extends Activity implements PlaySoundAlert {

    ListView lstSounds;
    PlaySoundsAdapter soundsAdapter;
    SoundExample[] mySounds;

    // Media player for playing sounds
    MediaPlayer mp;

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

        lstSounds = (ListView) findViewById(R.id.soundList);

        // Create sound list & add two SoundExample objects
        mySounds = new SoundExample[2];
        SoundExample s1 = new SoundExample();
        SoundExample s2 = new SoundExample();

        // Set sound one to a beep
        s1.setSoundName("Beep Sound");
        s1.setSoundUri(R.raw.beep);

        // Set sound two to an applause sound
        s2.setSoundName("Applause Sound");
        // NOTE: I am using a sound titled applause.mp3 inside a folder called "raw"
        s2.setSoundUri(R.raw.applause);

        // Add sounds to the list
        mySounds[0] = s1;
        mySounds[1] = s2;

        // Instantiate the adapter and apply to the ListView
        soundsAdapter = new PlaySoundsAdapter(this, mySounds);
        lstSounds.setAdapter(soundsAdapter);
    }

    @Override
    public void playSound(int uri) {
        // Play sound
        mp = MediaPlayer.create(this, uri);
        if (!mp.isPlaying())
            mp.start();
    }
}

And that should be all you need!

Answer 2

The solution would be to create a custom ListView object that has both a TextView for displaying the name of the button and an ImageButton. You then add these objects to your ListView by using a custom Adapter. An alternative to the ImageButton is to simply use a regular image and make it Clickable. A great example for creating a ListView that can display custom objects (including how to create the custom Adapter) may be found here: http://www.androidinterview.com/android-custom-listview-with-image-and-text-using-arrayadapter/