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 2019.
During installation, select the Mobile development with .NET workload.
If you already have Visual Studio 2019, 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 2019, 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:
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. Click 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 develop with your Android device, USB debugging needs to be enabled. Follow these steps on the device to connect it to Visual Studio. If you do not have an Android device, skip below to emulator setup instructions.
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 UAC prompt to be accepted and then the emulator 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 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. Click the run button to start the creation process.
You are now prompted to verify you'd like to create an emulator. Click Add a Virtual Device:
This opens the Android Device Manager. Click + 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.
Right-click on the AwesomeApp.iOS project and select Set As Startup Project.
From the menu, select Run > Start Debugging.
Your application will build then deploy to the iOS emulator and run.
Your application will build then deploy to the Android device/emulator 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:
<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.
Open MainPage.xaml
and add the following code under the </Frame>
closing tag:
<Button Text="Click Me" Clicked="Handle_Clicked" />
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>
<Button Text="Click Me" Clicked="Handle_Clicked" />
<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.
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.
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:
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 quickstarts.
Let Brandon and Matthew walk you through a full Xamarin 101 from start to finish:
You might also be interested in...