Learn to build cross-platform mobile apps using the latest features in Xamarin.Forms 4 with the help of a series of projects including apps for real-time chatting, AR games, location-tracking, weather, photo galleries, and much more
Xamarin.Forms is a lightweight cross-platform development toolkit for building apps with a rich user interface. Improved and updated to cover the latest features of Xamarin.Forms, this second edition covers CollectionView and Shell, along with interesting concepts such as augmented reality (AR) and machine learning.
Starting with an introduction to Xamarin and how it works, this book shares tips for choosing the type of development environment you should strive for when planning cross-platform mobile apps. You’ll build your first Xamarin.Forms app and learn how to use Shell to implement the app architecture. The book gradually increases the level of complexity of the projects, guiding you through creating apps ranging from a location tracker and weather map to an AR game and face recognition. As you advance, the book will take you through modern mobile development frameworks such as SQLite, .NET Core Mono, ARKit, and ARCore. You’ll be able to customize your apps for both Android and iOS platforms to achieve native-like performance and speed. The book is filled with engaging examples, so you can grasp essential concepts by writing code instead of reading through endless theory.
By the end of this book, you’ll be ready to develop your own native apps with Xamarin.Forms and its associated technologies, such as .NET Core, Visual Studio 2019, and C#.
What you will learn
Set up Xamarin.Forms to build native apps with code-sharing capabilities
Understand the core aspects of developing a mobile app, such as its layout, UX, and rendering
Use custom renderers to gain platform-specific access
Discover how to create custom layouts for your apps with Xamarin.Forms Shell
Use Azure SignalR to implement serverless services in your Xamarin apps
Create an augmented reality (AR) game for Android and iOS using ARCore and ARKit, respectively
Build and train machine learning models using CoreML, TensorFlow, and Azure Cognitive Services
Author(s): Daniel Hindrikes, Johan Karlsson
Edition: 2
Publisher: Packt Publishing
Year: 2020
Language: English
Pages: 504
Cover
Title Page
Copyright and Credits
Dedication
About Packt
Foreword
Contributors
Table of Contents
Preface
Chapter 1: Introduction to Xamarin
Native applications
Xamarin and Mono
Code sharing
Using existing knowledge
Xamarin platforms
Xamarin.iOS
Xamarin.Android
Xamarin.Mac
Xamarin.Forms
The architecture of Xamarin.Forms
Defining a UI using XAML
Defining a Label control
Creating a page in XAML
Creating a page in C#
XAML or C#?
Xamarin.Forms versus traditional Xamarin
When to use Xamarin.Forms
Setting up a development machine
Setting up a Mac
Installing Xcode
Installing Visual Studio
Configuring the Android emulator
Setting up a Windows machine
Installing Xamarin for Visual Studio
Pairing Visual Studio with a Mac
Configuring an Android emulator and hardware acceleration
Configuring UWP developer mode
Xamarin productivity tooling
Xamarin Hot Restart
Xamarin XAML Hot Reload
Summary
Chapter 2: Building Our First Xamarin.Forms App
Technical requirements
An overview of the project
Beginning the project
Setting up the project
Creating the new project
Examining the files
DoToo
DoToo.Android
DoToo.iOS
DoToo.UWP
Updating the Xamarin.Forms packages
Removing the MainPage file
Creating a repository and a TodoItem model
Defining a to-do list item
Creating a repository and its interface
Connecting SQLite to persist data
Adding the SQLite NuGet package
Updating the TodoItem class
Creating a connection to the SQLite database
Implementing the GetItems(), AddItems(), and UpdateItems() methods
Using MVVM – creating views and ViewModel
Defining a ViewModel base class
Introducing PropertyChanged.Fody
Creating the MainViewModel
Creating the TodoItemViewModel
Creating the ItemViewModel class
Creating the MainView view
Creating the ItemView view
Wiring up a dependency injection through Autofac
Adding a reference to Autofac
Creating the resolver
Creating the bootstrapper
Adding a bootstrapper on iOS
Adding a bootstrapper in Android
Adding a bootstrapper in UWP
Making the app run
Adding data bindings
Navigating from MainView to ItemView to add a new item
Adding new items to the list
Binding ListView in MainView
Creating a ValueConverter object for the item status
Using ValueConverter
Navigating to an item using a command
Marking an item as complete using a command
Creating the filter toggle function using a command
Laying out the contents
Setting an application-wide background color
Laying out the MainView and ListView items
The filter button
Touching up ListView
Summary
Chapter 3: Building a News App Using Xamarin.Forms Shell
Technical requirements
Project overview
Getting started
Building the news app
Setting up the project
Creating the new project
Updating Xamarin.Forms packages
Creating the structure of the app
Creating the ViewModel base class
Recapping on Quick PropertyChanged.Fody
Implementing INotifyPropertyChanged
Adding a reference to PropertyChanged.Fody
Creating a FodyWeaver file
Creating the HeadlinesViewModel class
Creating the HeadlinesView
Creating the ArticleItem
Creating the ArticleView
Creating the AboutView
Wiring up dependency injection through Autofac
Adding a reference to Autofac
Creating the resolver
Creating the bootstrapper
Initializing the bootstrapper
Downloading and configuring Font Awesome
Downloading Font Awesome
Adding Font Awesome to Info.plist on iOS
Adding the font to a static resource
Defining some icons in the resource dictionary
Defining the shell
Creating the MainShell file
Defining the basic structure
Adding the MainShell type to the container
Making the app run
Creating the news service
Obtaining an API key
Creating the models
Creating a service class
Creating the NewsScope enum
Enabling C# 8
Creating the NewsService class
Wiring up the NewsService class
Extending the HeadlinesViewModel class
Extending the HeadlinesView
Extending the ContentView of the ArticleItem
Adding to the bootstrapper
Adding a ContentTemplate attribute
Handling navigation
Creating the navigation service
Creating the INavigation interface
Implementing the INavigation interface using Shell
Adding the INavigation interface to the ViewModel class
Navigating using routes
Finalizing the ItemSelected command
Extending the ArticleView to receive query data
Extending the ArticleView with a WebView
Registering the route
Summary
Chapter 4: A Matchmaking App with a Rich UX Using Animations
Technical requirements
Project overview
Creating the matchmaking app
Creating the project
Creating the new project
Updating the Xamarin.Forms NuGet packages
Designing the MainPage file
Creating the Swiper control
Creating the control
Defining the main grid
Adding a content view for the photo
Creating the DescriptionGenerator class
Creating a picture class
Binding the picture to the control
Setting the source
Controlling the loading label
Handling pan gestures
Testing the control
Creating decision zones
Extending the grid
Adding the StackLayout for liking photos
Adding the StackLayout for denying photos
Determining the screen size
Adding a clamp function
Adding code to calculate the state
Defining a method for calculating the state
Wiring up the pan state check
Adding exit logic
Checking if the image should exit
Removing the image
Updating PanCompleted
Adding events to the control
Declaring two events
Raising the events
Wiring up the Swiper control
Adding images
Adding initial photos
Making the call from the constructor
Adding count labels
Subscribing to events
Adding methods to update the GUI and respond to events
Wiring up events
Summary
Chapter 5: Building a Photo Gallery App Using CollectionView and CarouselView
Technical requirements
Project overview
Building the photo gallery app
Importing photos
Importing photos from the iOS photo gallery
Importing photos from the Android photo gallery
Writing the app-initializing code
Creating a shell
Creating a base view model
Creating a bootstrapper and a resolver
Creating the bootstrapper
Creating the gallery view
Creating the ViewModel
Creating the view
Loading photos incrementally
Saving favorites
Creating the carousels
Creating the view model for the favorite photos
Creating the view model for the latest photos
Showing the favorites photos
Summary
Chapter 6: Building a Location Tracking App Using GPS and Maps
Technical requirements
Project overview
Building the MeTracker app
Creating a repository to save the locations of our users
Creating a model for the location data
Creating the repository
Xamarin.Essentials
Creating a service for location tracking
Setting up the app logic
Creating a view with a map
Creating a ViewModel
Creating a resolver
Creating the bootstrapper
Creating the iOS bootstrapper
Creating the Android bootstrapper
Setting the MainPage
Background location tracking on iOS
Enabling location updates in the background
Getting permissions to use the location of the user
Subscribing to location updates
Background location tracking with Android
Adding the required permissions to use the location of the user
Creating a background job
Scheduling a background job
Subscribing to location updates
Creating a heat map
Adding the GetAll method to LocationRepository
Preparing the data for visualization
Creating custom renderers
Creating a custom control for the map
Creating a custom renderer to extend the map in the iOS app
Creating a custom renderer to extend the map in the Android app
Refreshing the map when resuming the app
Summary
Chapter 7: Building a Weather App for Multiple Form Factors
Technical requirements
Project overview
Building the weather app
Creating models for the weather data
Adding the weather API models manually
Adding the app-specific models
Adding the ForecastItem model
Adding the Forecast model
Creating a service to fetch the weather data
Configuring the applications so they use location services
Configuring the iOS app so that it uses location services
Configuring the Android app so that it uses location services
Configuring the UWP app so that it uses location services
Creating the ViewModel class
Getting the weather data
Grouping the weather data
Creating a Resolver
Creating a bootstrapper
Creating the view for tablets and desktop computers
Using FlexLayout
Adding a toolbar item to refresh the weather data
Adding a loading indicator
Setting a background image
Creating the view for phones
Using a grouped CollectionView
Adding pull to refresh functionality
Navigating to different views based on the form factor
Handling states with VisualStateManager
Creating a behavior to set state changes
Summary
Chapter 8: Setting Up a Backend for a Chat App Using Azure Services
Technical requirements
Understanding the different Azure serverless services
Azure SignalR Service
Azure Functions
Azure Blob storage
Azure Cognitive Services
Project overview
Building the serverless backend
Creating a SignalR service
Creating a storage account
Creating an Azure Cognitive Service
Using Azure Functions as an API
Creating the Azure service for functions
Creating a function to return the connection information for the SignalR service
Creating a message library
Creating a storage helper
Creating a function for sending messages
Using the Computer Vision API to scan photos for adult content
Creating a scheduled job to clear photos from storage
Deploying the functions to Azure
Summary
Chapter 9: Building a Real-Time Chat Application
Technical requirements
Project overview
Getting started
Building the chat app
Creating the chat service
Initializing the app
Creating a resolver
Creating a Bootstrapper
Creating a base ViewModel
Creating the main view
Creating MainViewModel
Creating MainView
Replacing MainPage
Editing the XAML
Fixing the code behind the view
Setting the main view
Creating ChatView
Creating ChatViewModel
Creating the class
Adding the text property
Receiving messages
Creating the LocalSimpleTextMessage class
Sending text messages
Installing the Acr.UserDialogs plugin
Installing the Media plugin
Sending photos
Creating the ChatView
Creating Base64ToImageConverter
Creating the skeleton ChatView
Adding ResourceDictionary
Adding CollectionView
Adding templates
Creating a template selector
Adding the buttons and entry control
Fixing the code behind
Styling
Styling with CSS
Applying the style sheet
Handling life cycle events
Summary
Chapter 10: Creating an Augmented Reality Game
Technical requirements
Essential theory
An overview of the project
Setting up the project
Creating the project
Updating the Xamarin.Forms NuGet packages
Setting the Android target framework version to 9.0
Adding the camera permission to Android
Adding a camera usage description for iOS
Defining the user interface
Creating the ARView control
Modifying the MainPage
Adding UrhoSharp
Installing the UrhoSharp NuGet package for iOS and the .NET Standard project
Installing the UrhoSharp.ARCore NuGet package for Android
Adding the Android life cycle events
Defining the PlaneNode class
Adding custom renderers for the ARView control
For iOS
For Android
Creating the game
Adding the shared abstract Game class
InitializeAR
CreateSubPlane
UpdateSubPlane
FindNodeByPlaneId
Adding platform-specific classes
Adding the iOS-specific class
Adding the Android-specific class
Writing the ARKit-specific code
Defining the ARKitComponent
Writing handlers for adding and updating anchors
SetPositionAndRotation
UpdateOrAddPlaneNode
OnAddAnchor
OnUpdateAnchors
Writing a handler for removing anchors
OnRemoveAnchors
Initializing ARKit
Writing the ARCore-specific code
Defining the ARCoreComponent
SetPositionAndRotation
Writing a handler for ARFrame updates
Initializing ARCore
OnConfigRequested
InitializeAR
Writing the game
Adding a camera
Configuring a renderer
Adding lights
Implementing the game startup
Adding boxes
AddBox()
OnUpdate()
Making boxes rotate
Creating the rotate component
Assigning the Rotator component
Adding a box hit-test
Adding a death animation
DetermineHit()
OnTouchBegin()
Wiring up input
Updating statistics
Defining a statistics class
Sending updates via MessagingCenter
Wiring up events
Updating the GUI
Subscribing to the updates in the MainPage class
Summary
Chapter 11: Hot Dog or Not Hot Dog Using Machine Learning
Technical requirements
Machine learning
Azure Cognitive Services – Custom Vision
Core ML
TensorFlow
Project overview
Getting started
Building the Hot Dog or Not Hot Dog application using machine learning
Training a model
Tagging images
Training a model
Exporting a model
Building the app
Classifying images with machine learning
Using Core ML for image classification
Using TensorFlow for image classification
Creating a base ViewModel class
Initializing the app
Creating a Resolver class
Creating a bootstrapper
Creating the iOS bootstrapper
Creating the Android bootstrapper
Building the first view
Building the ViewModel class
Building the view
Building the result view
Building the ViewModel class
Building the view
Summary
Other Books You May Enjoy
Index