Theme and branding

Grial offers a simple way to customize the overall look and feel by providing an easy and extensible theme. It provides several colors and styles that will ease your UI tweaks.

Checkout this demo video.

To start customizing your app’s look and feel, please refer to App.xaml file located in the following location:

Grial
    |_ App.xaml

Inside the file you will find the colors, styles and images references keys we created:

<ResourceDictionary x:Name="ThemeDictionary">
    ...

    <!-- COLORS -->
    <Color x:Key="BrandColor">#ad1457</Color>

    ...

    <!-- BASE STYLES -->
    <Style x:Key="FontIcon" TargetType="Label">
        <Setter Property="FontFamily" Value="{x:Static artina:FontAwesome.FontName}" />
    </Style>

    ...

    <!-- STATIC IMAGES -->
    <FileImageSource x:Key="BrandImage">logo.png</FileImageSource>
    ...

The most important color is the AccentColor, which is used across the whole theme/app. Basically changing its value will affect the overall look and feel.

<!-- 

        EXPORTED COLORS

        Everytime you change any of the exported colors
        you MUST compile (Right click on "Colors.tt" > Tools > Process T4 Templates)
        to see your changes on your App
    -->
    <!-- Export AccentColor -->
    <Color x:Key="AccentColor">#FFDA125F</Color>
    <!-- Export InverseTextColor -->
    <Color x:Key="InverseTextColor">White</Color>

Important: Changing the AccentColor value requires to manually export colors. Due to some limitations on Xamarin Forms it is not possible to style everything right from App.xaml. To work around this limitation we created a color compiler for Android and iOS.

Manually exporting colors

Once you change any exported color (AccentColor and/or InverseTextColor) you will need to manually trigger the colors compilation BEFORE you run the app.

Otherwise you won’t see changes reflected on your app.

Manually trigger the exported colors compilation by locating the following files on the solution:

   Grial
    |_ Colors.tt

   Grial.Droid
    |_ Resources
        |_ values
            |_ Colors.tt

…then right click on each of them and select

 Tools > Process T4 Templates

To visualize the theme simply run the sample app and go to:

Grial Theme > Native Controls
Grial Theme > Native Renderers
Grial Theme > Grial Common Views

We also provide an easy way to replace your app’s logo by modifying an specific resource on ThemeDictionary, called“BrandImage”. Simply locate the resource and point it to your image file.

Additionally we provided an specific XAML view to help your branding needs, the “BrandBlock.xaml”, which can be found on the following location:

 Grial
    |_ Views
        |_ Common
            |_ BrandBlock.xaml