Discovering Xamarin: a magic ball Android app
Let’s learn basic Xamarin development by creating a magic ball app (sources: https://github.com/antigones/xamarin-magic-ball)
Xamarin is a platform that allows developers to use a unique business logic code to develop multiplatform applications (Android, iOS and Windows) with .NET.
Developing a magic ball application is quite simple, since there is no much graphics nor logic to think about so it’s a perfect exercise to begin using this tool.
The general idea
The general idea is to develop an application doing some fortune-telling when user presses a button.
The interface will simply be featuring an image of a magic crystal ball and a button.
Developing the app
In order to develop Xamarin mobile apps, you have to download and install the Xamarin workload using Visual Studio Installer:
Then you can create a new MobileApp project:
Define a project name (“MagicBall” will be fine) and proceed to create the project.
Start with a blank template:
You will see the standard Xamarin example project.
If you have some emulator installed, you can also launch it and test it pressing the “run” button on the top of Visual Studio interface:
The emulator will pop-up and the app will be running:
Looking at the sources, it’s easy to understand that the main interface definition resides in “MainPage.xaml”:
If you have previously performed some web development or mobile development, it’s easy to understand the structure of the interface: you have a StackLayout, organizing contents over a column, a Frame defining the top application bar and a serie of labels.
You can start from this example to customize the interface: you will be customizing the top bar label with a “Magic Ball” text, adding a magic ball image and adding a button to press to receive a fortune-telling response.
At this stage, you will be noticing Visual Studio complaining about the missing “OnButtonClicked” method, which you did not implement yet.
You will put this method in the “MainPage.xaml.cs” file, containing the logic for the corresponding page in the app.
If you are still running the app in the emulator, be sure to stop it since some operations are not available in Visual Studio while the app is running.
Now, what you expect to do in OnButtonClicked is to make available some “fortune-telling” string to the user. To do so, you will implement a custom class.
Create the new class by adding a new file to the project:
And call it “Prediction”:
You will see a “Prediction.cs” added to your project.
Prediction.cs content is really simple: you just define a list of responses and a function to randomly select one.
Since you have an object capable of selecting a string, you can use it in “MainPage.xaml.cs” to retrieve a prediction and update a label in the interface.
Including an image
You still have to include the image in the project, since it has been defined in the XAML file for the main application interface:
<Image Source="ball.png" Aspect="AspectFit" WidthRequest="200" Margin="20,20,20,20" />For this example app, you can use an image from Icons8.com: after downloading it, just rename it to ball.png or adapt the filename to your.
To import the image in the project, be sure to stop the application in the emulator and add an existing item into the Resources/drawable folder of the android section in the project:
Remember to select the file type in the file picker to see the images!
If it is not, set the resource as “Android Resource” in its properties:
Launch the application and here’s the result!
