Setting up and customizing White Label App for Android

White Label App allows you to customize the appearance of the app so that it looks unique and attracts users. This is important because the first impression of the design influences user interest. A unique style emphasizes the features of your brand and fosters a long-term relationship with your audience, as well as increases the chances of passing App Store validation.

Before customizing your app, be sure to follow all the steps from the article Preparing the configuration file and accessing data.

Note! Most changes are made in the app_config.json file. After making all needed changes to the file, make sure to:

  1. Save the changes to the file.
  2. Execute the command ./gradlew parseConfig in the terminal in Android Studio.
    JDK must be installed for the correct operation of this command in the Android Studio terminal. If it is not installed automatically with Android Studio, install it independently for the required operating system.
  3. Rebuild and run ▶.

Application name

You can set the name of the application that will be displayed for the users below its icon in the apps list. To do this:

  1. Open the app_config.json file and find the following code:

    "display_name": {
      "base": "en",    //
      "localized": {
        "en": "Travel App EN Git", // name in English
      "es": "Travel App ES Git" // name in Spanish
      }
  }
… 
  1. In the base field, specify the main language of the app’s name. This language will be used if the language selected on the user's device is not included in your app. For example, if the user has the Thai language selected in the device settings, but you do not have a name in That language, then the user will see the name in the main language.
  2. You can specify the application name in multiple languages by specifying the language code and the name in the given language.

For example, the application is available in English, Spanish, and French, and the primary language is Spanish. The code should look like this:


    "display_name": {
      "base": "is", // main language is Spanish
      "localized": {
        "en":"Voyages", // name in English
        "es":"The trips", // name in Spanish
        "fr": “Travels” // name in French
      }
  }
… 

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Tabs selection

The application can have 2 to 5 sections in the tab bar (an interface element that shows which sections exist in the application and where the user is at any given time). For example:

You can remove or add sections and change the subsections within some of them.

Tickets and Hotels tabs

Tickets and Hotels are tabs for searching flights and hotels, you can add or remove them. To do this:

  1. Open the app_config.json file and find the following code:
…   
"white_label_config": {
    "screens_to_display": [
      {
        "type": "flights" // Tickets tab
      },
      {
        "type": "hotels" // Hotels tab
… 
  1. To remove the tab delete an unnecessary line from the code. For example, remove airline tickets:
…   
"white_label_config": {
    "screens_to_display": [
      {
        "type": "hotels" // Hotels tab
    }
… 
  1. In this case, only the Hotels and the Information tabs will be present in the app.

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Other tab

Other tab – the tab in which, when clicked, the application will open the specified link in WebView format (a web page within the mobile application). For example, you can add a link to a car rental search in this section or to your own blog.

You can add up to 2 such sections in the app, for example:

To add the tab:

  1. Open the app_config.json file and find the following code:
…  
"white_label_config": {
    "screens_to_display": [
      ...
      {
        "type": "other", // Other section
        "parameters": {
          "icon": "ic_other_1", //  Icon for the "Other" tab
          "title": {  // Tab title
            "base": "en",
            "localized": {
              "en": "Other",
            "es": "Otros"
            }
          },
          "url": {  // link
            "base": "en",
            "localized": {
              "en": "https://www.google.com",
            "es": "https://www.google.es"
          }
… 
  1. In the title field specify the tab title. You can add titles in multiple languages if needed (see localization in the configuration file).
  2. In the url field, insert the link that will open when a user clicks this tab. If the application has multiple languages, make sure to add links for different localizations.
  3. Make similar changes for the second Other tab. If you don't plan to use this section, just delete the code from the file.
  4. You can also add your own icons for the "Other" tabs. To do this go to the travel-app-android-integrators/modules/config/src/main/res/drawable folder and:
    • For the Other 1 tab: Replace the default icon ic_default_other_1.xml with your own icon. 
    • For Other 2: Replace the default icon ic_default_other_2.xml with your own icon.

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Information tab

The Information tab contains favorites, regional settings, price settings, a link to the user agreement, and other subsections, where:

  • The Favorites, About the App, Rate this App, and Share the App sections are optional and can be removed/added. 
  • The Regional Settings, Display Prices, and Privacy sections cannot be removed.

The Information tab cannot be removed, but you can make changes to the subsections within, for this purpose:

  1. Open the app_config.json file and find the following code:
…  
 "info_screen_config": {
    "items_to_display": [
      "favorites", // favorites
      "about_app", // about the app
      "rate_app", // rate this app
      "share_app" // share the app
  ],
… 
  1. For example, if you want to remove Favorites and Share the app subsections, simply delete them from the items_to_display field.
...
 "info_screen_config": {
  "items_to_display": [
      "about_app", // about the app
      "share_app" // share the app
...

The application will look like the following Before and After:

  1. To add the description for the About the App subsection find the following code:
 
 "info_screen_config": {
    "items_to_display": [
      "about_app", // section about the application
    …
    ],
    "about_app_info": {
      "description": {
        "base": "in",
        "localized": {
        "en":"Application description",
        "es":"Descripción de la aplicación"
        }
      },
      "developer": {
        "base": "in",
        "localized": {
          "in":"CleverPunpkin Ltd.",
        "es": "OOO CleverPumpkin"
        }
      },
      "partner_url": {
        "base": "in",
        "localized": {
        "en":"https://www.google.com",
        "es": "https://www.google.es"
        }
      }
    }
},
… 

5. Make changes to the following fields:

  • description — specify the application description (localized for all languages in the application (see localization in the configuration file).
  • developer — add the name of your company (localized, if desired).
  • partner_url — add a link where the user can go to your website, social network, etc.

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Color settings and palette

All colors in the application are automatically generated based on one primary base color. To change the color:

  1. Open the app_config.json file and find the following code:
...  
"style": {
    "base_color": "#7648C5", // base color
   … 
    "palette": "lab" // The principle of generating a palette
  },
... 
  1. In the base_color field, specify the HEX code of the primary base color for the light theme, the entire palette, including colors for the dark theme, will be generated automatically.
  2. In the palette field specify one of the proposed methods of palette generation:
    • hsv: The base color will remain as you entered it (recommended for bright colors).
    • lab or null: The contrast of the base color will be modified (recommended to choose if the base color itself is not very contrasting).

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

It is recommended to build a build with your base color and different palette generation principles for light and dark themes to see which one looks better for your application. Here are the examples of different colors:

 

Element corners settings

Corner rounding is applied to all elements on the screen, including buttons, input fields, icons, and illustrations. To change the corner settings of the elements:

  1. Open the app_config.json file and find the following code:
…   
"style": {
  …
    "corners_type": "sharp", // Corners type (sharp, default, round)
  …
},
… 
  1. In the corners_type field specify one of the offered styles:
sharp
default
round

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Icon style

The icons in the application have corner rounding as mentioned above and also a style. To make changes to the icon’s style:

  1. Open the app_config.json file.
  2. In the style filed find the icons_type parameter:

  "style": {
    …
    "icons_type": "line" // Icon style
},
… 
  1. In the icons_type field, specify one of the icon styles: filled, tint, or line.
filled
tint
line

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Google Maps

To work correctly with maps in an Android application, you need to add the Google Maps key to it, to do this:

  1. Register in Google Cloud Platform Console and create the project in it.
  2. Get an API key for this project (How to get an API key).
  3. Add this key to the field google_maps_api_key in the app_config.json file:

  "constants": {
    …
    "google_maps_api_key": "your_tocken",
    …
},
… 

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Feedback and rating of the application

In order for the user to be able to interact with the “Contact us” and “Rate the app” sections:

1. Open the app_config.json file and find the following code:


  "constants": {
    …
    },
    "feedback_email": "test@test.com",
    …
},
… 

2.  Insert your information into the following fields:

  • feedback_email an email address for users to send feedback after clicking the Contact Us button.

If you are not planning to include these sections in your app,  remove the "feedback_email" from the app_config.json.

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Firebase

You can use Firebase services in the application, for example, for analytics monitoring. To complete this setup:

  1. Register in Firebase in the console.
  2. Create a project there and add your new Android application to it (for more details check Setting up a Firebase project and registering apps).
  3. After adding the application to the project, go to Firebase in the Project settings → General section. 
  4. Find Android apps and download the google-services.json file from there (there will be two different files for debug and release projects). 
  5. Go to travel-app-android-integrators/config and replace the google-services.json file there with the one downloaded from Firebase.

The table with analytics events is located in a separate file – ​​White Label App – Firebase [ENG].

Appodeal advertisements 

Appodeal advertisements can look like this:

If you don’t need advertisements in the application, remove the advertising{ } block with all the values ​​inside it from the app_config.json file.

To add advertising to the application:

1. Register with Appodeal.
2. Open the app_config.json file and find the following code:

…     
"advertising": {
    "appodeal_api_key": "",
    "google_admob_app_id": "",
    "placements": {
        "air_ticket_placement_interstitial": "",
        "air_ticket_placement_banner": "",
        "hotels_placement_interstitial": "",
        "hotels_placement_banner": ""
      }
  },

3. Insert your API key from your Appodeal account into the appodeal_api_key field.

4. For the google_admob_app_id field, insert your AdMob ID from your AdMob account if available. If AdMob is not connected, remove the line entirely from the file.

5. In the placements field, specify where advertising will be displayed:

  • placement_interstitial: Display advertising as a small banner above the search results cards.
  • placement_banner: Display advertising as a full-screen banner when searching for tickets and/or hotels."

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Learn more about Appodeal Placements.

AppsFlyer

With AppsFlyer Onelink in White Label App, you can share a link to the app. You do not need to integrate the AppsFlyer SDK additionally to work with links.

If you want to track attribution and analytics of app link clicks and opens, register with AppsFlyer and add the appsflyer_dev_key to your app_config.json file (find out more in Retrieve the dev key).

If you do not plan to track analytics, remove the appsflyer_dev_key parameter from the file.


  "constants": {
   … 
   "appsflyer_dev_key": null
    …
},
… 

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

Share ticket

From the screen of a particular ticket in the Tickets tab, you can share a screenshot of that ticket as well as a link.

To implement this functionality:

1. Open the app_config.json file and find the following code:


  "constants": {
   … 
   "sharing_data": {
       "sharing_link": "https://www.google.ru",
       "handling_link": "https://www.google.ru"
   },
… 

2. Make changes to the following parameters:

  • sharing_link — insert a link that will be sent along with the screenshot. It can, for example, redirect the user to your website.
  • handling_link — specify the link that will open your application if it is installed, or your website if it is not installed. To do this, you also need to add to your website the ability to open the application using a link to your website (see Web Links). 

If your application doesn't have a Tickets section or you don't need this functionality, the constants{} block can be removed.

If you have finished making changes to the configuration file, be sure to follow the steps above, or proceed to the next setup.

App icon

To change an application icon:

  1. Navigate to travel-app-android-integrators/config/icons.
  2. Find ic_launcher_background.xml and ic_launcher_foreground.xml files. This is an application icon in xml format.
  3. Replace the default icon with your own. It is mandatory to keep the file names "ic_launcher_background.xml" and "ic_launcher_foreground.xml" intact, as the application relies on these specific names. The added icon should be adaptive.

The recommended size and format for the icon can be found in the Technical requirements for adaptive icons for Google Play.

Search screen titles

You can change the headings in the Tickets and Hotels sections.

 

You can add titles in multiple languages if needed. To do this simply open the folder with the needed language two-letter code (see point 1 below).

Note: If the title does not fit on a single line, the text will be wrapped by the word.

Flight search screen title

  1. Open the file travel-app-android-integrators/config/strings/[two-letter language code]/strings.xml file.
  2. Find the search_title parameter: this is the title text displayed on the flight search screen. 
  3. Replace the default text Search cheap flight tickets with your new title.

<!-- MainFlightsFragment -->

<string name="search_title">Search cheap flight tickets</string>
<string name="search_departure">From</string>
<string name="search_arrival">To</string>
<string name="search_departure_date">Departupe</string>
… 

Important: Do not change the name of the "search_title" parameter, only the text stored in it. Otherwise, the application won't be able to find it.

Hotels search screen title

  1. Open the travel-app-android-integrators/config/strings/[two-letter language code]/strings.xml file.
  2. Find the hotel_search_title parameter.
  3. Replace the default text "Search unforgettable hotels" with your new title.

<string name="hotels_search_title">Search unforgettable hotels</string>
<string name="hotels_search_city_or_hotel">City or hotel</string>

Important: Do not change the name of the hotel_search_title parameter, only the text stored in it. Otherwise, the application won't be able to find it.

Input field labels

The Input field label is the text prompt that is displayed in the form fields before the user enters any data:

For Tickets, default texts are "From," "To," "Departure," and "Passengers and class." For Hotels the default text is "City or hotel."

Field labels can be specified in multiple languages if necessary. To do this simply open the folder with the needed language two-letter code (see point 1 below).

Tickets screen input field labels

  1. Open the file travel-app-android-integrators/config/strings/[two-letter language code]/strings.xml
  2. Find the parameters <string name="search_departure">, "<string name="search_arrival"> and <string name="search_departure_date">', which correspond to the texts 'From', 'To' and 'Departure' respectively. Replace the default text prompts with your own.
  3. Replace the default text prompts with your desired values.

<!-- MainFlightsFragment -->

<string name="search_title">Search cheap flights tickets</string>
<string name="search_departure">From</string>
<string name="search_arrival">To</string>
<string name="search_departure_date">Departure</string>
… 

Important: Do not change the parameter names "departure_airport_placeholder", "arrival_airport_placeholder", "dates_placeholder" and "passengers_placeholder". Only modify the text stored within them, as changing the parameter names could prevent the application from locating them.

Hotels screen input field labels

  1. Open the file travel-app-android-integrators/config/strings/[two-letter language code]/strings.xml.
  2. Find the parameter <string name="hotels_search_city_or_hotel">City or hotel</string> = hint text "City or hotel". 
  3. Replace the default text with your desired text.

<string name="hotels_search_title">Search unforgettable hotels</string>
<string name="hotels_search_city_or_hotel">City or hotel</string>

Important: Do not change the parameter name "hotels_search_city_or_hotel". Only modify the text stored within it, as changing the parameter name could prevent the application from locating it.

Background image

By default, the background for Tickets and Hotels tabs is a single-color fill with a vector pattern, based on colors from the generated palette (see Colors settings). But you can add your custom background image instead of a plain fill, for example:

Note! 

  • The background image will be the same for both Tickets and Hotels tabs.
  • The app is designed for vertical orientation, so if you upload a horizontal image, it will stretch vertically and compress horizontally to fit the screen size.

To add your image, place it in the travel-app-android-integrators/config/images folder.

Recommended background image characteristics:

  1. Format: png, jpeg
  2. Size: NO LESS than 1440x3216, since the image will be adjusted to fit the screen of the device from which the user will open the application, therefore, smaller images will be stretched and partially cropped on larger screens.
  3. Aspect Ratio: 16:10

Language (Localization)

By default, the application supports 26 languages. All texts in the application are translated into these languages and are set as default options in the device settings.

All strings used in the application are stored in: travel-app-android-integrators/config/strings/[two-letter language code, standard ISO 639-1]/strings.xml

The base language is located in the folder: travel-app-android-integrators/config/strings/base/strings.xml

IMPORTANT: When making any changes to translations, do not alter the keys (names) of the strings, as doing so may cause the application not to process and display them.

Changing strings in existing languages:

  1. Go to file travel-app-android-integrators/config/strings/[two-letter code of the desired language]/strings.xml
  2. Modify the necessary strings
  3. Open a terminal in Android Studio and enter the command ./gradlew parseConfig and press “Cmd/Ctrl + Enter”

Adding a new language:

  1. Create a copy of one of the folders in travel-app-android-integrators/config/strings
  2. Name the copy in the format: “[two-letter language code, standard ISO 639-1]”
  3. Translate all strings to the appropriate strings.xml inside travel-app-android-integrators/config/strings/[two-letter code of the added language] into the desired language + don’t forget to add basic translations to the configuration file.
  4. Verify that the folder with the new language is located in travel-app-android-integrators/config/strings
  5. After adding a new language, it is also necessary to add it to the main translations in the configuration file.
  6. Open a terminal in Android Studio and enter the command ./gradlew parseConfig and press “Cmd/Ctrl + Enter”

Note: When using Right-to-Left (RTL) localizations, the application will automatically adapt to them, mirroring the interface compared to Left-to-Right (LTR) localizations.

Localization in the Configuration File

You can add translations into different languages for the following titles via a configuration file:

For strings in the configuration file, specify:

  • base – the language (localization) whose translated string will be used if the selected device language is not in the application.
  • localized – translated string for multiple languages, if necessary.

Languages are specified in the format of a two-letter code (ISO 639-1 standard).

Splash Screen

White Label App gives the possibility to add intermediate screens (e.g. onboarding screen). Adding screens is done in navGraph, which is an entity of the navigation library from Google - Jetpack Navigation. The graphs are located in src/main/res/navigation in the project folder.

To add new tabs, you will need to add new destination to navGraph and add the tab to the menu for bottomNavigationView. To add new intermediate screens, add new destinations to navGraph. The destinations of existing screens will be called already on the new screen.

Note that for your Splash Screen, you will need to redo the StartActivity.