White Labeling in Xamarin Forms Applications

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!

You may also like

3 Comments

  1. Thank you for your awesome posts about Xamarin. However, we as developers need to do a better job of naming. White-label/black-label, white-list/black-list, master/slave, etc. just continue the systemic racism in our culture. I know you didn’t mean for this to be construed that way and the industry has a long way to go. We can do better ourselves and help point other people in the right direction.

    1. You are right. Racism is a huge problem in our society as a whole and we must work together to rid it once and for all.

      However I do not believe your suggestion is the right way for this change. I think we must separate things like naming conventions, from the real issue, or soon we cannot use the term “black” or “white” in any context without the fear of being label supportive towards a racistic culture. This is contraproductive and I think it would rather hurt than help the cause. Another example is “Primary” and “Secondary”. It too could be perceived as offensive toward minority groups.

      I’m not at all against changing any of these naming conventions, but I think it’important that we don’t “trail off” and lose focus on what really matters.

      Thanks for a great article!

  2. Awesome! I find your articles very helpful in my professional work. Thanks a lot for sharing you knowledge