Creating a Cross-Platform Soundboard with Xamarin Forms – Part 2

Continuing from the post for part 1 of creating the soundboard, we’ll add in a few more MP3 files to each platform, an interface that will retrieve a listing of all the available MP3 files, and a listview that will display buttons to play each of the MP3 files.

To add more MP3 files, we’ll use the same process we did in part 1 to add the first MP3, click on Add -> Existing Item and then select the MP3 files from your computer in each of the following locations:

  • For Android, right click on the Assets folder
  • For iOS, right click on the Resource folder
  • For UWP, right click on the Assets folder

Before we create the interface for listing out the MP3 files, we’re going to add a very simple class to the PCL named MessageCenterObject, this will be used as an easy method to communicate back and forth between our platform specific code and the PCL, in case the loading of the MP3 files takes an extended period of time.  Right click on the Portable project and select Add -> Class, then name the file MessageCenterObject.

Soundboard_13

We’ll adjust it to be a public class and add two simple string properties.

This object will be used for passing messages back and forth between the platform-specific code and the PCL.  To do this, we will be leveraging the Messaging Center.

Now that we have a collection of MP3 files added to the project(s)  for our soundboard, we’ll create the interface that will allow each platform to load in a list of available MP3 files. Right click on the Portable project at the top of your solution and then select Add -> Add New Item. From the list of templates, select Visual C# -> Interface and give it a name of IListMP3Files.cs.

Soundboard_9

Add an accessor for the interface to make it public, and give it a two parameterless methods named GetMP3Filenames that returns a List of strings and a void method named LoadMP3Filenames.

That’s all we need for the interface file, so we’ll move on to the interface implementation in each of the platforms.  As before, we’ll begin with the Android implementation and allow the code explain itself.  Right-click on the Android project in the solution and select Add -> Class and give it the name ListMP3FilesImplementation.

Soundboard_10

We want to add the public accessor to the new class, wire it up to the interface we created in the PCL (IListMP3Files), and then implement the functionality to load a list of MP3 file names from the assets folder.

We’ll move on to the iOS implementation, right click on the iOS project then choose Add -> Class and give it the same name of ListMP3FilesImplementation.

Soundboard_11

As before, give it a public accessor and wire it into the IListMP3Files interface.

Last, and quite possibly least, we’ll create the implementation class for UWP  – right click on the Universal Windows project then choose Add -> Class and give it the same name of ListMP3FilesImplementation.

Soundboard_12

It probably won’t be surprising that I’m going to just provide the code for the class and not explain it beyond the comments…

Now that we have the implementation in place for each of our platforms, all that is left to do is connect the two interfaces together so we can have a soundboard.

Heading back up to the PCL, we need to open up MainPage.xaml to adjust it to list out all of our MP3 files.  We accomplish this by making a very simple ListView that just contains a single button per row, the XAML will look like this

The code-behind for the xaml file (MainPage.xaml.cs) is a bit more complex this time around.  We need to set-up the MessagingCenter to work with the messages going back and forth with the ListMP3Files implementations.  The other new piece is using the ItemsSource property of the ListView we created in the XAML file above to tell it what it needs to load / render for the items.

Once that code is in place, you can run the application on any of the three platforms and you will be presented with a scrollable list of the names of the MP3 files you previously added to your solution, and clicking (or tapping) on any of those names will play the sound files for you.

That wraps up the Cross-Platform Soundboard with Xamarin.Forms.  I glossed over some items that are very important to understand if you want to continue with Xamarin.Forms development (Messaging Center and Dependency Service), so I recommend taking some time to dig into those and ensure they make sense (at least a little bit).