This is the fourth post in our "Building the Error Monitoring Client App" blog series. As you may already know, the purpose of this blog series is to document how we build the Error Monitoring mobile client app using DevExpress Xamarin.Forms UI Controls. Feel free to review our previous posts using the following links:
UI Changes – App Navigation
In our original design mockup, we planned to use a side drawer for app-wide navigation. We have since determined that a tab bar is more efficient – it reduces the number of taps required to navigate between app views. While an extra tap may not seem like much, we think our new approach improves the app’s overall user experience. We’d certainly love to hear what you think – be sure to comment below if you think this change is for the positive.
Tab Bar Navigation
The DevExpress Xamarin.Forms UI component suite includes a TabPage control – a simple control for those that require tab navigation within their apps.
To incorporate tab navigation within the Error Monitoring app, we must first add the required tabs to the TabPage control. Each tab is described by a separate TabPageItem, so we’ve added four different items to our project. In addition, we’ve specified the Title property for each page (caption used for tab items).
<dxn:TabPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:dxn="clr-namespace:DevExpress.XamarinForms.Navigation;assembly=DevExpress.XamarinForms.Navigation"
xmlns:views="clr-namespace:Logify.Views"
x:Class="Logify.Views.MainPage"
NavigationPage.HasNavigationBar="False"
HeaderPanelPosition="Bottom">
<dxn:TabPageItem>
<views:DrawerReportsFilterView Title="Reports"/>
</dxn:TabPageItem>
<dxn:TabPageItem>
<views:DrawerApplicationsDetailView Title="Apps"/>
</dxn:TabPageItem>
<dxn:TabPageItem>
<views:StatisticView Title="Statistic"/>
</dxn:TabPageItem>
<dxn:TabPageItem>
<views:UserView Title="Account"/>
</dxn:TabPageItem>
</dxn:TabPage>
As you can see in the image above, our new user interface differs slightly from the original design mockup.
To improve overall appearance, we will change the default color of tab captions via the TabPage.ItemHeaderTextColor property. We’ll also add icons to our tab headers. To include icons, we need to specify the Page.Icon property for each content page.
One final change – to help highlight the active tab page, we will set its color via the control’s TabPage.SelectedItemHeaderIconColor property.
<dxn:TabPage
ItemHeaderTextColor="#979797"
SelectedItemHeaderIconColor="#548ed3"
SelectedItemHeaderTextColor="#548ed3">
<dxn:TabPageItem>
<views:DrawerReportsFilterView Icon="reports" Title="Reports"/>
</dxn:TabPageItem>
<dxn:TabPageItem>
<views:DrawerApplicationsDetailView Icon="apps" Title="Apps"/>
</dxn:TabPageItem>
<dxn:TabPageItem>
<views:StatisticView Icon="statistic" Title="Statistic"/>
</dxn:TabPageItem>
<dxn:TabPageItem>
<views:UserView Icon="user" Title="Account"/>
</dxn:TabPageItem>
</dxn:TabPage>
Follow this link to git if you’d like to review the complete source code for this project.
Your Feedback Counts
As always, we’d love to hear your thoughts on our Error Monitoring mobile client and our Xamarin.Forms UI controls. Leave your comments below or contact us at info@devexpress.com.
Free DevExpress Products – Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We’ll be happy to follow-up.