Theme and UI Customization

1. Experience Xamarin "Hot Reload" feature

This feature will dramatically speed up your inner development loop when working with Xamarin.Forms XAML. XAML Hot Reload instantly reflects changes you make in your running app, without requiring you to stop and rebuild.

No additional installation is required to use XAML Hot Reload, but you might have to double check your configuration to ensure the best experience. First, enable it in your IDE settings:

On Windows, check the Enable Xamarin Hot Reload checkbox at Tools > Options > Xamarin > Hot Reload.

alt text

On Mac, check the Enable Xamarin Hot Reload checkbox at Visual Studio > Preferences > Tools for Xamarin > XAML Hot Reload.

alt text

note

In earlier versions of Visual Studio for Mac, the menu is at Visual Studio > Preferences > Projects > Xamarin Hot Reload.

To learn more about Xamarin Hot Reload you can refer to this link https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/hot-reload

2. Splash Screen

For Splash screen this app uses Lottie Animations. Lottie is an awesome library created by Airbnb that allows you to run animations. It works by using a Json file that provides the content to render the animation.

Following steps guide how to change Splash screen, by platform specific Android and iOS:

a. Android

A SplashActivity is inserted before MainActivity to realize the splash screen. We implemeted LottieAnimationView as view layout of SplashActivity.

Step 1: Change background color:

Go to Resources > values > colors.xml, change the hex color at:

<color name="launcher_background">#FFFFFF</color>

Step 2: Change animation:

Prepare your animation JSON file, then go to Resources > layout > Activity_Spash.xml, change the JSON file name:

app:lottie_fileName="loading_gears.json"

note

It's recommended that you put the JSON file in Assets folder. The JSON file "loading_gears" specified in the layout is placed in Assets with Properties > BuildAction = “AndroidAsset”.

tip

You can find some useful json animation file here https://lottiefiles.com/, add customization to it as well

b. iOS

Similar to Android, iOS realizes a splash screen by sandwiching one SplashViewController

Step 1: Change background color:

Go to Resources > values > colors.xml, change the hex color at:

<color name="launcher_background">#FFFFFF</color>

Step 2: Change animation:

Prepare your animation JSON file, then open SplashViewController.cs file, change the JSON file name "loading_gears" to your JSON file name:

 public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            var animationView = LOTAnimationView.AnimationNamed("loading_gears");
            ...
        }

note

The JSON file specified by LOTAnimationView.AnimationNamed ("loading_gears") must be placed with Properties > BuildAction = “BundleResource” directly under the project.

3. Onboarding - Walkthrough Screens

For Walkthrough screens, we used SVG with gradient images, this brings a super flexible to add any designs to adapt with any business type. Simply change the images, and displaying text to create new awesome walkthrough page.

SVG images are placed at Images folder, to change walkthrough screens design, go to ViewModels > OnBoardingViewModel.cs, make the change in svg image file name:

Boardings = new ObservableCollection<Boarding>
            {
                new Boarding
                {
                    ImagePath = "ChooseGradient.svg",
                    Header = TextsTranslateManager.Translate("Choose"),
                    Content = TextsTranslateManager.Translate("PickItem")
                },
                new Boarding
                {
                    ImagePath = "ConfirmGradient.svg",
                    Header = TextsTranslateManager.Translate("OrderConfirmed"),
                    Content = TextsTranslateManager.Translate("OrderConfirmedText")
                },
                new Boarding
                {
                    ImagePath = "DeliverGradient.svg",
                    Header = TextsTranslateManager.Translate("Delivered"),
                    Content = TextsTranslateManager.Translate("DeliveredText")
                }
            };

To change Image for boarding screen: change the name of image in ImagePath
To change Title and description: you should make the change in translation Multi-Languages

4. Horizontal List (Home Screen)

The Horizontal Lists at home screen display all Posts article from Wordpress site by Posts Categories, e.g: the What's News horizontal list loads all posts under What's New's post category.

This approach brings you a flexible way to change/update the client-side's content when the app turned into production. Simply go to Wordpress dashboard and add new post, put it under predefined Categories.

Following steps show how to change Horizontal Lists:

Step 1. From Wordpress dashboard, go to Posts > Categories, add new category with Name and Slug value:

alt text

In above example we created a What's News category with slug whatsnews.

Step 2. Open GlobalSettings.cs file and find following code line:

/// <summary>
/// Define Name and Slug of Wordpress Post Categories
/// for Horizontal List view items at Home Screen
 /// </summary>
public static class Slug
{
    public static string WhatsNews = "whatsnews";
    public static string News = "news";
    public static string CoffeeLover = "coffeelover";
    ...
}

Define the slug shortname, here we defined WhatsNews for the slug whatsnews we just created in Wordpress dashboard at step 1.

Now, open ViewModels > HomeViewModel.cs file:

/// <summary>
/// Gets/sets the all What's News posts from WP to Horizontal List Layout.
/// </summary>
var whatsNews = await _appService.GetAllPostsByCategory(AppHelpers.GetCategoryId(GlobalSettings.Slug.WhatsNews));

then add the Slug shortname you just defined to GlobalSettings.Slug.WhatNews

5. Store Location Page

For Store locations and info, XStore read the JSON format config file from server. This approach provides a simple and easy to use, any changes for store locations and info at clients side, Admin or Manager just simply update this config file.

The JSON config file has the following syntax:

Objects are enclosed in braces ({}), their name-value pairs are separated by a comma (,), and the name and value in a pair are separated by a colon (:). Names in an object are strings, whereas values may be of any of the seven value types, including another object or an array.

Arrays are enclosed in brackets ([]), and their values are separated by a comma (,). Each value in an array may be of a different type, including another array or an object.

When objects and arrays contain other objects or arrays, the data has a tree-like structure.

In the downloaded package, you will find the Store.txt config file, please open this file and apply your changes here.

Data structure of a Store (Objects are enclosed in braces ({})) including below fields:

{
"id" :1,
"Store_Name":"David Jones - Burwood",
"Image":"https://raw.githubusercontent.com/tlssoftware/tlsdms/master/images/shopapp/store_location_samples/1.PNG",
"Address" :"Westfield Burwood, Wilga Street, Burwood, NSW 2134, Australia",
"email":"support@xstore.com",
"Telephone":"0781020099",
"Latitude":-33.870582,
"Longitude":151.105468,
"Sunday":"9AM-10PM",
"Monday":"9AM-10PM",
"Tuesday":"9AM-10PM",
"Wednesday":"9AM-10PM",
"Thursday":"9AM-10PM",
"Friday":"9AM-10PM",
"Saturday":"9AM-10PM"
},

From this structure you can add unlimited stores/branches as you want. To add new Store, simply clone this object into another then make the change to the value.

After changing the config file, upload it again to your server. Please note the default URL of Store config file in GlobalSettings.cs file:

public static string StoreInfoEndpoint => $"{defaultServerEndpoint}/wp-content/uploads/2020/05/Store.txt";

note

Please make sure that you change the id value. Different store must have differents id value or the store won't display.

6. About Us/Help Page, Call Center

This custom page points to your contact page or help page directly from the app. You can any URL as designated, to do it, open the GlobalSettings.cs file :

/// <summary>
/// Help Page URL config
/// Help Center Phone Number of Store
/// </summary>
public const string HelpPageUrl = "http://coffeestore.tlssoftwarevn.com/contact-us/";
public const string HelpCenterContact = "0123456789";

7. Styles and Themes

a. Texts, Fonts and Icons

Text styles, fonts and font icons used in the application are defined under Styles folder

Text Styles are defined in Texts.xaml:

 <!--  TEXT SIZE [MATERIAL DESIGN]  -->
    <!--  ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  -->
    <!--  H1-Light  -->
    <x:Double x:Key="TxtSizeH1_96">96</x:Double>
    <!--  H2-Light  -->
    <x:Double x:Key="TxtSizeH2_60">60</x:Double>
    <!--  H3-Regular  -->
    <x:Double x:Key="TxtSizeH3_48">48</x:Double>
    ...

<!--  STYLES TEXT  -->
    <!--  ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  -->
    <Style x:Key="TxtHeadline4_1" TargetType="Label">
        <Setter Property="TextColor" Value="{DynamicResource colSec}" />
        <Setter Property="FontSize" Value="{StaticResource TxtSizeH4_34}" />
        <Setter Property="FontFamily" Value="{StaticResource RegularFont_ProductSans}" />
    </Style>

alt text

App Fonts: this app uses 2 fonts family Montserrat and ProductSans.

To add new fonts, please put your new fonts under Assets folder (for Android), and Resources folder (for iOS), then replace the font name in Value text string.

<!--  FONTSFAMILY [ProductSans]  -->
    <!--  ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  -->
    <!--  Bold  -->
    <OnPlatform x:Key="BoldFont_ProductSans" x:TypeArguments="x:String">
        <On Platform="Android" Value="ProductSans-Bold.ttf#ProductSans" />
        <On Platform="iOS" Value="ProductSans-Bold" />
    </OnPlatform>

Font Icons: this app uses Font Awesome (Free licenses) for most of icons, it's including over 5000 HD Icons that can cover many business type that your app needed.

<!--  FONTICONS [FontAwesome]  -->
    <!--  ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  -->
    <!--  Bold  -->
    <OnPlatform x:Key="FontAwesome" x:TypeArguments="x:String">
        <OnPlatform.Platforms>
            <On Platform="Android" Value="fa-solid-900.ttf#Font Awesome 5 Free Solid" />
            <On Platform="iOS" Value="Font Awesome 5 Free" />
        </OnPlatform.Platforms>
    </OnPlatform>
    ...

b. Themes and Color

XStore has 2 predefined theme: Light Theme (default theme) and Dark Theme.

alt text

<!--  Theme Exported Colors  -->
    <Color x:Key="PrimaryColor">#FFEA8025</Color>
    <Color x:Key="PrimaryDarkColor">#d0424f</Color>

8. Next Step

Go to Publish to Appstore or GooglePlay to understand step to publish the app.

#1. Experience Xamarin "Hot Reload" feature

note

#2. Splash Screen

#a. Android

note

tip

#b. iOS

note

#3. Onboarding - Walkthrough Screens

#4. Horizontal List (Home Screen)

#5. Store Location Page

note

#6. About Us/Help Page, Call Center

#7. Styles and Themes

#a. Texts, Fonts and Icons

#b. Themes and Color

#8. Next Step

1. Experience Xamarin "Hot Reload" feature

2. Splash Screen

a. Android

b. iOS

3. Onboarding - Walkthrough Screens

4. Horizontal List (Home Screen)

5. Store Location Page

6. About Us/Help Page, Call Center

7. Styles and Themes

a. Texts, Fonts and Icons

b. Themes and Color

8. Next Step