How to create a Xamarin / TypeScript project for SmartPhone Project with Visual Studio 2017

 

Regarding the second important part in this type of project: graphic resources.
They are broken down into 3 subdirectories found in Resources: drawable, layout and values.

Drawable: will contain the graphic resources types images: png, jpg or ico as well as XML graphic resource files
to customize components of the HMI.

This is a sample of XML customization of graphical component, here a button template :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true" >
    <shape>
      <solid
          android:color="#85530F" />
      <stroke
          android:width="1dp"
          android:color="#85530F" />
      <corners
          android:radius="6dp" />
      <padding
          android:left="3dp"
          android:top="3dp"
          android:right="3dp"
          android:bottom="3dp" />
    </shape>
  </item>
  <item>
    <shape>
      <gradient
          android:startColor="#85530F"
          android:endColor="#85530F"
          android:angle="270" />
      <stroke
          android:width="1dp"
          android:color="#5A3A22" />
      <corners
          android:radius="25dp" />
      <padding
          android:left="2dp"
          android:top="2dp"
          android:right="2dp"
          android:bottom="2dp" />
    </shape>
  </item>
</selector>

 

On the Values folder, you are the text resource of your application like this :
Contains on the Strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="Hello">Hello World, Click Me!</string>
    <string name="ApplicationName">Genuis News Speech</string>
</resources>

 

Now let's focus on the Main.axml graphic interface page.
For the axml extension instead of xaml, the Xaml language is well used in this graphic file
but this axml extension is recognized by Android systems.

This file is content on the Layout folder of your project.
It's required to use the namespace http://schemas.android.com/apk/res/android.
This namespace defined the XML langage structure of your graphical file. 
 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:theme="@android:style/Theme.Black.NoTitleBar"
    android:background="@drawable/wallpaper"
    android:layout_width="match_parent"
    android:id="@+id/stackView1"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/img"
        android:src="@drawable/speech"
        android:layout_gravity="center_vertical|center_horizontal"
        android:layout_width="50dp"
        android:layout_height="50dp" />
    <EditText
        android:id="@+id/txtitle"
        android:editable="false"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="14dp"
        android:foreground="@android:color/holo_purple"
        android:textColor="@android:color/holo_purple"
        android:textStyle="bold"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:backgroundTint="#fff0ffff"
        android:background="@android:color/holo_green_light" />
    <Spinner
        android:id="@+id/comboboxlang"
        android:layout_width="match_parent"
        android:prompt="@string/planet_prompt"
        android:background="@android:color/black"
        android:foreground="@android:color/white"
        android:layout_height="50dp" />
    <WebView
        android:id="@+id/imagecenter"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:layout_marginTop="5dp"
        android:paddingStart="5dp"
        android:paddingEnd="5dp"
        android:paddingTop="5dp"
        android:background="@android:color/holo_green_light"
        android:foreground="@android:color/holo_purple"
        android:textColor="@android:color/holo_purple"
        android:paddingBottom="5dp"
        android:paddingRight="4dp"
        android:paddingLeft="5dp" />
    <Button
        android:id="@+id/buttonlisten"
        android:textSize="18dp"
        android:textStyle="bold"
        android:background="@drawable/micro"
        android:onClick="buttonlistenclick"
        android:layout_gravity="center_vertical|center_horizontal"
        android:layout_height="70dp"
        android:layout_width="70dp" />
    <Button
        android:id="@+id/buttonstop"
        android:textSize="14dp"
        android:textStyle="bold"
        android:text="Stop"
        android:background="@drawable/bluebutton"
        android:onClick="buttonstopclick"
        android:layout_gravity="center_vertical|center_horizontal"
        android:layout_height="70dp"
        android:layout_width="70dp" />
</LinearLayout>

The most important property for any component are
android:id with an index increment for the component identifier and many other
parameters like textSize, textStyle,text, background.
You need to respect the naming specific to Java langage : all keyword are called
on the android namespace and the property name begin on lowercase and highercase
between the word.
Java language and XAML coexists in our development.

 

In this sample source code, you'll see how to handle interactions between Android graphics
and C # source code.

On a Button component, you have the android method: onclick, you assign it the
textlistlistenclick property.

 <Button
                    android: id = "@ + id / buttonplay"
                    android: textSize = "14dp"
                    android: TextStyle = "bold"
                    android: background = "@ drawable / play"
                    android: onclick = "buttonlistenclick"
                    android: foreground = "@ android: color / white"
                    android: layout_gravity = "center_vertical | center_horizontal"
                    android: layout_height = "80dp"
                    android: layout_width = "80dp"
                    android: layout_marginTop = "5DP"
                    android: layout_marginBottom = "5DP"
                    android: paddingStart = "5DP"
                    android: paddingEnd = "5DP"
                    android: paddingTop = "5DP"
                    android: textColor = "@ android: color / background_light"
                    android: layout_marginRight = "5DP"
                    android: layout_marginStart = "5DP"
                    android: layout_marginEnd = "5DP"
                    android: layout_marginLeft = "5dp" />

 

In the MainActivity.cs file, you need to attach the declare event buttonlistenclick
on a delegate method like this :

        [Export("buttonstopclick")]
        public void buttonStopClick(View v)
        {
            if (mediaPlayer == null)
                return;
            if (mediaPlayer.IsPlaying)
                mediaPlayer.Stop();
        }
The most important in this sample is the Tag attribute Export, it's permit to bind
the action method buttonStopClick(View v) to the Android componant Button.

To call an instance of a graphical component, you need to use the method FindViewById<T>(resourceId)
with a generic type.

SeekBar _seekBar = FindViewById<SeekBar>(Resource.Id.seekBar1);

or

Button _buttonPlay = FindViewById<Button>(Resource.Id.buttonPlay);

 

Of more you are the possibility to implemented many graphical behaviour
with :MediaPlayer.IOnPreparedListener, ISurfaceHolderCallback, SeekBar.IOnSeekBarChangeListener.

MediaPlayer.IOnPreparedListener : use for a MediaPlayer component interactions with the method OnPrepared(MediaPlayer player).

ISurfaceHolderCallback : use to manage the tactile interactions.

 Definition of the Interface to interact with the tactile screen :

    [Register("android/view/SurfaceHolder$Callback", "", "Android.Views.ISurfaceHolderCallbackInvoker", ApiSince = 1)]
    public interface ISurfaceHolderCallback : IJavaObject, IDisposable
    {
        
        [Register("surfaceChanged", "(Landroid/view/SurfaceHolder;III)V", "GetSurfaceChanged_Landroid_view_SurfaceHolder_IIIHandler:Android.Views.ISurfaceHolderCallbackInvoker, Mono.Android, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null")]
        void SurfaceChanged(ISurfaceHolder holder, [GeneratedEnum] Format format, int width, int height);
        [Register("surfaceCreated", "(Landroid/view/SurfaceHolder;)V", "GetSurfaceCreated_Landroid_view_SurfaceHolder_Handler:Android.Views.ISurfaceHolderCallbackInvoker, Mono.Android, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null")]
        void SurfaceCreated(ISurfaceHolder holder);
       
        [Register("surfaceDestroyed", "(Landroid/view/SurfaceHolder;)V", "GetSurfaceDestroyed_Landroid_view_SurfaceHolder_Handler:Android.Views.ISurfaceHolderCallbackInvoker, Mono.Android, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null")]
        void SurfaceDestroyed(ISurfaceHolder holder);
    }
SeekBar.IOnSeekBarChangeListener : to manage the interactions between the user and a seekbar component.

          public interface IOnSeekBarChangeListener : IJavaObject, IDisposable
        {
            [Register("onProgressChanged", "(Landroid/widget/SeekBar;IZ)V", "GetOnProgressChanged_Landroid_widget_SeekBar_IZHandler:Android.Widget.SeekBar/IOnSeekBarChangeListenerInvoker, Mono.Android, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null")]
            void OnProgressChanged(SeekBar seekBar, int progress, bool fromUser);
            [Register("onStartTrackingTouch", "(Landroid/widget/SeekBar;)V", "GetOnStartTrackingTouch_Landroid_widget_SeekBar_Handler:Android.Widget.SeekBar/IOnSeekBarChangeListenerInvoker, Mono.Android, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null")]
            void OnStartTrackingTouch(SeekBar seekBar);
            [Register("onStopTrackingTouch", "(Landroid/widget/SeekBar;)V", "GetOnStopTrackingTouch_Landroid_widget_SeekBar_Handler:Android.Widget.SeekBar/IOnSeekBarChangeListenerInvoker, Mono.Android, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null")]
            void OnStopTrackingTouch(SeekBar seekBar);
        }

 

 

Configuring and Deployment :

Regarding the mobile deployment platform, we will try to deploy our solution
on a Samung Galaxy S7 running with the Android 7.0 Nougat operating system.

You must have a file in your solution called package.config which
the structure and the content should look like this:

<? xml version = "1.0" encoding = "utf-8"?>
<Package>
  <package id = "Xamarin.Android.Support.Annotations" version = "25.4.0.2" targetFramework = "monoandroid70" />
  <package id = "Xamarin.Android.Support.Compat" version = "25.4.0.2" targetFramework = "monoandroid70" />
  <package id = "Xamarin.Android.Support.Core.UI" version = "25.4.0.2" targetFramework = "monoandroid70" />
  <package id = "Xamarin.Android.Support.Core.Utils" version = "25.4.0.2" targetFramework = "monoandroid70" />
  <package id = "Xamarin.Android.Support.Fragment" version = "25.4.0.2" targetFramework = "monoandroid70" />
  <package id = "Xamarin.Android.Support.Media.Compat" version = "25.4.0.2" targetFramework = "monoandroid70" />
  <package id = "Xamarin.Android.Support.v4" version = "25.4.0.2" targetFramework = "monoandroid70" />
  <package id = "Xamarin.Build.Download" version = "0.4.7" targetFramework = "monoandroid70" />
  <package id = "Xamarin.Google.iOS.MobileAds" version = "7.19.0" targetFramework = "monoandroid70" />
  <package id = "Xamarin.GooglePlayServices.Ads" version = "42.1021.1" targetFramework = "monoandroid70" />
  <package id = "Xamarin.GooglePlayServices.Ads.Lite" version = "42.1021.1" targetFramework = "monoandroid70" />
  <package id = "Xamarin.GooglePlayServices.Base" version = "42.1021.1" targetFramework = "monoandroid70" />
  <package id = "Xamarin.GooglePlayServices.Basement" version = "42.1021.1" targetFramework = "monoandroid70" />
  <package id = "Xamarin.GooglePlayServices.Clearcut" version = "42.1021.1" targetFramework = "monoandroid70" />
  <package id = "Xamarin.GooglePlayServices.Gass" version = "42.1021.1" targetFramework = "monoandroid70" />
  <package id = "Xamarin.GooglePlayServices.Tasks" version = "42.1021.1" targetFramework = "monoandroid70" />
</ Packages>

 

Use the Android SDK Manager to install all required packages for your deployment :

 

For exemple, for a deployment in a Samsung Galaxy S7 with Android Nougat 7.0 need to use the API Level 24 but for a most recent version of Android Operating system, probably need to use the API Level 27 for Android 8.0.