Taking your apps design to the next level with Xamarin Forms

About the topic:

Contenido

As I mentioned on other occasions, there are many things to consider when designing mobile apps. Today users are much more demanding and the market is very competitive.

If it is true that every year that passes the development of mobile applications gains popularity but with it come interesting challenges to face. One of these challenges is the design of interfaces and user experience (UI/UX).

The difference between a good application and a bad application is usually the quality of your user experience (UX). A good user experience is what separates successful applications from those that have not been successful. That is why it is vital to try to focus our efforts on trying to give our users the greatest and best possible experience.

What you should know

To accomplish this task we will focus on what is the consistency of our designs using Xamarin Forms.

Consistency in mobile app design refers to ensuring that the elements of a user interface are uniform. They will look and behave the same way throughout the app. This helps to constantly test a user’s assumptions about user interface management, creating a sense of control, familiarity and reliability.

Article: What most don’t know about mobile app design

💡 Note: Here we will not abound on the topic of consistency in the design of mobile applications, I have already written an extensive article, which you can see here, where I detail each of the parts that you should consider when designing your applications.

As you should know within the Xamarin Forms environment we can count on many standard controls on the different platforms that help us create almost any application. You can see some of these controls in the image below.

Within the Xamarin Forms environment these controls are called Views or Views. Views are UI objects, such as labels, buttons, and sliders that are commonly referred to as controls or widgets in other programming environments.

What’s interesting about all this is that Xamarin Forms renders use interfaces to their native target platform controls, allowing Xamarin.Forms applications to retain the right appearance for each platform.

This means that when we create a button in Xamarin Forms, it renders directly to each platform’s native button, which we are already in the first instance complying with in part a basic principle of mobile app design, which is Consistency.

Tips to get the most out of Xamarin Forms

Within the Xamarin Forms environment we can use some tools and approaches that can help us create more consistent layouts across platforms without much effort. That’s what I want to show you here.

Working directly with the device

Within this section I want to introduce you to the potential of the Device class within Xamarin Forms. The Device class contains a number of properties and methods that can help us customize the layout and functionality for each platform.

Knowing the Specific Platform or Target Platform

You can provide platform-specific values by creating a statement in the Device.RuntimePlatform property, and then providing switch case instructions for the required platforms.

public App () 
{
   switch (Device.RuntimePlatform) 
   { 
     case Device.iOS: 
       MainPage = new NavigationPage (new iOSPage());
       break; 
     default: 
       MainPage = new NavigationPage (new DefaultPage());
     break; 
   }
}

This is a tip that can be taken from you a lot of value. Imagine that you need to make an adaptation to one of the pages of the platform, using Device.RuntimePlarform you can easily specify which screen to use. So you can see that value let’s see a more close and detailed example: navigation using tabs.

Within Xamarin Forms we have the page TabbedPage. This page lists tabs where each tab loads content into the details area. 

Navigation Bar for iOS
Tabs in Android application

When using the tabbed navigation bar the user thinks they will be in the same view, but will see data related to the parent or open tab. You don’t expect to see a completely different view without related data.

On android, these tabs are often used to categorize content. And on iOS this categorization of content is usually done with a Scope Bar.

Tabs in Android application
Scope Bar in iOS 9

So, if we want to offer this functionality as expressed in the images, we must create specific pages for each platform since Xamarin Forms does not have a Scope Bar in its list of controls for the different platforms. 

There are many examples of how to make aScope Control on the Internet. In case you’re interested in one.

Now, if we just want to change some properties of a control we can use OnPlatform.

button.HeightRequest = Device.OnPlatform (ios: 20, Android: 30, WinPhone: 30);

In the same way, we can use it in xaml:

<StackLayout>
  <StackLayout.Margin>
    <OnPlatform x:TypeArguments="Thickness">
      <On Platform="iOS" Value="0,20,0,0" />
      <On Platform="Android, UWP" Value="0,0,0,0" />
    </OnPlatform>
  </StackLayout.Margin>
  ...
</StackLayout>
...
OR
...
<StackLayout>
  <StackLayout.Margin>
    <OnPlatform x:TypeArguments="Thickness" iOS="0,20,0,0" Android="0,0,0,0" />
  </StackLayout.Margin>
  ...
</StackLayout>
...
OR
...
<StackLayout Margin="{OnPlatform iOS="0,20,0,0", Android="0,0,0,0"}>
...
</StackLayout>

Knowing the target device

The property Device.Idiom can be used to modify layouts or capabilities depending on the device on which the application is running. This is especially useful for building designs that take advantage of larger screens. For this case, you can use:

if (Device.Idiom == TargetIdiom.Phone) {
    // layout views vertically
} else {
    // layout views horizontally for a larger display (tablet or desktop)
}

Similarly, it can be used in XAML:

<StackLayout>
    <StackLayout.Margin>
        <OnIdiom x:TypeArguments="Thickness">
            <OnIdiom.Phone>0,20,0,0</OnIdiom.Phone>
            <OnIdiom.Tablet>0,40,0,0</OnIdiom.Tablet>
            <OnIdiom.Desktop>0,60,0,0</OnIdiom.Desktop>
        </OnIdiom>
    </StackLayout.Margin>
    ...
</StackLayout>

To learn more about the class Device and everything it has to offer, you can find it here.

Working with resources and styles

Working with resources allows you to avoid duplicate values, but you still have to set each property individually, which creates clutter and produces repeated code.

...
<Button	
  BackgroundColor ="{StaticResource highlightColor}"
	BorderColor     ="{StaticResource edgeColor}"
	BorderRadius    ="{StaticResource edgeRadius}"
	BorderWidth     ="{StaticResource edgeSize}"
	TextColor       ="{StaticResource textColor}"
	Text            ="OK"  />

<Button	
  BackgroundColor ="{StaticResource highlightColor}"
	BorderColor     ="{StaticResource edgeColor}"
	BorderRadius    ="{StaticResource edgeRadius}"
	BorderWidth     ="{StaticResource edgeSize}"
	TextColor       ="{StaticResource textColor}"
	Text            ="Cancel"  />
...

When you set up a property, you must repeat it in each view or control. To solve this problem we will use styles. A Style is a collection of setters for a particular type of view or control.

...
<Style x:Key="labelRedStyle" TargetType="Label">
       <Setter Property="HorizontalOptions" Value="Center" />
       <Setter Property="VerticalOptions" Value="CenterAndExpand" />
       <Setter Property="FontSize" Value="Large" />
       <Setter Property="TextColor" Value="Red" />
</Style>
...
<Label Text="Follow me" Style="{StaticResource labelRedStyle}" />
<Label Text="@luismatosluna" Style="{StaticResource labelGreenStyle}" />
...

TargetType must be applied (or you will have a runtime exception). The properties must be members of the TargetType (or you will have a runtime exception).

Working with Material Design at Xamarin Forms

One of the recommendations mentioned in the article on consistency in the design I wrote to them was: Working with a well-known design pattern. At this point everyone should know the guidelines of Google Material Design  and Apples Human Interface. If you haven’t worked with guides yet, I recommend you do it.

When we work with a well-known pattern we are taking advantage of the millions of dollars that these companies have spent on research and development of these designs, which come in handy even for multinational companies than expert teams in UI/UX.

In Xamarin Forms we can use Material Design for Android and iOS applications with these libraries:

  • Visual Material. Official library supported by the Xamarin Forms team. Material visual controls are performed using material renderers, which apply material design rules. Functionally, material renderers are no different from the default renderers.
  • XF. Material Library. A library that provides interactive elements that work similarly in all parts of the application. The controls of this libraries were created to simulate the behavior of Google’s Material Design.


Next, I present a comparison table with the controls that each library has.

ControlVisual MaterialXF.Material Library
ActivityIndicator☑️☑️
Button☑️☑️
CheckBox☑️☑️
DatePicker☑️
Editor☑️☑️
Entry/Text fields☑️☑️☑️
Frame/Cards☑️☑️
Picker☑️☑️
ProgressBar☑️
Slider☑️☑️
Stepper☑️
TimePicker☑️
App Bar Customization☑️
Switch☑️
Menus☑️
Typography Label☑️☑️
Chips☑️
Radio Buttons☑️☑️
Tintable Image Icon☑️
Alert Dialog☑️☑️
Simple Dialog☑️
Confirmation Dialog☑️☑️
Input Dialog☑️
Loading Dialog☑️
Snackbar☑️
Note: Double check adds extra functionality*

⚠️ Note: It’s good to note that Visual Material weighs three times less and has fewer dependencies than XF.Material Library.

It is good that you know which controls you will use and what are the requirements to choose the right library. And more importantly, try not to use both. If you need anything specific, develop it.

On the one hand, we have Visual Material that weighs less and has some standard controls to implement as part of Material Design. And on the other hand, we have a more complete but much heavier library.

Considerations

Well, up to this point if you’re thinking of using Material Design, good for you but there are a few things to keep in mind.

Material Design is ideal for user experience on any platform in general. Note that Apple has its own Human Interface Guidelines for the user experience on the iOS platform. However, there are recommendations available on how to adapt material design on the Android and iOS platform here. So you can safely use material design in the iOS app as long as you follow these adaptation guidelines.

Material Design does not imply a specific style. There are many good examples of products that have adopted Material Design while maintaining their brand identity. It’s good to see Material Design as a starting point for designers and developers to improve the identity of your app.

Utility resources


I hope this article is a starting point for those who don’t have much experience with designing mobile apps. I’d like to know that you think all this and if you were helpful in the comments 😉

For extra content, follow me on Instagram and LinkedIn! Thank you for reading!

What do you think of this content?
 
Luis Matos

Luis Matos

I help professionals and companies to create value solutions. I am a Systems Engineer, blockchain executive, and international mobile application speaker. Founder of the Malla Consulting Agency and several international technology communities.
Subscribe
Notify of
1 Comment
Oldest
Newest
Inline Feedbacks
View all comments
1
0
Would love your thoughts, please comment.x
()
x

Search in the site