Beginnings Of Xamarin Android For Developers Of Android Studio

This tutorial will allow traditional developers that use Android Studio, to start the development of applications in Xamarin Android with Visual Studio.

Introduction

 
One of the main advantages in mobile development is the use of technologies that allow us to create native applications to use most of the technical capabilities of the operating system. For this, Android Studio offers a great tool for the construction of Android UI, such as Constraint Layout. On the other way, Microsoft has one of the most popular and modern programming languages currently, C #, and with the fantastic tool of Xamarin Android, so we can build native applications that use Android UI in Android Studio, coding in C # with Visual Studio.

The example shows as to build a simple UI in Android Studio and coding in C # using Visual Studio. The application that downloads an image from the Internet, and displays it on the Android screen.

Requirements

  • Android Studio 3 with Android SDK 6 or higher.
  • Visual Studio 2017 with Xamarin.

Code

https://github.com/enriqueaguilarvargas/xamarinandroidconstraints

Step 1 - Create the App in Android Studio

Open Android Studio and Start a new Android Studio Project,

Beginnings Of Xamarin Android For Developers Of Android Studio 

Put the name and the path project,

Beginnings Of Xamarin Android For Developers Of Android Studio 

Select SDK installed

Beginnings Of Xamarin Android For Developers Of Android Studio 

Select Empty Activity and next

Beginnings Of Xamarin Android For Developers Of Android Studio 

Click in finish button

Beginnings Of Xamarin Android For Developers Of Android Studio 

You will see a text "Hello World" appears centered and with a screen on the right side with the UI Constraints.

Beginnings Of Xamarin Android For Developers Of Android Studio 

Move the text to the top and in the attributes panel (right) and change the text “Hello World” to "Xamarin Android". Additional can increase the size of the font.

Beginnings Of Xamarin Android For Developers Of Android Studio 

In the palette panel (left) select the component "ImageView" and put it on the screen, appearing a window, and select "color” and “black", and click in “Ok”.

Beginnings Of Xamarin Android For Developers Of Android Studio 

In the attributes panel, add the ID as "imageView".

Beginnings Of Xamarin Android For Developers Of Android Studio 

Now add a button, below the image and put the ID "btndownload".

Beginnings Of Xamarin Android For Developers Of Android Studio 

Select the title, you will see points around with the constraints by default.

Beginnings Of Xamarin Android For Developers Of Android Studio 

In the image, select the point that is in the upper central and drag it to the text of the upper (title) until the connection symbol appears. Now select the center points of the sides and drag them to the limits of the interface, both on the right and left sides. Finally, take the center point of the bottom and drag it to the bottom of the screen. Remaining as follows,

Beginnings Of Xamarin Android For Developers Of Android Studio 

Do the same process with the button.

Beginnings Of Xamarin Android For Developers Of Android Studio 

Once finished, save and go to the "text" area of the screen, to go to the xml coding of the interface. There we copy all the code to the clipboard. This code will copy in Visual Studio later.

Beginnings Of Xamarin Android For Developers Of Android Studio 

Now, select from the "Tools - AVD Manager" menu, and select the emulator that you will use. (You can also use your physical device, just check the resolution, is the same one you are using in the design).

Beginnings Of Xamarin Android For Developers Of Android Studio 

Click on play, your Android simulator will appear.

Beginnings Of Xamarin Android For Developers Of Android Studio
 

Step 2 - Create the App in Visual Studio

Open Visual Studio and Start a new Xamarin Android Project

Beginnings Of Xamarin Android For Developers Of Android Studio 

Put the project name and path

Beginnings Of Xamarin Android For Developers Of Android Studio 

Select Empty App and click in “OK”

Beginnings Of Xamarin Android For Developers Of Android Studio 

The following screen will appear,

Beginnings Of Xamarin Android For Developers Of Android Studio 

In the name of the project, in the solution explorer, click with the right mouse button and select "Manage Nuget Packages". There you write “Xamarin Android Constraint Layout” and browse, and click on the install button.

Beginnings Of Xamarin Android For Developers Of Android Studio 

Accept the license,

Beginnings Of Xamarin Android For Developers Of Android Studio 

Wait a moment for the packages to be downloaded, usually in about 5 seconds or less.

Beginnings Of Xamarin Android For Developers Of Android Studio 

In the solution explorer, click in the folder "Resources" and "Layout", there is our file "activity_main.axml",

Beginnings Of Xamarin Android For Developers Of Android Studio 

Put the Android Studio xml code in this area (copy and paste), save and compile the solution.

Beginnings Of Xamarin Android For Developers Of Android Studio 

Now, click on the Run, verifying that our emulator appears at the top, being recognized by Visual Studio. Be patient the first time,

Beginnings Of Xamarin Android For Developers Of Android Studio 

With the UI Android works correctly, so now we start the coding.

  1. using Android.App;  
  2. using Android.OS;  
  3. using Android.Support.V7.App;  
  4. using Android.Widget;  
  5. using System;  
  6. using System.IO;  
  7. using System.Net;  
  8. using System.Threading.Tasks;  

Now, declare two variables below the public class called “BtdDownload” and “Image”:

  1. amespace AndroidApp  
  2. {  
  3.     [Activity(Label = "Xamarin Android App", Theme = "@style/AppTheme", MainLauncher = true)]  
  4.     public class MainActivity : AppCompatActivity  
  5.     {  
  6.         Button BtnDownload;  
  7.         ImageView Image;  
  8.         protected override void OnCreate(Bundle savedInstanceState)  
  9.         {  
  10.             base.OnCreate(savedInstanceState);  
  11.               
  12.             // Set our view from the "main" layout resource  
  13.             SetContentView(Resource.Layout.activity_main);  

Create the "DownloadImage" method that will allow asynchronously to download an image in an array of bytes "imageData", then will generate the path "documentspath" and the name of the file "localfilename" where it will be saved in our device, then will join the name and the path in "localpath", that allows us to create the file with the command "File.WriteAllBytes", it will combine the name and the route with the byte array, which will allow the storage in Android of the image that was downloaded.

  1. public async Task<string> DownloadImage()  
  2.      {  
  3.          var client = new WebClient();  
  4.          byte[] imageData = await client.DownloadDataTaskAsync  
  5.              ("https://pbs.twimg.com/media/DZt_rBAVAAAtNWe.jpg");  
  6.          var documentspath = System.Environment.GetFolderPath  
  7.              (System.Environment.SpecialFolder.Personal);  
  8.          var localfilename = "mydog.jpg";  
  9.          var localpath = Path.Combine(documentspath, localfilename);  
  10.          File.WriteAllBytes(localpath, imageData);  
  11.          return localpath;  
  12.      }  
  13.  }  

Now generate a method to put the image in the ImageView of the interface. First, receive the route of the image saved in Android, later generate an image route and place it in "Image":

  1. async void PutImage(object sender, EventArgs e)  
  2.  {  
  3.      var path = await DownloadImage();  
  4.      Android.Net.Uri ImagePath = Android.Net.Uri.Parse  
  5.          (path);  
  6.      Image.SetImageURI(ImagePath);  
  7.  }  

Finally, code the call to the “PutImage” method from the button:

  1. BtnDownload.Click += PutImage;  

And Done, the code should be as follows,

  1. sing Android.App;  
  2. using Android.OS;  
  3. using Android.Support.V7.App;  
  4. using Android.Widget;  
  5. using System;  
  6. using System.IO;  
  7. using System.Net;  
  8. using System.Threading.Tasks;  
  9. namespace AndroidApp  
  10. {  
  11.     [Activity(Label = "Xamarin Android App", Theme = "@style/AppTheme", MainLauncher = true)]  
  12.     public class MainActivity : AppCompatActivity  
  13.     {  
  14.         Button BtnDownload;  
  15.         ImageView Image;  
  16.         protected override void OnCreate(Bundle savedInstanceState)  
  17.         {  
  18.             base.OnCreate(savedInstanceState);  
  19.               
  20.             // Set our view from the "main" layout resource  
  21.             SetContentView(Resource.Layout.activity_main);  
  22.             BtnDownload = FindViewById<Button>(Resource.Id.btndownload);  
  23.             Image = FindViewById<ImageView>(Resource.Id.image);  
  24.             BtnDownload.Click += PutImage;  
  25.         }  
  26.         async void PutImage(object sender, EventArgs e)  
  27.         {  
  28.             var path = await DownloadImage();  
  29.             Android.Net.Uri ImagePath = Android.Net.Uri.Parse  
  30.                 (path);  
  31.             Image.SetImageURI(ImagePath);  
  32.         }  
  33.         public async Task<string> DownloadImage()  
  34.         {  
  35.             var client = new WebClient();  
  36.             byte[] imageData = await client.DownloadDataTaskAsync  
  37.                 ("https://pbs.twimg.com/media/DZt_rBAVAAAtNWe.jpg");  
  38.             var documentspath = System.Environment.GetFolderPath  
  39.                 (System.Environment.SpecialFolder.Personal);  
  40.             var localfilename = "mydog.jpg";  
  41.             var localpath = Path.Combine(documentspath, localfilename);  
  42.             File.WriteAllBytes(localpath, imageData);  
  43.             return localpath;  
  44.         }  
  45.     }  

Finally, test our Android App,

Beginnings Of Xamarin Android For Developers Of Android Studio 

Summary

This tutorial showed how to build a graphical interface in Android Studio and encode the download of an image in Android from Visual Studio.