In this article, we will see in detail how to create our Xamarin Android Single View App.
Introduction
* Kindly view my Youtube video to learn Getting started with Xamarin Android Single View App.
In this article, we will see in detail how to create our Xamarin Android Single View App. You can develop the Xamarin application as Xamarin.Forms
for Cross Platform or you can develop native app for Android and IOS using Xamarin.iOS
and Xamarin.Android
. In this article, we will see how to create a native app for Android and here, we have selected the Xamarin Android for Single View App.
In this Mobile App, we will see how to:
- display the Current time using
TextClock
- create a Notification to display the click Counts
- add a Music (MP3) file to resource
- play Song with added MP3 file
- stop the Song
- increase the Mobile Volume
- decrease the Mobile Volume
In this Mobile App, we will be adding TextClock
to display the current time and five buttons.
- In the first button click event, we will be displaying the notification at the top with count of button click.
- In the second button click event, we will play song using the added mp3 from resource.
- In the third button click, we will stop playing the song.
- In the fourth button click, we can increase the volume of the playing song.
- In the fifth button click, we can decrease the volume of sounds.
Background
Make sure you have installed all the prerequisites in your computer. If not, then download and install all, one by one.
First, download and install Visual Studio 2017 from this link.
Make sure you have installed the Mobile development with .NET.
Using the Code
Step 1: Create Your Xamarin
After installing our Visual Studio 2017, click Start, then Programs and select Visual Studio 2017 - Click Visual Studio 2017. Click New, then Project, select Visual C# and Android, then select Single-View App (Android). Enter your project name and click.
Step 2: Xamarin Android Project Structure
References
The References has the default .NET assemblies like System
, System.core
and for Xamarin Android, the most important reference is the Mono.Android
, by default, this reference will be added as we can see in the image. This Mono.Android
reference will be used to interact with our C# code and Android APIs.
MainActivity
In our .NET applications, by default, the Main
method will be run and from our application will be start execution but in Android app, we have collection of activities and each activity will be used for a single view and when we create the Xamarin Android application is created by default the MainActivity.cs. Here, we will be using this activity to run our app. All the activities will be inheriting from the Activity
class as when we open the MainActivity.cs file we can see that. From our MainActivity
, we can set the view which needs to be displayed when we run our App. Here, we can see by default we can see the Main View has been added to SetContentView
.
How to Set the Default Main Activity When We Have Multiple Activity?
As we told you that in our Xamarin.Android
App, we can have multiple Activity and need to have one main Activity to show by default when we run the App. If we have more than one activity and in case we need to set other activities as the main activity, then we can set at the top of activity code as “MainLauncher = true
” for that activity and false
for other activities.
You can also set the Label
(Title) for your app from the Activity, here we have set the title as “Shanu Music App” and also, we can set Icon
for the App.
Lifecycle of Activity
OnCreate()
-> When the Activity
is created OnStart()
- > When the Activity
is started OnResume()
-> Called when Activity
will start interacting with user. OnPause()
-> Activity
is not visible to user (Working in Background) OnStop()
-> Activity
is not available for user OnDestroy()
-> Before the Activity
is destroyed
In our demo, we have by default the OnCreate()
and we will be using this to show our view when the App is running with button click events to perform our needed actions.
View
Activity and Views are the important part of Xamarin Android Apps. As we see, the Activity is used to show our View and to write code for the events and View is used to design our App.
Views will be located inside the Resources and Layout Folders. We can see by default Main.axml will be added in our layout folder. The view will be as a “axml” file and it's purely of XML code.
When we open the Main.axml file, we can see the Designer and Source part. We can add controls as drag and drop from Toolbox as per our need and design our Android App. When we click on the Source part, we can see the controls added to our App in XML code like below:
Values / Strings.XML
We can see that in our Button
text, the caption is added as “android:text="@string/hello
” and here the “="@string/hello”
means that the text will be loaded from the Strings.XML.
The string
for the hello
will be added in the Strings.XMl from the Resources \ Values\.
We can change or add the string
as per our needs:
Resource.Designer
All the resources like controls we are adding in the View or the text we are adding in the String.XML file will be generated with unique number in the Resource.Designer file from the solution.
Hope you have some basic understanding on working with Xamarin Android App and now let’s focus on how to add more controls to make our simple Music App.
Step 3: Working with Code
Displaying Time using TextClock
We will add the TextClock
control to our App and design with the below code, here we have set the format as 12 hours and set the font size and color.
<TextClock xmlns:p2="http://xamarin.com/mono/android/designer-default"
android:format12Hour="hh:mm:ss a"
android:layout_width="match_parent"
android:layout_height="47.5dp"
android:id="@+id/textClock1"
android:gravity="center_horizontal"
android:textColor="#ffccff"
android:textSize="40sp"
android:layout_marginBottom="4.5dp" />
When we run the application, we can see the output in the emulator as the time will be displayed in our application and the time will be automatically displaying with the current time and second.
Displaying Notification
Now we will add a button and, in the button, click event, we will display the notification at the top with the number of times the user clicked on the buttons.
<Button
android:id="@+id/myButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
android:background="@android:drawable/alert_dark_frame" />
We need to add the Xamarin.Android.Support
v4 package to our APP. Right click the solution and click on Manage NUGet Package and search for Xamarin.Android.Support.v4
and click on Install.
We can see the new Xamarin Android Support DLL has been added to our project.
In the MainActivity.cs file, now we will create the button click event for the above design. First, we import the below reference to our MainActivity.cs file:
using Android.Support.V4.App;
using Android.Support.V4.View;
using Java.Interop;
using Android.Views.Animations;
In the MainActivity.cs onCreate
method, we will create the button click event to display the notification message in our Mobile device. For this, we create object for the NotificationCompact
and we set the Title
and Text
for our Notification message and in the Text
, we also set the counter value to display how many times the button has been clicked from our notification.
Button btn = FindViewById<Button>(Resource.Id.myButton);
btn.Click += delegate {
var notification = new NotificationCompat.Builder(this)
.SetContentTitle("Shanu - Notifications")
.SetContentText("Clicked " + count++ + " times!")
.SetSmallIcon(Android.Resource.Drawable.DialogFrame)
.SetGroup("testGroup").Build();
var manager = NotificationManagerCompat.From(this);
manager.Notify(1, notification);
btn.Text = "Check Notification!";
The code will look like this:
Notification Output
When we run the application, we can see the output in the emulator with the Button
.
When we click on the Button
, we can see the Notification at the top with the count value display as how many times the user clicks on the button.
Playing the Song
First, we add our favorite MP3 songs to our Resource folder and for this simple demo, we have added one mp3 file to be played.
Create the Raw Folder
We need to create a folder inside our Resource folder as named as raw and we will be adding all our mp3 files to this folder. To add the mp3 file, right click on the raw folder and Add Existing Item and select your mp3 file which needs to be played. Here, we have added one mp3 file to our raw resource folder.
Next, create an object for the MediaPlayer
:
MediaPlayer mp;
For adding the MediaPlayer
, we import the reference as below to our MainActivity.cs file:
using Android.Media;
Now we will add a button and, in the button click event, we will play the music from our newly added mp3 resource file.
In our Main.axml file, design your button.
<Button
android:text="Play Song"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button1"
android:background="@android:drawable/alert_dark_frame" />
Add the button click event for Play Song button from our MainActivity.cs and add the below code to play your music.
Button btn1 = FindViewById<Button>(Resource.Id.button1);
btn1.Click += delegate
{
mp = MediaPlayer.Create(this, Resource.Raw.Kannalanae);
mp.Start();
btn1.Text = "Song is Playing Now enjoy :)";
};
Play Song Output
When we run the application, we can see the output from our emulator and we can see the newly added Play Song button in our App.
When the user clicks on the Play Song button, they can listen to the songs which they have added.
Stop the Song
For stopping the playing song, we will create a new button and, in the button, click event we will write our code to stop the playing song.
Now we will add a button and, in the button click event, we will stop the playing music.
In our Main.axml file, design your button to stop the music.
<Button
android:text="Stop Song"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button2"
android:background="@android:drawable/alert_dark_frame" />
Add the button click event for stop the playing song from our MainActivity.cs and add the below code to stop the playing music.
Button btn2 = FindViewById<Button>(Resource.Id.button2);
btn2.Click += delegate
{
if (mp != null)
if (mp.IsPlaying)
{
mp.Stop();
btn2.Text = "Song Playing Stopped :( ";
}
};
Stop Music Output
When we run the application, we can see the output from our emulator with newly added Stop Song button in our App.
When the user clicks on the Stop Song button, the playing song will be stopped.
Increase the Volume
For increase the mobile device or emulator volume, we will create a new button and, in the button, click event, we will write our code to increase the volume.
Now we will add a button and, in the button click event, we will write code to increase the volume.
In our Main.axml file, design your button to increase the volume:
<Button
android:text="Volume ++"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button3"
android:background="@android:drawable/alert_dark_frame" />
Add the button click event to increase the volume from our MainActivity.cs and add the below code to increase the volume. Here, we will be use the AudioManager
and set the volume as Android.Media.Adjust.Raise
.
AudioManager audios = (AudioManager)GetSystemService(Context.AudioService);
Button btn3 = FindViewById<Button>(Resource.Id.button3);
btn3.Click += delegate
{
audios.AdjustStreamVolume(Android.Media.Stream.Music,
Android.Media.Adjust.Raise, Android.Media.VolumeNotificationFlags.PlaySound);
};
Volume Increase Output
When we run the application, we can see the output from our emulator with newly added Volume ++ button in our App, we can see the Media volume is set to low now.
When the user clicks on the Volume ++ Button, the volume will be slowly increasing and now the Media volume has been set to its maximum sound.
Decrease the Volume
For decreasing the mobile device or emulator volume, we will create a new button and, in the button, click event we will write our code to decrease the volume.
Now we will add a button and, in the button, click event, we will write code to decrease the volume.
In our Main.axml file, design your button to increase the volume.
<Button
android:text="Volume --"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button4"
android:background="@android:drawable/alert_dark_frame" />
Add the button click event to decrease the volume from our MainActivity.cs and add the below code to decrease the volume. Here, we will be use the AudioManager
and set the volume as Android.Media.Adjust.Lower
.
Button btn4 = FindViewById<Button>(Resource.Id.button4);
btn4.Click += delegate
{
audios.AdjustStreamVolume(Android.Media.Stream.Music,
Android.Media.Adjust.Lower, Android.Media.VolumeNotificationFlags.PlaySound);
};
Volume Decrease Output
When we run the application, we can see the output from our emulator with newly added Volume --button in our App, we can see the Media volume is set to high now.
When the user clicks on the Volume -- Button the volume will be slowly decreasing and now the Media volume has been set to its low sound.
Points of Interest
Hope you enjoy reading this article. Download the source code and change as per your need and soon we will see more articles related to developing Xamarin mobile apps.
History
- 1st May, 2018: Initial version - ShanuSingleViewAPP.zip