Xamarin Simple Application

Xamarin is an open source platform for making applications with .NET for Windows, Android and iOS.


Xamarin applications can be written on PC or Mac. It is compiled in native application packages. For now, deploying or compiling apps for iOS prompts the macOS machine.


Xamarin allows you to create a native UI on each platform and write business logic in C#.


In this article, we will create an application that converts alphanumeric phone numbers.


Visual Studio 2019 Community is used.


Xamarin.Android, uses Java Development Kit(JDK) and Android SDK.


xamarin-simple-app-1.png

https://docs.microsoft.com/en-us/xamarin/android/get-started/hello-android/hello-android-quickstart?pivots=windows I implemented Microsoft's article step by step.


Step 1: Xamarin can be downloaded from the Visual Studio 2019 installer.


xamarin-simple-app-2.png

Step 2: Select the Mobile development with .NET option.


xamarin-simple-app-3.png

Step 3: For Android 9, Settings> About phone> Software information> After tapping the build number 7 times, "You are now a developer!" you need to see. You have now enabled Debugging with your phone.


Step 4: Enable USB Debugging. Settings> Developer options> USB debugging


Step 5: After connecting your phone to your computer via USB, the Visual Studio 2019 Community Start button should appear as follows. (When your phone is connected to the computer, the screen to access and allow USD debugging will appear on your phone.)


xamarin-simple-app-4.png

Step 6: Create the project.


xamarin-simple-app-5.png

Select the Android App template from the New Project window. Name the project as Phoneword.


Click the Create button.


Select the Blank App option from the screen that appears.


xamarin-simple-app-6.png

Step 7: Create the Layout.


xamarin-simple-app-7.png

activity_main.xml file is the layout file. Type LinearLayout instead of RelativeLayout. Add the LinearLayout open label android:orientation = "vertical".


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

</LinearLayout>

Drag Text from the toolbox to the design surface.


xamarin-simple-app-8.png

Type "Enter a Phone Word" into the Text property of the properties of the selected Text widget.


xamarin-simple-app-9.png

Drag Plain Text from the Toolbox.

xamarin-simple-app-10.png

Drag the Button widget as shown above. Type the "Translate" value to the Text property and the " @+id/TranslateButton " value to the id property.


Drag the TextView widget from the toolbox. Leave the Text property blank from the properties. Type @+id/TranslatedPhoneword to the id property.


Step 8 Right click on the project. Add > New Item


xamarin-simple-app-11.png

Select Visual C# > Code > Code File from the left menu. Name it as PhoneTranslator.cs.


Add the code below.


using System.Text;

using System;

namespace Core

{

    public static class PhonewordTranslator

    {

        public static string ToNumber(string raw)

        {

            if (string.IsNullOrWhiteSpace(raw))

                return "";

            else

                raw = raw.ToUpperInvariant();




            var newNumber = new StringBuilder();

            foreach (var c in raw)

            {

                if (" -0123456789".Contains(c))

                {

                    newNumber.Append(c);

                }

                else

                {

                    var result = TranslateToNumber(c);

                    if (result != null)

                        newNumber.Append(result);

                }

                //otherwise we've skipped a non-numeric char

            }

            return newNumber.ToString();

        }

        static bool Contains (this string keyString, char c)

        {

            return keyString.IndexOf(c) >= 0;

        }

        static int? TranslateToNumber(char c)

        {

            if ("ABC".Contains(c))

                return 2;

            else if ("DEF".Contains(c))

                return 3;

            else if ("GHI".Contains(c))

                return 4;

            else if ("JKL".Contains(c))

                return 5;

            else if ("MNO".Contains(c))

                return 6;

            else if ("PQRS".Contains(c))

                return 7;

            else if ("TUV".Contains(c))

                return 8;

            else if ("WXYZ".Contains(c))

                return 9;

            return null;

        }

    }

}

Step 9: Connecting the Translate button


Find the OnCreate method in the MainActivity class. Let's add the button code into OnCreate.


Add the code below.


// Get our UI controls from the loaded layout

EditText phoneNumberText = FindViewById<EditText>(Resource.Id.editText1);

TextView translatedPhoneWord = FindViewById<TextView>(Resource.Id.TranslatedPhoneword);

Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);

// Add code to translate number

translateButton.Click += (sender, e) =>

{

    // Translate user's alphanumeric phone number to numeric

    string translatedNumber = Core.PhonewordTranslator.ToNumber(phoneNumberText.Text);

    if (string.IsNullOrWhiteSpace(translatedNumber))

    {

        translatedPhoneWord.Text = string.Empty;

    }

    else

    {

        translatedPhoneWord.Text = translatedNumber;

    }

};

The final version of the OnCreate method is as follows.


protected override void OnCreate(Bundle savedInstanceState)
{

    base.OnCreate(savedInstanceState);

    Xamarin.Essentials.Platform.Init(this, savedInstanceState);

    // Set our view from the "main" layout resource

    SetContentView(Resource.Layout.activity_main);




    // Get our UI controls from the loaded layout

    EditText phoneNumberText = FindViewById<EditText>(Resource.Id.editText1);

    TextView translatedPhoneWord = FindViewById<TextView>(Resource.Id.TranslatedPhoneword);

    Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);

    // Add code to translate number

    translateButton.Click += (sender, e) =>

    {

        // Translate user's alphanumeric phone number to numeric

        string translatedNumber = Core.PhonewordTranslator.ToNumber(phoneNumberText.Text);

        if (string.IsNullOrWhiteSpace(translatedNumber))

        {

            translatedPhoneWord.Text = string.Empty;

        }

        else

        {

            translatedPhoneWord.Text = translatedNumber;

        }

    };

}

Let's set the name of our application. Let's expand the values file. Open the strings.xml file.


<resources>

    <string name="app_name">Phone Word</string>

    <string name="action_settings">Settings</string>

</resources>

Build the project. Then Start.


xamarin-simple-app-12.png