This mobile app tutorial for Android developers shows how to use Activity objects and navigation when developing a cross-platform app with Xamarin. Forms.
Let’s be friends:
Comment ( 0)
Join the DZone community and get the full member experience.
In Android programming, Activity objects are used to display information to users and the Intent objects are used to navigate among the Activities. In Xamarin. Forms, we will be familiar with pages, which is similar to activities, and the NavigationPage object, which is similar to Intent object.
In the previous posts, we went over the basics of layouts and views in Xamarin. Forms, however, we worked within a single page. In the real world, mobile apps are made of multiple pages.
Xamarin. Forms provides many page objects that we can use to set up the UI of our applications and all of them derive from the abtract Page class. The following table describes available pages in Xamarin. Forms:
Page type
Description
ContentPage
Display a single view object
TabbedPage
Facilitates navigating among child pages using tabs
CarouselPage
Facilitates using the swipe gesture among child pages
MasterDetailPage
Manages two separate panes, which includes a flyout control
NavigationPage
Provides the infrastructure for navigating among pages
We can create the page objects in three ways:
In order to follow the examples in this post, we also create a new Xamarin. Forms application named NavigApp.
The ContentPage is the simplest page object and allows for displaying a single visual element (or control in the previous post). By default, when we create successfully the NavigApp application, the content of the MainPage.xaml file can look like this:
In XAML code above, the ContentPage object can be created by using the element and its attributes. This ContentPage object displays a single visual element, the Label element. The code-behind file ( MainPage.xaml.cs):
We can also create the ContentPage by using the item templates:
Note that we can select the Content Page item, which is XAML template, or the Content Page (C#) item – which is C# code template. The ContentPage can be used individually or as the content of other pages (as you’ll see later).
The MasterDetailPage allows we to split contents into two related parts: a master part that presents items and a detail part that presents details about items on the master part. The following XAML code ( MainPage.xaml file) will demonstrate how to create a MasterDetailPage object and both its master and detail parts are represented by the ContentPage objects:
Note that we must insert the Title property for the ‘s the element. The contents of the code-behind file ( MainPage.xaml.cs), respectively, will look like this:
Result:
You can swipe from the left to enable the master flyout:
And swipe back to hide it. An important note from the Microsoft docs:
“The master page of a MasterDetailPage should always be a ContentPage instance, and that the detail page should only be populated with TabbedPage, NavigationPage, and ContentPage instances. This will help to ensure a consistent user experience across all platforms.”
You can also add a MasterDetailPage object by adding the item template from VisualStudio:
The TabbedPage object is used in the cases that you need to categorize multiple pages by topic or by activity type. You can group multiple ContentPage objects into tabs as the following XAML code (MainPage.xaml):
And the code-behind (MainPage.xaml.cs) recpestively:
The results look like this:
As you can see, we organized multiple ContentPage objects into TabbedPage. Children collection and we must also provide a Title, which is the title of each tab, to each ContentPage.
We can also add a TabbedPage object by adding the item template from Visual Studio:
The CarouselPage is similar to the TabbedPage, but instead of having tabs, we can use the swipe gesture to switch among child pages. The following XAML code will demonstrate a gallery of pictures using the CarouselPage:
And the code-behind, respectively:
The result:
Swiping to the second page:
And the third page:
Note that we must import the pictures to the Resource>drawable folder in the Android project:
In theory, to move from one page to another, an application will push a new page onto the navigation stack, where it will become the active page, and to return back to the previous page, the application will pop the current page from the navigation stack. We can pass data from a page to another page during navigation.
In practice, the navigation includes the following operators:
In our NavigApp application, suppose the NagvigApp application has the MainPage.xaml as follows:
And the MainPage.xaml.cs:
The nextPage method is Click event handler of the Next Page button. If you run the NavigApp, the result can look like this:
We can push the MainPage to the navigation stack or the MainPage will become the root page by modifying the constructor App of the App class in the App.xaml.cs file:
If you run the app now, the result will look like this:
A navigation bar is present at the top of the MainPage page that displays a title. Next, we will add a second page named SecondPage to project:
The SecondPage.xaml:
The SecondPage.xaml.cs:
To move from the MainPage page to the SecondPage page by clicking the NextPage button, we must push the SecondPage page to the navigation stack. In the nextPage method, we write something:
Note that we must add the async keyword to declaration of the nextPage method. And now, we can run app again and click the Next Page button, app will navigate to the SecondPage page:
We can navigate back to the MainPage page by clicking the Back button, however, we can do this by making some changes in the prevPage method, which is the Click event handler of the PREVIOUS PAGE button:
When navigating, we can pass data to the MainPage page through a page constructor parameter, which is shown the following changes:
The result:
We can also pass data to the MainPage page through a BindingContext, which will be discovered in the next article.
