Learn how to customize the look and feel of your app.
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:
- Save the changes to the file.
- 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. - 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:
- Open the app_config.json file and find the following code:
… |
- 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.
- 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:
… |
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:
- Open the app_config.json file and find the following code:
… |
- To remove the tab delete an unnecessary line from the code. For example, remove airline tickets:
… |
-
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:
- Open the app_config.json file and find the following code:
… |
- In the title field specify the tab title. You can add titles in multiple languages if needed (see localization in the configuration file).
- 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.
- Make similar changes for the second Other tab. If you don't plan to use this section, just delete the code from the file.
- You can also add your own icons for the Other sections. To do this:
- Create a new vector asset in app/src/main/res/drawable and upload the desired image in SVG or PSD format.
- Name the image: ic_other_1 for the first "Other" section and ic_other_2 for the second.
- Copy these XML files to the app/config/icons folder.
- Open the app_config.json file and make sure it contains the lines "icon": "ic_other_1" and "icon": "ic_other_2". If the lines are missing, add them manually.
...
Note! The names ic_other_1 and ic_other_2 must be used, otherwise the application will not be able to find the added icons.
"screens_to_display": [
{
"icon": "ic_other_1",
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:
- Open the app_config.json file and find the following code:
… |
- For example, if you want to remove Favorites and Share the app subsections, simply delete them from the items_to_display field.
... |
The application will look like the following Before and After:
- To add the description for the About the App subsection find the following code:
… |
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:
- Open the app_config.json file and find the following code:
... |
- 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.
- 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:
How to override colors
By default, colors are automatically generated based on the specified base color. To customize the app's colors, you can override them by adding the overridden_color block to the app_config.json file:
"style": {
...
"overridden_color": {
"ta_primary_light": "[#FFFF](<https://mm.cleverpumpkin.ru/cleverpumpkin/channels/project-travel-app#>)", //override color ta_primary_light
"ta_primary_dark": "[#FFFF](<https://mm.cleverpumpkin.ru/cleverpumpkin/channels/project-travel-app#>)", //override color ta_primary_light
...
}
}
In the overridden_color block, specify the color name as the key and the corresponding HEX code as the value. If color overrides are not needed, do not remove the block — simply leave it empty.
You can find color names in the file.
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:
- Open the app_config.json file and find the following code:
… |
- 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:
- Open the app_config.json file.
- In the style filed find the icons_type parameter:
… |
- 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:
- Register in Google Cloud Platform Console and create the project in it.
- Get an API key for this project (How to get an API key).
- Add this key to the field google_maps_api_key in the app_config.json file:
… |
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:
… |
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:
- Register in Firebase in the console.
- Create a project there and add your new Android application to it (for more details check Setting up a Firebase project and registering apps).
- After adding the application to the project, go to Firebase in the Project settings → General section.
- Find Android apps and download the google-services.json file from there (there will be two different files for debug and release projects).
- 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:
… |
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.
… |
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:
… |
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:
- Navigate to travel-app-android-integrators/config/icons.
- Find ic_launcher_background.xml and ic_launcher_foreground.xml files. This is an application icon in xml format.
- 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
- Open the file travel-app-android-integrators/config/strings/[two-letter language code]/strings.xml file.
- Find the search_title parameter: this is the title text displayed on the flight search screen.
- Replace the default text Search cheap flight tickets with your new title.
… |
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
- Open the travel-app-android-integrators/config/strings/[two-letter language code]/strings.xml file.
- Find the hotel_search_title parameter.
- Replace the default text "Search unforgettable hotels" with your new title.
… |
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
- Open the file travel-app-android-integrators/config/strings/[two-letter language code]/strings.xml
- 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.
- Replace the default text prompts with your desired values.
… |
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
- Open the file travel-app-android-integrators/config/strings/[two-letter language code]/strings.xml.
- Find the parameter <string name="hotels_search_city_or_hotel">City or hotel</string> = hint text "City or hotel".
- Replace the default text with your desired text.
… |
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, create a folder white-label-app-android-main/config/images and place your image in it.
Recommended background image characteristics:
- Format: png, jpeg
- 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.
- 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:
- Go to file travel-app-android-integrators/config/strings/[two-letter code of the desired language]/strings.xml
- Modify the necessary strings
- Open a terminal in Android Studio and enter the command ./gradlew parseConfig and press “Cmd/Ctrl + Enter”
Adding a new language:
- Create a copy of one of the folders in travel-app-android-integrators/config/strings
- Name the copy in the format: “[two-letter language code, standard ISO 639-1]”
- 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.
- Verify that the folder with the new language is located in travel-app-android-integrators/config/strings
- After adding a new language, it is also necessary to add it to the main translations in the configuration file.
- 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:
- Application name
- Other tabs titles
- Application description in the About the app section of the application
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).
Intermediate screens and tabs
White Label App allows you to add intermediate screens (such as an onboarding screen).
To add new screens and tabs, navGraph, an entity of Google's navigation library, Jetpack Navigation, is used. Graphs are located in the project at the path: src/main/res/navigation.
-
Adding new tabs.
- In navGraph add a new destination.
- In menu add a tab for bottomNavigationView.
-
Adding intermediate screens.
- Add new destinations to navGraph. Existing screens will be called on the new intermediate screen.
Splash Screen
You can replace the default Splash Screen with your own image.
Image requirements:
- Must be raster (e.g., .png or .webp).
- Must not be vector (e.g., .svg или .xml).
How to create a custom Splash screen:
1. If you want Splash Screen to look the same in light and dark themes, add the splash_theme.xml file to the app/src/main/res/values folder. If you want to customize the dark theme, follow the instructions at the bottom of this section.
2. If you want to change the color of statusBar and navigationBar, add the following lines to the attribute block:
<item name="android:statusBarColor">#ffffff</item>
<item name="android:navigationBarColor">#ffffff</item>
In this case, the statusBar and navigationBar will be in white color, but you can replace the white color with any other color of your choice.
3. In the app/src/main/res/drawable folder, add the screen_splash.xml file that describes the screen background. You can specify any color from the application palette:
<item android:drawable="@color/ta_primary_disable_light" />
4. Add your image to the app/src/main/res/drawable folder. Avoid spaces in the file name.
To adapt the image for different screen resolutions, use special folders: drawable-hdpi, drawable-mdpi, drawable-ldpi.
5. In screen_splash.xml, specify the name of your image in the src parameter:
<item>
<bitmap
android:gravity="center"
android:src="@drawable/name_of_your_file" />
</item>
Use the gravity attribute to adjust the position of the image on the screen.
6. To get your Splash Screen working, in the AndroidManifest.xml file (app/src/main folder), find the StartActivity block and add the following line to it:
<activity
android:name="${custom_app_id}.StartActivity"
android:exported="true"
android:noHistory="true"
android:screenOrientation="portrait"
android:theme="@style/SplashTheme"
android:windowSoftInputMode="adjustResize"
tools:ignore="LockedOrientationActivity">
To support the dark theme:
- Create an app/src/main/res/values-night folder.
- Duplicate the steps to create a theme and add an image (steps 1, 2, and 4), specifying colors and resources for the dark theme.