.NET Multi-platform App UI (MAUI) is here! The next generation of Xamarin and Xamarin.Forms for native multi-platform app development for mobile and desktop. We recommend that you start with the .NET MAUI tutorial today.
Purpose
Set up your development environment and build your first mobile application for Android and iOS.
Prerequisites
None.
Time to Complete
10 minutes + download/installation time
Scenario
A mobile app for Android and iOS that displays a "Hello World" message.
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 your app
Create a new Xamarin app:
Open Visual Studio 2022.
Select Create a new project.
Select Mobile from the Project type drop-down.
Select the Mobile App (Xamarin.Forms) template and select Next.
Enter AwesomeApp as the project name and select Create.
If you get a dialog box warning about firewall blocking some features, select the Allow access button.
Select the Blank template. Ensure Android and iOS are both selected and select Create.
Android SDK Install
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.
Restore NuGet packages
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.
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
Configure device
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.
Set up Android device
To develop with your Android device, USB debugging needs to be enabled.
Enable developer mode
On your Android device, go to the Settings screen.
Find Build number by using search at the top of the settings screen or locate it in About phone.
Tap Build number 7-10 times until "You are now a developer!" pops up.
Select Create.
Check USB debugging status
On your Android device, go to the Settings screen.
Find USB debugging by using search at the top of the settings screen or locate it in Developer options.
Enable USB debugging if it isn't enabled already.
Trust device
With a USB cable, connect your phone to your computer.
You'll receive a prompt to trust the computer on your device if you haven't used it for debugging before.
You can also check Always allow from this computer to prevent requiring this prompt each time you connect the device.
Select OK.
Your device is now configured and will show up in Visual Studio as a deployment target.
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.
Set up iOS device
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!
Run your app
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.
Optional: Run on iOS
Right-click on the AwesomeApp.iOS project and select Set As Startup Project.
Start your app
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!
Edit your code
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:
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:
