Настройка и кастомизация White Label App для Android

White Label App позволяет настроить внешний вид приложения так, чтобы оно выглядело уникально и привлекало пользователей. Это важно, потому что первое впечатление от дизайна влияет на интерес пользователей. Уникальный стиль подчеркивает особенности вашего бренда и способствует долгосрочным отношениям с аудиторией, а также повышает шансы на прохождение проверки Google Play.

Обратите внимание! Большинство изменений осуществляются в файле app_config.json. После внесения изменений обязательно cохраните изменения в файле, выполните в терминале Android Studio команду ./gradlew parseConfig и пересоберите и запустите сборку.

Название приложения

Вы можете задать название приложения, которое будет отображаться пользователям. Для этого:

1. Откройте файл app_config.json и найдите следующий код:

… 
    "display_name": {
      "base": "en",    // 
      "localized": {
        "en": "Travel App EN Git", // название на английском
        "ru": "Travel App RU Git" // название на русском
      }
    }
…

2. В поле base укажите основной язык названия. Этот язык будет использоваться, если выбранного на девайсе пользователя языка не будет в вашем приложении. Например, у пользователя в настройках девайса выбран тайский язык, но отдельного названия на нём у вас нет, тогда для пользователя отобразится название на основном языке.

3. Вы можете указать название приложения на нескольких языках, для этого укажите код языка и название на указанном языке (см. добавление языков в файл конфигурации).

Например, в приложении нужны языки английский, испанский и французский. Основной язык – испанский.

… 
    "display_name": {
      "base": "es",    // основной язык – испанский
      "localized": {
        "en": "Voyages", // название на английском
        "es": "Los viajes", // название на испанском
        "fr": "Les voyages" // название на французском
      }
    }
…

Если вы закончили вносить изменения в файл конфигурации, не забудьте выполнить указанные выше шаги, или перейдите к следующей настройке.

Выбор и настройка разделов в таббаре

В приложении может быть от 2 до 5 разделов в таббаре (элемент интерфейса, который показывает какие разделы существуют в приложении, и в каком из них находится пользователь на данный момент). Например:

Настройка разделов Авиабилеты/Отели

1. Откройте файл app_config.json

2. Для того чтобы добавить или убрать разделы с поиском авиабилетов и отелей, найдите в файле следующий код:

  "white_label_config": {
    "screens_to_display": [
      {
        "type": "flights" //таб авиабилетов
      },
      {
        "type": "hotels" // таб отелей
      }
    ]
  }

3. Чтобы вкладка не отображалась, достаточно удалить нужную строку. Например, убираем авиабилеты:

  "white_label_config": {
    "screens_to_display": [
      {
        "type": "hotels" // таб отелей
      }
    ]
  }

Останется только раздел Отели и раздел Информация:

Настройка раздела Другое

Другое – раздел, при переходе в который будет открываться указанная для него ссылка в формате WebView (веб-страница в мобильном приложении). Например, в него можно добавить ссылку на поиск машин для аренды.

Для разделов Другое вы можете использовать партнёрские ссылки из личного кабинета Travelpayouts. Тогда, вы будете получать вознаграждения за покупки, совершенные после перехода по этим ссылкам. Подробней об этом читайте в статье Как добавить партнёрские ссылки на другие бренды в White Label App.

В приложении можно добавить максимум два таких раздела. Для этого:

1. Откройте файл app_config.json и найдите следующий код:

"white_label_config": {
    "screens_to_display": [
      ... 
      {
        "type": "other", // таб другое
        "parameters": {
          "icon": "ic_other_1", // иконка раздела “другое”
          "title": {  // название раздела
            "base": "en",
            "localized": {
              "en": "Other",
              "ru": "Другое"
            }
          },
          "url": {  // ссылка
            "base": "en",
            "localized": {
              "en": "https://www.google.com",
              "ru": "https://www.google.ru"
            }
          }
        }
      }
    ]
  }
}

2. В параметре title укажите название раздела, на нескольких языках, если это необходимо (см. добавление языков в файл конфигурации).

3. В параметре url укажите ссылку, которая будет открываться, когда пользователь будет переходить в этот раздел. Если в приложении необходимо поддерживать несколько разных языков, то нужно добавить ссылки для разных локализаций.

4. Сделайте аналогичные изменения для второго раздела «Другое». Если вы не планируете его использовать — удалите его код из файла конфигурации.

Для разделов Другое также можно добавить свои иконки. Для этого:

Cоздайте новый vector asset в app/src/main/res/drawable и загрузите нужное изображение в формате svg или psd.
Задайте имя изображению: ic_other_1 для первого раздела "Другое" и ic_other_2 для второго.
Скопируйте эти xml файлы в папку app/config/icons
Откройте файл app_config.json и убедитесь, что он содержит строки "icon": "ic_other_1" и "icon": "ic_other_2". Если строк нет, добавьте их вручную.

... 
  "screens_to_display": [
    {
      "icon": "ic_other_1",

Обратите внимание! Названия ic_other_1 и ic_other_2 нужно использовать обязательно, иначе приложение не сможет найти добавленные иконки.

Настройка раздела Информация

Информация – в этом разделе находятся избранное, региональные настройки, настройка отображения цен, ссылка на пользовательское соглашение и т.п.

Подразделы Избранное, О приложении, Оценить приложение и Поделиться приложением являются опциональными и их можно убирать/добавлять.
Подразделы Региональные настройки, Отображение цен и Конфиденциальность убрать нельзя.

Раздел Информация нельзя удалить, но вы можете внести изменения в подразделы внутри, для этого:

1. Откройте файл app_config.json и найдите следующий код:

…  
 "info_screen_config": {
    "items_to_display": [
      "favorites", // избранное
      "about_app", // о приложении
      "rate_app", // оценить приложение
      "share_app" // поделиться приложением
    ]
…

2. Чтобы подраздел не отображался, достаточно удалить ненужную строку. Например, убираем Избранное и Оценить приложение:

…  
 "info_screen_config": {
    "items_to_display": [
      "about_app", // о приложении
      "share_app" // поделиться приложением
    ],

…

Наглядно приложение будет выглядеть следующим образом До и После:

3. Чтобы добавить описание приложения для подраздела О приложении, найдите следующий код

…  
 "info_screen_config": {
    "items_to_display": [
      "about_app", // раздел о приложении
     … 
    ],
    "about_app_info": {
      "description": {
        "base": "en",
        "localized": {
          "en": "Application description",
          "ru": "Описание приложения"
        }
      },
      "developer": {
        "base": "en",
        "localized": {
          "en": "CleverPunpkin Ltd.",
          "ru": "OOO CleverPumpkin"
        }
      },
      "partner_url": {
        "base": "en",
        "localized": {
          "en": "https://www.google.com",
          "ru": "https://www.google.ru"
        }
      }
    }
  },
…

4. В поле description укажите описание приложения (локализованное для всех языков в приложении (см. добавление языков в файл конфигурации);

5. В поле developer добавьте название вашей компании (локализованное, при необходимости);

6.В поле partner_url добавьте ссылку, по которой пользователь сможет перейти на ваш сайт, социальную сеть и т.п

Например, подраздел может выглядеть вот так:

Настройка цветов и палитры

Все цвета в палитре в приложения генерируются автоматически на основе одного базового primary цвета. Для того, чтобы изменить цвет:

1. Откройте файл app_config.json и найдите следующий код:

...  
 "style": {
    "base_color": "#7648C5", // базовый цвет
    … 
    "palette": "lab" // принцип генерации палитры
  },
...

2. В поле base_color укажите HEX код базового цвета для светлой темы (вся палитра, включая цвета для темной темы, сгенерируется автоматически).

3. В поле palette укажите один из предлагаемых способов генерации палитры: hsv, lab или null

hsv – базовый цвет останется таким, каким он был вами введен (рекомендуется для ярких цветов)
lab или null – контрастность базового цвета будет модифицироваться (рекомендуется выбирать, если базовый цвет сам по себе неконтрастный)

Рекомендуется собрать сборку с вашим базовым цветом и разными способами генерации палитры + для светлой и тёмной тем, чтобы посмотреть, с какой ваше приложение будет смотреться лучше. Примеры разных цветов:

Настройки скруглённости элементов

Скруглённость применяется ко всем элементам на экране, включая кнопки, поля ввода, иконки и иллюстрации для 0-дат.

Для того, чтобы изменить настройки скруглённости:

1. Откройте файл app_config.json и найдите следующий код:

…   
"style": {
   … 
    "corners_type": "sharp", //скругления (sharp, default, round)
   …
  },
…

2. В поле corners_type укажите нужный стиль:

sharp
default
round

Стиль иконок

У иконок в приложении можно изменить не только скруглённость, но и стиль. Для этого::

1. Откройте файл app_config.json и найдите следующий код:

… 
  "style": {
    … 
    "icons_type": "line" //стиль иконок
  },
…

2. В поле icons_type укажите один из стилей иконок: filled, tint или line.

filled
tint
line

Google Maps

Для корректной работы с картами в Android-приложении необходимо добавить в него ключ Google Maps, для этого:

1. Зарегистрируйтесь в Google Cloud Platform Console и создайте в нём проект;

2. Получите API ключ для этого проекта (Как получить ключ API);

3. Откройте файл app_config.json и добавьте этот ключ в поле google_maps_api_key.

… 
  "constants": {
    … 
    "google_maps_api_key": "ARzaSyLpnAYkGdFS66Sedzv-oNy8t5ykbxgx8Jk",
    … 
  },
…

Обратная связь и оценка приложения

Для того, чтобы у пользователя была возможность взаимодействовать с разделами Связаться с нами и Оценить приложение:

1. Откройте файл app_config.json и найдите следующий код:

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

2. В поле feedback_email укажите адрес электронной почты, на который будет отправлено письмо после клика по кнопке Связаться с нами.

3. Удалите строку "appstore_id": "", поскольку она нужна только для iOS приложения.

Важно! Если данные разделы не включены, то строку "feedback_email": "test@test.com" нужно удалить из файла конфигурации.

Firebase

В приложении можно использовать сервисы Firebase (напр., для мониторинга аналитики). Для этого:

Зарегистрируйтесь в Firebase в консоли;
Создайте там проект и добавьте в него свое новое приложение для Android (Setting up a Firebase project and registering apps);
После добавления приложения в проект, перейдите в Firebase в раздел Project settings – General, найдите там Android apps и скачайте оттуда файл google-services.json (для debug и release проектов будет 2 разных файла);
Перейдите в white-label-app-android-main/config и замените там файл google-services.json на тот, который были скачан из Firebase.

Таблица с событиями аналитики находится в отдельном файле – White Label App – Firebase [RU].

Скачанные файлы переименуйте в GoogleService-Info-Debug.plist и GoogleService-Info-Release.plist соответственно.
Перейдите в white-label-app-android-main/Supporting Files и замените там файлы GoogleService-Info-Debug.plist и GoogleService-Info-Release.plist на те, которые были скачаны из Firebase.

Реклама Appodeal

Если в приложении не нужна реклама, то нужно полностью удалить блок advertising{}, со всеми значениями внутри него.

Реклама может выглядеть следующим образом:

Чтобы добавить рекламу в приложение:

1. Зарегистрируйтесь в Appodeal.

2. Откройте файл app_config.json и найдите следующий код:

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

4. В поле appodeal_api_key вставьте ваш API ключ из аккаунта в Appodeal.

5. В поле google_admob_app_id вставьте ваш ID из аккаунта AdMob, если он есть (см. Find your app IDs & ad unit IDs).
Если AdMob не подключен, то нужно полностью убрать из файла строку "google_admob_app_id": ""

6. В поле placements укажите места в приложении, в которых будет отображаться реклама:

placement_interstitial – показывать рекламу в виде небольшого баннера над карточками с результатами поиска
placement_banner – реклама в виде полноэкранного баннера, который появляется при запуске поиска билетов и/или отелей

Подробнее про Appodeal Placements.

AppsFlyer

С помощью AppsFlyer Onelink в White Label App реализована возможность поделиться ссылкой на приложение. Дополнительно для работы со ссылками интегрировать SDK AppsFlyer не нужно.

Если вы хотите отслеживать атрибуцию и аналитику переходов и открытий приложения по ссылкам, зарегистрируйтесь в AppsFlyer и добавьте в файл конфигурации app_config.json ключ appsflyer_dev_key (см. Как получить ключ).

Если вы не планируете отслеживать аналитику, удалите параметр appsflyer_dev_key из файла.

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

Поделиться билетом

С экрана конкретного билета в разделе Билеты можно поделиться картинкой-скриншотом данного билета, а также ссылкой.

Чтобы реализовать этот функционал:

1. Откройте файл configuration.json и найдите следующий код:

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

2. Внесите изменения в следующие параметры:

sharing_link — укажите ссылку, которая будет отправлена вместе со скриншотом. Она может, например, перенаправлять пользователя на ваш сайт.
handling_link — укажите ссылку, по которой будет открываться ваше приложение, если оно установлено, или ваш сайт, если оно не установлено. Для этого также нужно на ваш сайт добавить возможность открывать приложение по ссылке на ваш сайт (см. инструкцию Web Links).

Если в вашем приложении нет раздела Билеты или вам не нужна данная функциональность, то блок constants{} можно удалить.

Иконка приложения

Иконка приложения хранится в white-label-app-android-main/config/icons в формате двух xml файлов:

ic_launcher_background.xml
ic_launcher_foreground.xml

По умолчанию используется дефолтная c белым фоном. Вы можете изменить её на свою, для этого достаточно заменить файлы, при этом обязательно нужно оставить названия ic_launcher_background.xml и ic_launcher_foreground.xml, поскольку иначе приложение не сможет их найти.

Добавляемая иконка должна быть адаптивной. Рекомендуемый размер и формат иконки можно посмотреть здесь: Технические требования к адаптивным иконкам для Google Play.

Заголовки экранов поиска

Вы можете изменить заголовки форм для разделов Авиабилеты и/или Отели:

Заголовки можно указать на нескольких языках, если это необходимо. Для этого достаточно выбрать файл из папки с кодом нужного языка (см. пункт 1 ниже).

Важно! Если заголовок не будет помещаться полностью в одну строку, то текст будет переноситься по словам.

Заголовок формы поиска авиабилетов

1. Откройте файл white-label-app-android-main/config/strings/[двухбуквенный код языка]/strings.xml

2. Найдите в нём строку <string name="search_title">Поиск недорогих авиабилетов</string> – это текст заголовка, который отображается на экране поиска авиабилетов.

… 
<!-- MainFlightsFragment -->

<string name="search_title">Поиск недорогих авиабилетов</string>
<string name="search_departure">Откуда</string>
<string name="search_arrival">Куда</string>
<string name="search_departure_date">Когда</string>
…

3. Замените дефолтный текст Поиск недорогих авиабилетов на свой новый заголовок.
Важно не менять название строки "search_title", а только текст, который в ней хранится, поскольку иначе приложение не сможет ее найти.

Заголовок формы поиска отелей

1. Откройте файл white-label-app-android-main/config/strings/[двухбуквенный код языка]/strings.xml

2. Найдите в нём строку <string name="hotels_search_title">Поиск интересных отелей</string> – это текст заголовка, который отображается на экране поиска отелей.

…
<string name="hotels_search_title">Поиск интересных отелей</string>
<string name="hotels_search_city_or_hotel">Город или отель</string>
…

3. Замените дефолтный текст Поиск интересных отелей на свой новый заголовок.

Важно не менять название строки "hotels_search_title", а только текст, который в ней хранится, поскольку иначе приложение не сможет ее найти

Подписи к полям ввода

В поле ввода в приложении до того, как пользователь введет какие-то данные отображается текст-подсказка. Для поиска авиабилетов тексты по умолчанию Откуда, Куда и Когда, а для отелей — Город или отель:

Вы можете изменить подписи к полям и указать их на нескольких языках, если это необходимо. Для этого достаточно выбрать файл из папки с кодом нужного языка (см. пункт 1 ниже).

Подписи полей формы поиска авиабилетов

1. Откройте файл white-label-app-android-main/config/strings/[двухбуквенный код языка]/strings.xml

2. Найдите в нём строки <string name="search_departure">, "<string name="search_arrival"> и <string name="search_departure_date"> — это тексты Откуда, Куда и Когда соответственно.

… 
<!-- MainFlightsFragment -->

<string name="search_title">Поиск недорогих авиабилетов</string>
<string name="search_departure">Откуда</string>
<string name="search_arrival">Куда</string>
<string name="search_departure_date">Когда</string>
…

3. Замените дефолтные текст на свои.
Важно не менять названия строк "departure_airport_placeholder", "arrival_airport_placeholder", "dates_placeholder" и "passengers_placeholder", а только текст, который в них хранится, поскольку иначе приложение не сможет их найти

Подписи полей формы поиска отелей

1. Откройте файл white-label-app-android-main/config/strings/[двухбуквенный код языка]/strings.xml

2. Найдите в нём строку <string name="hotels_search_city_or_hotel">Город или отель</string> — это текст-подсказка Город или отель.

…
<string name="hotels_search_title">Поиск интересных отелей</string>
<string name="hotels_search_city_or_hotel">Город или отель</string>
…

3. Замените дефолтный текст на свой.
Важно не менять названия строки "hotels_search_city_or_hotel", а только текст, который в ней хранится, поскольку иначе приложение не сможет ее найти

Фон-картинка

Для разделов Авиабилеты и Отели по умолчанию фоном будет использоваться однотонная заливка с векторным рисунком, на основе цветов из сгенерированной палитры (см. Настройка цветов). Вместо однотонной заливки можно добавить фоновую картинку.

Вместо однотонной заливки можно добавить фоновую картинку. Такая картинка будет одинаковой для разделов Авиабилеты и Отели, например:

Приложение рассчитано на вертикальную ориентацию, поэтому, если загрузить горизонтальную картинку, то она растянется по вертикали, а по горизонтали края обрежутся по размерам экрана.

Для добавления изображения создайте папку white-label-app-android-main/config/images и разместите в ней свою картинку.

Язык приложения

По умолчанию приложение поддерживает 26 языков. Все тексты в приложении переведены на них, они же будут по умолчанию предлагаться в настройках приложения на устройстве.

В приложении все используемые в нём переводы хранятся в: white-label-app-android-main/config/strings/[двухбуквенный код языка, стандарт ISO 639-1]/strings.xml.

Базовый язык находится в папке: white-label-app-android-main/config/strings/base/strings.xml.

Важно: При любом изменении переводов, не меняйте ключи (названия) строк, поскольку иначе они не обработаются и не отобразятся приложением.

Изменение строк в уже существующих языках:

1. Перейдите в файл white-label-app-android-main/config/strings/[двухбуквенный код нужного языка]/strings.xml;

2. Измените необходимые строки;

3. Открой терминал в Android Studio (Terminal) и введите команду ./gradlew parseConfig и нажмите “Cmd/Ctrl + Enter”

Добавление нового языка:

1. Создайте копию одной из папок в white-label-app-android-main/config/strings

2. Копию назовите в формате: “[двухбуквенный код языка, стандарт ISO 639-1]”

3. Переведите все строки в соответствующем strings.xml внутри white-label-app-android-main/config/strings/[двухбуквенный код добавленного языка] на нужный язык. Не забудьте добавить основные переводы в файл конфигурации.

4. Поверьте, что папка с новым языком находится в white-label-app-android-main/config/strings

5. После добавления нового языка необходимо также добавить его в основные переводы в файл конфигурации

6. Откройте терминал в Android Studio (Terminal) и введите команду ./gradlew parseConfig и нажмите “Cmd/Ctrl + Enter”

Обратите внимание! При использовании Right-to-Left (RTL) локализаций приложение будет автоматически адаптироваться под них, и интерфейс “перевернется” зеркально, в отличии от LTR (изменится направление иконок, порядок разделов и т.п.).

Как добавить переводы на другие языки в приложении

Через файл конфигурации можно добавить переводы на разные языки для следующих названий:

Название приложения;
Названия разделов Другое;
Описание приложения в разделе О приложении.

Для этого в файле конфигурации укажите:

base – язык (локализация), перевод строки на который будет использоваться, если выбранного на девайсе языка нет в приложении.

localized – перевод строки для нескольких языков, если это необходимо

Языки указываются в формате двухбуквенного кода (стандарт ISO 639-1).

Добавление промежуточных экранов и новых табов

White Label App позволяет добавлять промежуточные экраны (например, экран онбординга).

Для добавления новых экранов и табов используется navGraph, сущность библиотеки навигации от Google – Jetpack Navigation. Графы находятся в проекте по пути: src/main/res/navigation.

Добавление новых табов.
- В navGraph добавьте новые destination.
- В menu добавить таб для bottomNavigationView.
Добавление промежуточных экранов.
- Добавьте новые destination в navGraph. Существующие экраны будут вызываться на новом промежуточном экране.

Экран загрузки (Splash Screen)

Вы можете заменить дефолтный Splash Screen на своё изображение.

Требования к изображениям:

Должно быть растровым (например, .png или .webp).
Не должно быть векторным (например, .svg или .xml).

Шаги настройки:

1. Если вы хотите, чтобы Splash Screen выглядел одинаково в светлой и тёмной теме, добавьте файл splash_theme.xml в папку app/src/main/res/values.

2. Если нужно изменить цвет statusBar и navigationBar, добавьте следующие строки в блок атрибутов:

<item name="android:statusBarColor">#ffffff</item>
<item name="android:navigationBarColor">#ffffff</item>

В данном случае statusBar и navigationBar будут покрашены в белый цвет, но вы можете заменить белый цвет на любой другой по вашему выбору.

3. В папку app/src/main/res/drawable добавьте файл screen_splash.xml, который описывает фон экрана. Вы можете указать любой цвет из палитры приложения:

<item android:drawable="@color/ta_primary_disable_light" />

4. Добавьте своё растровое изображение (например, формата .png или .webp) в папку app/src/main/res/drawable. Избегайте пробелов в названии файла.
Чтобы адаптировать изображение для разных разрешений экранов, используйте специальные папки: drawable-hdpi, drawable-mdpi, drawable-ldpi.

5. В screen_splash.xml укажите название вашего изображения в параметре src:

<item>
    <bitmap
        android:gravity="center"
        android:src="@drawable/имя_вашего_файла" />
</item>

Используйте атрибут gravity, чтобы настроить положение изображения на экране.

6. Подключение Splash Screen.

В файле AndroidManifest.xml (папка app/src/main) найдите блок StartActivity и добавьте в него следующую строчку:

<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">

Для поддержки тёмной темы:

Создайте папку app/src/main/res/values-night.
Продублируйте действия по созданию темы и добавлению изображения (пункты 1, 2 и 4), указывая цвета и ресурсы для ночной темы.

Название приложения

Выбор и настройка разделов в таббаре

Настройка разделов Авиабилеты/Отели

Настройка раздела Другое

Настройка раздела Информация

Настройка цветов и палитры

Настройки скруглённости элементов

Стиль иконок

Google Maps

Обратная связь и оценка приложения

Firebase

Реклама Appodeal

AppsFlyer

Поделиться билетом

Иконка приложения

Заголовки экранов поиска

Заголовок формы поиска авиабилетов

Заголовок формы поиска отелей

Подписи к полям ввода

Подписи полей формы поиска авиабилетов

Подписи полей формы поиска отелей

Фон-картинка

Рекомендуемые характеристики картинки для фонового изображения:

Язык приложения

Изменение строк в уже существующих языках:

Добавление нового языка:

Как добавить переводы на другие языки в приложении

base – язык (локализация), перевод строки на который будет использоваться, если выбранного на девайсе языка нет в приложении.

Добавление промежуточных экранов и новых табов

Экран загрузки (Splash Screen)

Шаги настройки: