XamGirl

“White-label apps are applications built by a white or private label app development company and rebranded and resold by other businesses”. In simpler words, there are applications whose same codebase can be used by multiple brands simply by configuring the application with the desired branding.

In this article, I’m will show you how to create this kind of application in Xamarin Forms.

To show the concept will create a simple login app that needs to change the Icon/AppName/Splash/Styles/Texts according to the brand. The app names will be App1, App2, App3.

Let’s start with the architecture

To achieve White-Labeling there are a lot of architectures options you can follow: create different solutions per app, reusing the common code in one solution, or just using different git branches.

Those approaches are ok, but they are very difficult to maintain when you have a lot of brands.

Instead of that we will use a simpler approach using just one solution and creating different project configurations to indicate which app branding should compile.

Creating config options

Go to each project (Forms, Android, iOS, General solution) and create a new configuration per app.

Then open Solution-> Options-> Configurations -> Configuration Mapping and match each configuration created.

Create a new configuration symbol per each App configuration, that will represent the specific app and will be used for conditional compilation.

Finally, you can see the newly defined configurations available in the solution. Also, you can access the created symbols in your code.

To follow those steps in more detail, I recommend that you check this article by Xamboy, but instead of creating a Dev / Prod configuration, it will create a new configuration per application as I showed above.

Handling options per app

Next step is to handle the following:

• App Icons/Splash/ App Name
• Styles
• Texts
• Configs (Api Urls/keys, etc)
• Assets

App Icons/Splash/App Name

To handle these options we are going to do it on each platform:

Android

Create a copy of the AndroidManifest file and change the AppName/Package Name.

Also, open the Android .csproject file then according to the configuration we will load the specific Android manifest corresponding to it.

In the MainActivity file, we will set different Activity options according to the app symbol to change the App Icon, Splash and Name.

iOS

Create a copy of the Info.plist file and change the AppName/Bundle Identifier/App Icon/Splash etc.

In the iOS .csproject file we will set the Info.plist to be included according to the selected configuration.

To follow those steps in more detail, I recommend you to check this article by Xamboy.

Styles

To handle different styles per app, create a style file per application, then depending on the configuration symbols we will load one style or the other.

Texts

To handle different texts per application, we are going to create a .resx file per application. By using the configuration symbols we will load one .resx file or the other.

Create a TranslateExtension file to choose which Resource the app will use.

Copy the TranslateExtension file here.

Images

To handle different images per application, you can use a naming convention for example adding “App Name” at the end of every image. Then by using an ImageExtension and according to the ImageName specified in XAML it will add the app suffix.

Copy the ImageExtension file here.

Tips

Develop thinking on scalability

Even if the purpose of the application is not white label, it is important to develop with scalability in mind. A good practice is to use the .resx file to store our strings, use style files and use naming conventions for images. So if that app needs to become a white labeling app, it is much easier to do.

App Store Restrictions Awareness

The app store has a restriction for white label apps, you shouldn’t use the same Apple developer account to publish all your white label apps, you should use different Apple developer accounts for each app.

Make sure to have all your project resources updated

There will be some resources in the project which need to be constantly updated in each app like Info.plist file, AndroidManifest, .json when working with firebase, map keys etc. Make sure you have a different one per application and have them updated.

Final thoughts

There are many ways to handle white labeling in mobile applications. Another great option is to use this library by Dan Siegel which autogenerates the config options, but it will depend on how deep you want to go with your white labeling.

You can find the code for this sample here.

Happy coding!