Set up your development environment and build your first mobile application for Android and iOS.
None.
10 minutes + download/installation time
A mobile app for Android and iOS that displays a "Hello World" message.
Download and install Visual Studio 2022.
During installation, select the Mobile development with .NET workload (the installation link above already pre-selects that option).
If you already have Visual Studio 2022, you can add the Mobile development with .NET workload:
This tutorial is optimized for the latest version of Visual Studio. If you already have Visual Studio 2022, you can check for updates:
Download and install Visual Studio 2019 for Mac.
Download Visual Studio 2019 for Mac
During installation, ensure the Android + Xamarin.Forms and iOS + Xamarin.Forms platforms are selected.
This tutorial is optimized for the latest version of Visual Studio. If you already have Visual Studio 2019, you can check for updates:
If you want to build Xamarin apps for iOS or macOS, you'll also need:
If your Mac isn't compatible with the latest version, it may be possible to use an older version of Xcode.
An Apple ID
If you don't already have an Apple ID, you can create a new one at https://appleid.apple.com. An Apple ID is required for installing and signing into Xcode.
After installing Xcode, you must open Xcode, agree to terms of service, and install optional components, if prompted.
Create a new Xamarin app:
Specific versions of the Android SDK are required to build projects. If your machine is missing the required SDK, you'll see the following prompt while the new project is loading. Select Accept to have the automatic installation begin.
NuGet is a package manager that will bring in the dependencies of your new app.
The package restore process will start automatically. Wait until the Restored or Ready message appears in the status bar at the bottom left of the screen.
Create a new Xamarin app:
NuGet is a package manager that will bring in the dependencies of your new app.
After your application loads, right click on the AwesomeApp solution and select Restore NuGet Packages
To debug with an Android device, you can either configure your Android device to connect to Visual Studio or use an emulator. Choose the scenario that is most applicable to you.
To develop with your Android device, USB debugging needs to be enabled.
Enable developer mode
Check USB debugging status
Trust device
Your device is now configured and will show up in Visual Studio as a deployment target.
Having issues?Check the documentation.
If you don't have a device to deploy to, you'll need to set up an Android emulator or use a device. If you've already done this, you can skip this step.
If this if your first time building a Xamarin application, you'll need to create a new Android Emulator. You'll see "Android Emulator" in the debug menu. Click it to start the creation process.
This brings up a User Account Control prompt to be accepted to start the emulator creation process. Select Yes.
This brings up a New Device dialog that already has a default Android device preconfigured for a base emulator. Select Create.
At this point, you may be prompted to agree to the license agreement for the Android emulator. Read through it and select Accept to continue the process. This will download the emulator images and finalize the creation of the emulator for use in Visual Studio.
Once the emulator has been created, you'll see a button that says Start. Click it.
You may receive prompt to enable Windows Hypervisor Platform. Follow the documentation to enable this feature for optimal performance.
The Android emulator will launch. Wait for it to fully finish starting and you'll see it displayed in the Visual Studio debug menu. This may take some time if you aren't using hardware acceleration.
Your Android emulator has now been created and is ready to use. Next time you run Visual Studio, the emulator will appear directly in the debug target window and will start when you select it. If you ran into any issues or have performance issues with the emulator, read through the full setup documentation.
For this tutorial, we'll focus on setting up and deploying to Android. To deploy to the application to iOS, you'll need to configure the Remoted iOS Simulator for Windows or configure a device for deployment with Hot Restart.
If you don't have a device to deploy to, you'll need to set up an Android emulator or device. If you've already done this or only wish to deploy to iOS, you can skip this step.
If this if your first time building a Xamarin application, you'll need to create a new Android Emulator. You'll see "Select Device" in the debug menu. Select the run button to start the creation process.
You are now prompted to verify you'd like to create an emulator. Select Add a Virtual Device:
This opens the Android Device Manager. Select + New Device to start the creation process.
The options are automatically populated for a base emulator. If required, change any options and then select Create.
At this point, you may be prompted to agree to the license agreement for the Android emulator. Read through and select Accept to continue the process. This will download the emulator images and finalize the creation of the emulator for use in Visual Studio.
Once the emulator has been created, you'll see a button that says Play. Click it and the Android emulator will launch. Wait for it to fully finish starting and you'll see it displayed in the Visual Studio debug menu. This may take some time if you aren't using hardware acceleration.
Your Android emulator has now been created and is ready to use. Next time you run Visual Studio, the emulator will appear directly in the debug target window and will start when you select it. If you ran into any issues or have performance issues with the emulator, read through the full setup documentation.
Your emulator or device should now be configured for deployment!
From the menu, select Debug > Start Debugging. If this option is disabled, ensure an emulator is selected.
Your application will build then deploy to the Android device/emulator and run.
From the menu, select Run > Start Debugging. If this option is disabled, ensure an emulator is selected.
Your application will build then deploy to the Android device/emulator and run.
Right-click on the AwesomeApp.iOS project and select Set As Startup Project.
From the menu, select Run > Start Debugging. If this option is disabled, ensure a simulator is selected.
Your application will build then deploy to the iOS simulator and run.
Congratulations, you've built and run your first .NET mobile app!
When developing applications with Xamarin.Forms, XAML Hot Reload is available when you're debugging your application. This means that you can change the XAML user interface (UI) while the application is running, and the UI will update automatically.
In the Solution Explorer, double-click the MainPage.xaml
file under the AwesomeApp
project.
Currently, the BackgroundColor
of the Frame
is set to Xamarin blue as shown in the following code on line 7:
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0" >
Let's update the background color to DeepPink
or feel free to pick your favorite color.
<Frame BackgroundColor="DeepPink" Padding="24" CornerRadius="0" >
If you don't see a Frame
element in your MainPage.xaml
, you may be on an older version of Visual Studio. If that's the case, simply paste the following code inside of the StackLayout
:
<Frame BackgroundColor="DeepPink" Padding="24" CornerRadius="0">
<Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
</Frame>
Save your changes by selecting File > Save or select CTRL+S and the UI will update.
Save your changes by selecting File > Save or select CMD+S and the UI will update.
Now, you'll add a button to the user interface, along with a click event that will increase and display a count.
Now add the following code under the </Frame>
closing tag on MainPage.xaml
:
<Button Text="Click Me" />
The code inside of the ContentPage
in MainPage.xaml
should look like the following:
<StackLayout>
<Frame BackgroundColor="DeepPink" Padding="24" CornerRadius="0">
<Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
</Frame>
<!--Add Button Here -->
<Button Text="Click Me" />
<Label Text="Start developing now" FontSize="Title" Padding="30,10,30,10" />
<!--More Labels here -->
</StackLayout>
Save your changes by selecting File > Save or select CTRL+S and the UI will update with the button.
<StackLayout>
<Frame BackgroundColor="DeepPink" Padding="24" CornerRadius="0">
<Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
</Frame>
<!--Add Button Here -->
<Button Text="Click Me" />
<Label Text="Start developing now" FontSize="Large" Padding="30,10,30,10" />
<!--More Labels here -->
</StackLayout>
Save your changes by selecting File > Save or select CMD+S and the UI will update with the button.
To change non-UI logic, you need to stop debugging. From the menu, select Debug > Stop Debugging.
To change non-UI logic, you need to stop debugging. From the menu, select Run > Stop Debugging.
Update the Button
in MainPage.xaml
with a Clicked
event named Handle_Clicked
:
<Button Text="Click Me" Clicked="Handle_Clicked" />
Open MainPage.xaml.cs
(this file is nested under MainPage.xaml, or you can right-click and select View Code from the menu)
Add the following code inside of the class under the constructor:
int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
count++;
((Button)sender).Text = $"You clicked {count} times.";
}
The code inside of namespace in the MainPage.xaml.cs
should look like the following after you add the previous code:
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
count++;
((Button)sender).Text = $"You clicked {count} times.";
}
}
From the menu, select Debug > Start Debugging.
From the menu, select Run > Start Debugging.
When your app launches, click the button. The number of clicks will be displayed in the main label.
Congratulations, you've built and run your first Xamarin app powered by .NET!
Now that you've got the basics, continue building your first Xamarin app with Xamarin.Forms self-guided learning path on Microsoft Learn.
Let Brandon and Matthew walk you through building a Xamarin app from start to finish:
You might also be interested in...