How to Make an Android App Using Visual Studio

by richardrule20 in Circuits > Mobile

31687 Views, 6 Favorites, 0 Comments

How to Make an Android App Using Visual Studio

71142026-182bb880-21e4-11ea-8d9e-4412d6798a60.png

In this Instructables we will be learning how to prepare and run example code on an Android phone using Visual Studio. I used a Samsung Galaxy S20, but this code will work on any Android device. We will be creating an app that turns your flashlight on by the press of a button. By the end of this Instructable you will become familiar with using the Visual Studio IDE. As well as some basic Android programming methods, such as creating elements, controlling hardware, and working with packages. These topics will teach you the basics of app development so that you can go on and learn more advanced programming topics.

Supplies

  • Android Phone
  • Windows Computer
  • Internet Access
  • USB cable to connect your Android phone to your computer

Download Visual Studio

Screenshot 2021-04-23 112619.png

Go to the Visual Studio page here and select the Download Visual Studio button. The download should start shortly after. Select somewhere on your computer to save the download, I recommend saving to your desktop.

Set-Up Visual Studio

Screenshot 2021-04-23 172949.png
Screenshot 2021-04-23 173027.png
Screenshot 2021-04-23 173043.png

Run the download file, it should be called vs_community__927645998.1618848418.

After running the download file, a window should pop up called "Visual Studio Installer". Select the Continue button.

A new window should appear asking you to select different workloads to download. Select the Mobile development with .NET and Mobile development with C++. After selecting these press the Install button. This process may take several minutes to download and install.

Download Visual Studio Extensions

Screenshot 2021-04-23 174410.png
Screenshot 2021-04-23 181708.png
Screenshot 2021-04-23 181741.png
Screenshot 2021-04-23 181800.png
Screenshot 2021-04-23 181829.png

After the workspaces have downloaded, Visual Studio should have started. If not, press the windows button + s and search for Visual Studio and run it.

Select the Continue without code option underneath "Create a new project". A new window should load with a tool bar spanning the top of the windows. Follow these steps to install the needed extensions:

  1. Select the Extensions tool bar at the top of the window
  2. Select the option to Manage Extensions
  3. Search for the extension called Java Tools for Android Project (Visual Studio 2019)
  4. Select the download button next to the extension
  5. Close out of the extensions window
  6. Close out of the Visual Studio window
  7. You should be prompted with a windows called VSIX Installer, select the Modify button
  8. After a few seconds a new windows should appear saying "Modifications Complete", close out of that window

Set-Up Your Android Phone

InkedScreenshot_20210423-114621_Settings_LI.jpg
InkedScreenshot_20210423-114249_Settings_LI.jpg
InkedSmartSelect_20210423-114332_Settings_LI.jpg
InkedScreenshot_20210423-114351_Settings_LI.jpg
InkedScreenshot_20210423-114422_Settings_LI.jpg
InkedScreenshot_20210423-114409_Settings_LI.jpg

These steps are DIFFERENT depending on the phone you are using. Here is a link to the different ways to do so on different Android Versions.

These are the instructions I followed for my Samsung Galaxy S20.

First, you need to enable Developer Options on your phone.

  1. Go into the Settings menu
  2. Select the button called "About phone"
  3. Select the button called "Software information"
  4. Select the button called "Build Number" 7 times in a row

Now that Developer Options are enabled we need to enable USB debugging on your device.

  1. In the Settings menu select the new option "Developer Options"
  2. Enable the option called "USB debugging"
  3. A prompt should appear called "Allow USB debugging?", select OK

Now we need to connect our phone to the computer using a USB cable. If your computer doesn't already have the Android USB Driver for Windows installed, you can install it here.

Create a Test Project

Screenshot 2021-04-23 184236.png
Screenshot 2021-04-23 183730.png
Screenshot 2021-04-23 183807.png
Screenshot 2021-04-23 183833.png

Reopen Visual Studio by pressing the windows button + s and searching for Visual Studio and run it.

Select the option called Create a new project under "Get started". It will ask you for what kind of application you would like to create.

  1. Under the All platforms tab select Android
  2. Under the All project types tab select Mobile
  3. Select the Android App (Xamarin) option and press the next button.
  4. You should be sent to a page wanting you to enter a project name, name it TestAndroidApplication.
  5. Select the check box next to Place solution and project in the same directory.
  6. Press create when done.

Now you should be prompted with what kind of template you want to use, in this example I used Single View App and selected the Android Version 9.0(Pie). The version may differ depending on what Android version you are using. Press OK when done.

Run the Test Application

Screenshot 2021-04-23 185008.png
Screenshot 2021-04-23 185008.png
Screenshot 2021-04-23 185848.png
Screenshot_20210423-185231_TestAndroidApplication.jpg

Now you should be sent to a new window with lots of code on it. Ignore the daunting looking code, all we want to do is run the code. Press the green arrow button at the top of the screen to run the code. It should have the name of the android device you are using next to it. If you don't see this. Unplug your android device from your computer and plug it back in. Once you pressed the green arrow to run the app. Wait a few seconds for it to compile. You should see a simple app running on your phone that says "Hello world".

Create a Blank App Project

Screenshot 2021-04-23 174410.png
Screenshot 2021-04-25 194229.png
Screenshot 2021-04-25 194250.png
Screenshot 2021-04-25 194331.png

First you will need to close out of Visual Studio, then reopen it so you are sent back to the home menu. Now select the option called Create a new project under "Get started". It will ask you for what kind of application you would like to create. Under the All platforms tab select Android, and under the All project types tab select Mobile. Select the Basic Application (Android, Ant) option and press the next button. You should be sent to a page instructing you to enter a project name, name it FlashlightApp. Also make sure that Place solution and project in the same directory is selected. Press the create button when done.

Import the Needed Packages

Screenshot 2021-04-25 195513.png

Now the file called FlashlightApp.java should show up on the main window. If not, you can find it in the Solution Explorer at FlashlightApp->src->com->FlashlightApp->FlashlightApp.java.

Now we need to import the write packages to get the code we use later on to work. Add the code below:

ADD THIS CODE

import android.view.View;
import android.widget.Button;
import android.graphics.Color;
import android.hardware.camera2.CameraAccessException;
import android.hardware.camera2.CameraManager;<br>

UNDERNEATH THIS CODE

import android.os.Bundle;

Creating a Button

Screenshot 2021-04-25 200442.png

Now we need to delete some of the default code that's was created with the project with code that will create a button.

DELETE THIS CODE

/* Create a TextView and set its text to "Hello world" */
TextView  tv = new TextView(this);
tv.setText("Hello World!");
setContentView(tv);<br>

ADD THIS CODE

// This portion of code creates the button and sets its properties
Button button = new Button(this); // Creates a button
button.setBackgroundColor(Color.BLACK); // Sets background color
button.setTextColor(Color.GRAY); // Sets text color
button.setText("Flashlight"); // Sets text to "Flashlight"
setContentView(button); // Sets button size to 

Add Button Logic

Screenshot 2021-04-25 200921.png

Now we need to create the method for what the button should do when pressed. Add this code below the code we entered for creating the button.

ADD THIS CODE UNDER THE BUTTON CODE

        // This portion of code if the logic of the button press 
        button.setOnClickListener(new View.OnClickListener() // Checks for when any button is clicked
        {
            int i = 2;// Used for button logic
            public void onClick(View button) // Checks for when the button called "button" is clicked
            {
                if(i%2 == 0) // When button is pressed
                {
                    button.setBackgroundColor(Color.BLACK); // Sets background color to black
                    i++;
                    // This portion of code is for setting the camera on
                    try 
                    {
                        cameraManager.setTorchMode(getCameraID, false); // Sets flashlight off
                    } 
                    catch (CameraAccessException e) 
                    {
                        e.printStackTrace();
                    }
                }
                else // When button is pressed again
                {
                    button.setBackgroundColor(Color.WHITE); // Sets background color to white
                    i++;
                    // This portion of code is for seting the camera on
                    try 
                    {
                        cameraManager.setTorchMode(getCameraID, true); // Sets flashlight on 
                    } 
                    catch (CameraAccessException e) 
                    {
                        e.printStackTrace();
                    }
                }
            }
        });<br>

Add a Flashlight Controller

Screenshot 2021-04-25 201215.png

Now we need to add the code to get the flashlight to work.

ADD THIS CODE UNDER THE CLASS

private CameraManager cameraManager;
private String getCameraID;<br>

ADD THIS CODE UNDER THE BUTTON CODE

// This portion of code initializes the flashlight on your device and then gets the ID
cameraManager = (CameraManager) getSystemService(Android1.CAMERA_SERVICE);
try 
{
	getCameraID = cameraManager.getCameraIdList()[0];
} 
catch (CameraAccessException e) 
{
	e.printStackTrace();
}<br>

Compile and Run the Code

Screenshot 2021-04-25 204845.png

Press the green arrow button at the top of the screen to run the code. It should have the name of the android device you are using next to it. If you don't see this. Unplug your android device from your computer and plug it back in. Once you pressed the green arrow to run the app. Wait a few seconds for it to compile. You should see an app called FlashlightApp running on your phone.

Test Out the App

Screenshot_20210425-205012_FlashlightApp.jpg
Screenshot_20210425-205004_FlashlightApp.jpg

Press the button called Flashlight. Then color of the button should change to white, and the flashlight on your phone should turn on. Pressing the button again should change the button color back to black and the flashlight off.

Congratulations, you just created your first Android app!