Mason Docs

White-labeling Your Product

In our 'Manage Projects' series, you were introduced to the concept of Mason OS configs and projects and how to deploy them.

This guide will help you take your Mason project to the next level by adding custom branding to the boot up sequence.

Prerequisites

For this example, we are using an example group named development and example project named white-label-example

Customize the Splash Image

  1. Create a Splash Image

    A splash image in Android is the static image that is displayed at the very start of the boot up experience. By default on Mason devices this is the Mason logo:

    Mason Logo Splash Image

    When creating your splash image we've found using a "square" image is your best bet so that it can scale across different device form factors. The D450 has a resolution of 1080*2160 so a 1080x1080 square would be perfect.

    Using the editor of your choice create an image to replace the Mason logo. We will use the following image:

    Example Logo Splash Image

    You can find a completed example and follow along by checking out MasonAmerica/white-label-example on Github.

  2. Register your Splash Image

    In previous guides we explained how to register applications using Mason CLI. Registering a splash image is very similar, however, instead of using the app keyword when registering our artifact we will use media.

    Since our splash image is just a static image we will also need to give it a name and version. Here we will call our splash image mysplash and give it the version of 1. You can use whatever you want here.

    Now to register we will use the following command: mason register media splash mysplash 1 mysplash.png

    For more details on registering a splash image to the Mason Platform, see our Mason CLI documentation for the command mason register media.

  3. Modify your Mason OS Configuration

    Now that we have registered our splash image with the Mason platform we can reference it in our Mason OS Configuration! To do this you'll add the following YAML to your configuration:

    
      media:
        splash:
          name: mysplash
          version: latest
    
    

    The media block in your YAML should be a sibling to apps and os blocks as seen below:

    
    os:
      name: white-label-example
      version: latest
    
    apps:
      - name: com.example.app
        package_name: com.example.app
        version_code: latest
    
    media:
      bootanimation:
        name: myanimation
        version: latest
      splash:
        name: mysplash
        version: latest
    
    
  4. Register and Deploy

    Now that you've created your very own custom splash image and added it to your Mason OS Configuration. You're now ready see it live in action.

    Follow the guide on Deploying a Project for these steps.

Customize the Boot Animation

  1. Create the Boot Animation

    A "boot animation" in Android the animations shown while the device is booting up. Boot animations in Android are very particular and come in the form of a .zip file. (We're working on a way to simplfy in the future!) You can download the default Mason boot animation and extract the zip to examine.

    We've found using a "square" image for your animation is your best bet so that it can scale across different device form factors. The D450 has a resolution of 1080*2160 so a 1080x1080 square would be perfect.

    You'll notice a desc.txt file in the zip. This file is explains to Android how to play your animation. View the official Android the boot animation documentation to learn how to create yours.

    One common issue is when you are compressing the zip file it can create an extra sub directory (nesting all of your files under a parent directory). When you create the zip ensure the desc.txt and each of the parts of the animation are at the root of the zip. This is the command we used to create our example: zip -0 -r -o ../myanimation.zip desc.txt part0/* part1/*

  2. Register your Boot animation

    In previous guides we explained how to register applications using Mason CLI. Registering a boot animation is very similar, however, instead of using the app keyword when registering our artifact we will use media.

    Since our boot animation is just a zip file we will also need to give it a name and version. Here we will call our boot animation myanimation and give it the version of 1. You can use whatever you want here.

    Now to register we will use the following command: mason register media bootanimation myanimation 1 myanimation.zip

    For more details on registering a boot animation to the Mason Platform, see our Mason CLI documentation for the command mason register media.

  3. Modify your Mason OS Configuration

    Now that we have registered our boot animation with the Mason platform we can reference it in our Mason OS Configuration! To do this you'll add the following YAML to your configuration:

      media:
        bootanimation:
          name: myanimation
          version: latest
    

    The media block in your YAML should be a sibling to apps and os blocks as seen below:

    os:
      name: white-label-example
      version: latest
    
    apps:
      - name: com.example.app
        package_name: com.example.app
        version_code: latest
    
    media:
      bootanimation:
        name: myanimation
        version: latest
      splash:
        name: mysplash
        version: latest
    
  4. Register and Deploy

    Now that you've created your very own custom boot animation and added it to your Mason OS Configuration. You're now ready see it live in action.

    Follow the guide on Deploying a Project for these steps.

Support