Настройка и кастомизация 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. Сделайте аналогичные изменения для второго раздела «Другое». Если вы не планируете его использовать — удалите его код из файла конфигурации.

Для разделов Другое также можно добавить свои иконки. Для этого перейдите в папку travel-app-android-integrators/modules/config/src/main/res/drawable и:

  • Для первого раздела “Другое” – замените дефолтную иконку ic_default_other_1.xml на свою
  • Для второго раздела “Другое” – также замените дефолтную иконку ic_default_other_2.xml на свою

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

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

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

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

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

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

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 (напр., для мониторинга аналитики). Для этого:

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

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

  1. Скачанные файлы переименуйте в GoogleService-Info-Debug.plist и GoogleService-Info-Release.plist соответственно.
  2. Перейдите в integrators-travel-app-ios-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{} можно удалить.

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

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

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

  • ic_launcher_background.xml
  • ic_launcher_foreground.xml

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

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

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

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

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

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

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

1. Откройте файл travel-app-android-integrators/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. Откройте файл travel-app-android-integrators/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. Откройте файл travel-app-android-integrators/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. Откройте файлtravel-app-android-integrators/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", а только текст, который в ней хранится, поскольку иначе приложение не сможет ее найти

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

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

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

 

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

Для добавления своей картинки нужно добавить ее в travel-app-android-integrators/config/images.

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

  1. Формат: png, jpeg
  2. Размер: не менее 1440х3216, поскольку изображение будет подгоняться по размеру экрана девайса, с которого пользователь будет открывать приложение, следовательно, изображения меньшего размера будут растягиваться и частично обрезаться на больших экранах. 
  3. Соотношение сторон: 16:10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для добавления новых табов нужно будет добавить в navGraph новые destination и добавить таб в menu для bottomNavigationView.

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

Обратите внимание, что для своего Splash Screen надо будет переделать StartActivity.