Xamarin.Forms UI Controls - Building the Logify Client App (Part 4)

This is the fourth post in our "Building the Logify Client App" blog series. As you may already know, the purpose of this blog series is to document how we build the Logify Mobile Client app using DevExpress Xamarin.Forms UI Controls. Feel free to review our previous posts using the following links:

• Xamarin.Forms UI Controls - Building the Logify Client App (Part 1)
• Xamarin.Forms UI Controls - Building the Logify Client App (Part 2)
• Xamarin.Forms UI Controls - Building the Logify Client App (Part 3)

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 Logify Mobile Client, 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:LogifyRWA.Views"
  x:Class="LogifyRWA.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 Logify Mobile Client and our Xamarin.Forms UI controls. Leave your comments below or contact us at info@devexpress.com.