From UWP/Xamarin Forms to Xamarin Android building an MVP ( Audio Player & Fragments ) [Part 2]

Xamarin Android

In these articles I will go over my journey of building an application that runs on multiple platforms. My original application was a classic UWP application, next I built the same application but with Xamarin Forms XAML which you can find here.

The aim of these articles is to go over the different steps that were needed for my application to work. The application needed to have a horizontal listview , database/caching, audio and tracking.

This audio application was built using Xamarin.Android and will release it to the Google Play Store. We already have all of the C# code in a .Net Standard library which allows us to already have the API call, the caching mechanisms, our ViewModels and our Models.

We will start by try to get the audio player working and will work with fragments.

This article is broken into 3 parts:

• [Part 1] Migrating my UWP / Xamarin Forms application to Xamarin Android building an MVP — Horizontal lists & Database
• [Part 2] Migrating my UWP / Xamarin Forms application to Xamarin Android building an MVP — Audio player & Fragments
• [Part 3] From MVP to Release Build, migrating a UWP / Xamarin Forms application to Xamarin Android and submitting it to the Google Play Store

This article is part of a part of a bigger series of articles that walk through the different steps that I went through to migrate an Audio application. You can find the articles here.

Audio player using LibVLC

For this time around we will be using the VideoLAN.LibVLC.Android & LibVLCSharp. I could have used the default MediaPlayer which can be found here with no additional plugins like VLC, however I did find that VLC allowed the application to better manage HLS streams.

Next we need to initialize the VLC library as follows:

Full GitHub source here :

videolan/libvlcsharp

And with that my audio player is able to play my audio files.

Using Fragments

Here is quick description of what a fragment is:

A Fragment represents a behavior or a portion of user interface in a FragmentActivity. You can combine multiple fragments in a single activity to build a multi-pane UI and reuse a fragment in multiple activities. You can think of a fragment as a modular section of an activity, which has its own lifecycle, receives its own input events, and which you can add or remove while the activity is running (sort of like a "sub activity" that you can reuse in different activities).

Here is what the life cycle of a fragment look like:

I have decided to use two fragments one that will hold my Listviews from the Home/Search/Favorite and the other fragment will hold the UI for the audio player. Here is what my activity_main.xml looks like:

Adding Home and Search in a Fragment

We are going to look at how to setup a ListFragment and a normal fragment.

ListFragment

My public class HomeFragment is inheriting from Android.Support.V4.App. ListFragment, the method OnActivityCreated will call the ViewModel HomePageViewModel() which allow us to query our API and get our recommended radios. Next we will need to set our data onto a BaseAdapter that will then need to be set into the ListAdapter property of the ListFragment.

The advantage that I found was that a class that is based on a ListFragment doesn’t need to bind it to a view, the ListFragment already has its own Listview.

Here is the end result:

And it looks exactly like before which was the intended expectation!

Fragment

Next, we are going to use a classic Fragment that will hold our search, the search view is called fragment_search.xml. In our SearchFragment class on the method OnCreate we will initialize our SearchPageViewModel which will allow us to search and query our API to get search results. This class is different from the ListFragment class in the OnCreateView method we will need to inflate our view and bind our data to the different elements in our view like our SearchView and our ListView. What this means is that in my OnCreateView I used FindViewById as follows:

//get searchview
_searchView = view.FindViewById<SearchView>(Resource.Id.search_view_radio);
//get listview
_listView = view.FindViewById<ListView>(Resource.Id.listview_search);

In the MVP Release I will finish the application by adding tracking, a splash screen and release it to the Google Play Store.

Here is quick recap of my mini-articles:

• [Part 1] Migrating my UWP / Xamarin Forms application to Xamarin Android building an MVP — Horizontal lists & Database
• [Part 2] Migrating my UWP / Xamarin Forms application to Xamarin Android building an MVP — Audio player & Fragments
• [Part 3] From MVP to Release Build, migrating a UWP / Xamarin Forms application to Xamarin Android and submitting it to the Google Play Store

Here is the full list of what I plan on working on and writing about: