Coin flip – The first own Android app – Tutorial
The author reserves the right to make changes in this tutorial. Contents
* Introduction – What is Xamarin?
* Creation of the project in Xamarin
* Implementation of the design
* Implementation of the code
* Run the app
* Summary For people who want to get into the programming of Android mobile applications, it is important to know which development environment to use. Probably the best known provider here is Eclipse. There is programming with Java. But there are also alternatives, such as Xamarin for C # programmers or DelphiXE5 for Delphi programmers. For a software developer, of course, it’s an advantage to program with the language in which you have the most practice. As a C # enthusiast, I’ve been more and more involved with Xamarin lately and would like to take the opportunity to give a small, compact entry into app programming with Xamarin. The result is an app on your own device, but I do not limit myself here to the most consistent form “Hello World” for the first app, but I would like to introduce a “more meaningful” application, namely “head-or-number”. From the beginning it should be said that good knowledge about C # and Android are recommended, but not required! Complete beginners can also understand this tutorial understandable!
Introduction – What is Xamarin Xamarin is a San Francisco-based software company founded in May 2011. With the same development environment, the company offers C # developers to program native Android apps. Since November 2013 there is a cooperation with Microsoft and its environment Visual Studio in this area. To date, about 500,000 developers worldwide use this system for programming apps.
* will not report on the basics of Android programming, but assume these for my tutorial. For complete beginners, I recommend the following links:
* Basics Android programming
* Installation and help for Xamarin As a developer you should of course make sure that the Android SDK is not outdated and you also updated the latest Android levels.
Creating the project in Xamarin
When you have successfully downloaded Xamarin and fulfilled all other important requirements for programming Android apps, nothing stands in the way of creating your first app with Xamarin. Let’s start by creating our project. To do this, just go to the top as usual under File -> New -> Solution. To select the Android application with C #, go to the templates on C # -> Android -> Android Application. Now you enter a suitable name; i have e.g. KCoin chosen for the name of my app; and you can create his solution. The name of the solution will initially appear as the name of the app, but the display name can be changed later in the settings.
If your solution is created, the following should be presented (do not complain, my project is called Coin, the app later will be called KCoin):
On the right are then still helpful options, such. the toolbox. I will not explain this in this short tutorial, but only mention it if it is useful.
You can see a classic development environment here. First, the core of each app is opened, the MainActivity.cs, for C # with the extension .cs. This is where the entire code for the app will later be written in this tutorial. As a ready-made code is a template for an app that receives a button. After the click, the title of the button is changed according to the number of clicks made so far (see variable count). All well and good, but that’s not the app we still want to design, namely “head-or-number”. So the code has to be rewritten by us.
But the designer of course still lacks a graphical interface, where I can put my components together sensibly. Unfortunately, this does not open automatically, but you can find it in the left solution folder under the following path:
Ressources -> layout -> Main.xaml (double click). Already opens the following window for you (If this should not be the case and an error occurs, there is help on the Web, because this problem is very well known, just googling error message):
Immediately you have your interface, left in the toolbox the usual selection of components, the document design to the overview of all components contained in the project and under Properties then the properties of the selected component. In the bar, which begins with “alternative layouts”, you also have the opportunity to change the dimensions of your app. The good thing about Xamarin, however (unlike DelphiXE5), is that the app instantly adapts to the device in which the app will run, using the Linear Layout component. So if you want to avoid an annoying adjustment before each transfer on a new device, this component must remain. Really practical.
From experience, I would like to advise you to change the following things in the options (Project -> bottom):
* Under Android Application -> Minimum Android version of automatically at API level 8 (as an example, just as small as possible, but not the smallest) and Target Android version of automatically at API level 19 (best always the highest and thus most recent) ,
* Under Android Build -> Not Use Share Mono runtime. In my entry into Xamarin, there were more errors while running on a device and the online help advised me to change these settings. If someone wants to know the exact reasons for this, they are welcome to contact me. However, the execution should work flawlessly.
Implementation of the designIn principle, of course, in the implementation of the design and the code, it is entirely up to you how you want to design your app or what it should be able to do. Below is a small suggestion on my part and the way there:
I use the following components in this app and I have integrated them or changed these properties (you just have to add the TextView, this is in the toolbox):
* Header: The title of the app and the icon are displayed automatically. You can change the title and the icon in the settings (path above) under Android Application. How to add your own icon, I explained in a previous article (below).
* Button: Here I left everything the same. Of course you can still change the title of the button independently (Properties -> Widget -> Text). I’ve made a change to the text in the code, more on that later.
* Textview: That is not to be seen? Should he not (at first) not! The textview will later serve in the app as an output of head or figure. I simply dragged the Textview component over the entire screen below the button and changed the following settings:
* Widget -> Text: [empty!]
* Widget -> Gravity: center, so the output is nicely centered
* Style -> Text Appearance -> Text size: 100dp
* Style -> Color -> TextColor: black (is selectable in a swatch) These settings are sufficient for the output to work perfectly. Again, I will make specific changes in the code.
* The background: So that the ugly black disappears, you can also give the LinearLayout a background (Style -> Background -> select image). The image must be previously integrated into the project directory, so it must still be added to drawable (common location) like the icon. The image is ideally adapted. Implementation of the code The last step before the app starts is to implement the code for C # in MainActivity.cs. Since simulation of a coin toss (random experiment) is not the greatest challenge for programmers, the app can of course be extended, for example. an evaluation, how often number and how many times head appeared etc. I offer a suggestion for the code for the random display of head or number as follows:
The principle here is pretty simple. First and foremost, the button and the TextView must be created, but there is for the MainAcitivity.cs the uniform code, which can be seen here. The button title is still being changed, this is just an example of the fact that properties can also be changed in the code itself.
C # experienced people should be familiar with the random machine Random, if any questions arise, I recommend the following link: Click!
The actual execution happens, of course, if the user clicks the button, thus the further code is integrated in the click method of the button (delegate […]). As a result, a random number (number) is generated which is either even or odd (from 1 to 10). If this is even, “Number” is displayed in the text field, in the other case just “Head”. In order to see a change in the text in the text field when clicking again, a counter is also introduced, which remembers the number of clicks and changes the color to white or black each time a new click is made. Thus, we have also incorporated the template with the counter well. You should think relatively easy. Of course, anyone can change the code at their own discretion.
Running the app After the design and code are done, the app has to be on the device. Of course you can also use an emulator to test the app here. What I have already noted above is that the app immediately adapts to the device regardless of the preferences. Even portrait and landscape formats are perfectly cropped, thanks to the linear layout.
For newcomers to “app-transfer-on-a-device” I give an overview of the execution on a “device” (an Android device):
Make sure USB debugging is selected on your device (Settings -> Developer Options -> USB Debugging). Then the device must be connected via USB to your computer (the driver for the device must of course already be available). Under Run -> Run with your device should now be selectable. Android developers in other environments should know that. The first time you create an app and debug it on a device, the device may not appear immediately. Here it is to wait. If there is no change after ages, Google, me or the good, old restart.
After clicking on your own device under Run the app will be installed on your device (this can take up to a few minutes, an emulator sometimes takes much longer!). If everything runs smoothly, the app is now on your device, and should even open independently, but it is also immediately in the menu under the specific icon. For error messages, enter this best on the Web or contact me at my below e-mail. If everything works, the app should work like this when you click (Animation | Expiration in the Sony Xperia S):
SummaryThe result is what we wanted: A simple app for randomly determining head or number (if no coin is currently available). These basics are intended to help beginners to develop their own apps and expand them easily and clearly, depending on the programming skills. Now everyone is asked to explore Xamarin and explore the many opportunities developers offer. It turns out that Xamarin is a good alternative to Eclipse, and it’s auto-fit that cuts a fine figure, unlike other environments like DelphiXE, where you also spend a lot of money. It’s worth giving Xamarin a chance. I think that in the future I will be offering similar tutorials at a higher level on this blog when the need is there.