WebView приложение для Android

Android System Webview — это системное приложение, позволяющее открывать ссылки (сайты) и другой веб-контент внутри приложений.
Каждый Android смартфон имеет встроенное приложение Android System Webview, что позволяет запускать любой HTML контент в своем приложении. Написать эту статью меня побудило то что в интернете практически нет нормальных мануалов для быстрого создания своего приложения с базовыми знаниями у меня они ниже плинтуса Android разработчика. Поиск в мировой паутине привел меня на сайт где можно купить уже готовую «шкурку» для своего приложения с множеством интересных дополнений.
Вот ссылка на этот сайт https://codecanyon.net/item/universal-android-webview-app/8431507
После покупки лицензии я получил готовый проект который можно легко импортировать в Android Studio и создать свое приложение за несколько часов.
Приступим

  • Скачать и установить Android Studio. Мануалов по установке в интернете много, да и ставится все нажатием кнопки Next. Потому углубляться не буду. Ссылка на скачивание https://developer.android.com/studio
    29 долларов сумма небольшая, потому поддержите разработчика если понравится программа. А пока что можете использовать мой проект
  • Теперь необходимо импортировать проект в Android Studio
  • В зависимости от мощности Вашего устройства Android Studio начинает «шуршать» и подтягивает файлы формируя проект. Теперь нужно создать виртуальную машину чтобы видеть все изменения сразу. Можно использовать свой Android телефон в режиме отладчика, но у меня почему это не завелось. Нажимаем на Project чтобы открыть структуру проекта. Затем добавляем виртуальное устройство нажатием кнопки No Device > AVD manager. Жмем Create Virtual Device и выбираем нужное устройство со списка (чем больше Resolution тем больше нагрузки на Ваш ПК). Раньше я думал что 10 ГБ ОЗУ это много, но после запуска Android Studio быстро поменял свое мнение. После выбора устройства жмем кнопку Next
  • Выбираем нужную версию Android и нажимаем Download
  • Начнется скачивание необходимых компонентов, после окончания жмем Finish
  • Вы можете использовать несколько версий Android для тестирования, но одновременно только одну версию.Выбираем нужную и нажимаем Next
  • Для запуска виртуальной машины зажмите сочетание клавиш Shift+F10. Если все ок, увидите виртуальное устройство
  • Чтобы разобраться в структуре проекта откройте файл documentation.html который находится в проекте который Вы скачали с этого сайта. В результате появится окно со следующим содержимым
  • Теперь идем пошагово. Первый пункт это Import, его мы уже прошли когда импортировали проект
  • Шаг второй Set Purchase Code. Откройте файл по пути  mobile/src/main/java/com/robotemplates/webviewapp/WebViewAppConfig.java и введите код лицензии который Вы получили при покупке в поле PURCHASE_CODE. Думаю Вы сейчас ничего не покупали, потому можете в это поле ввести любое значение
  • Шаг третий Rename Application ID. Нужно присвоить приложению уникальный ID который будет добавлен в PlayMarket. Если будете делать публикацию в Playmarket — придумайте оригинальный ID, если нет — оставьте значение по умолчанию. Чтобы проще понимать что такое ID посмотрите изображение ниже.

Переходим по пути mobile/build.gradle и задаем значение applicationId. После этого нажимаем Sync Now чтобы синхронизировать ID с другими файлами

Переходим к файлу mobile/google-services.json и вводим значение ID с предыдущего шага для поля package_name. Снова жмем Sync Project

  • Шаг четвертый Rename Application Name. Снова жмем Shift+F10, и видим что программа запустилась. Но если открыть список запущенных приложение то она имеет заводское значение. Это нужно исправить

Переходим по пути mobile/src/main/res/values/strings.xml и изменяем значение с “WebView App” на название нашего приложения. В поле app_name и navigation_header_title strings нужно ввести значения.Затем перезапустить приложение на телефоне что увидеть изменения.

В результате название становится правильным

  • Теперь нужно назначить изображение лаунчера для нашего приложения. Для этого переходим в mobile/src/main/res (правый щелчок мышки) , New > Image Asset

Указываем путь к изображению, затем Trim > Yes и ползунком отрегулируйте положение изображения. Затем жмем Next > Finish

В результате получим правильный лаунчер с изображением птицы Зяблика

При запуске приложения показывается заводская картинка, это можно поправить. Проследуйте на своем ПК где Вы импортировали проект по пути mobile/src/main/res/drawable-nodpi/splash.png.

Подмените изображение splash.png на нужное. Перезапустите приложение на телефоне и в результате увидите новое изображение при запуске

  • Шаг шестой Choose Color Theme. В приложении можно выбрать одну с десяти цветовых схем. Чтобы изменить это следуйте по пути mobile/src/main/AndroidManifest.xml. Для примера выбрал Red, затем следует перезапустить приложение. Верхнее меню стало красного цвета
  • Шаг седьмой Setup Navigation and Web Pages. Вы можете настроить боковое выпадающее меню, и задать для него ссылки.
    Перейдите по пути mobile/src/main/res/values/navigation.xml
    Количество названий должно соответствовать количеству ссылок, и иметь такую же последовательность.

Вы можете задать свои значки, они находятся по пути webviewapp-2.7.0\mobile\src\main\res\drawable-xxxx на HDD (или редактировать через Android Studio).

Остальные шаги не описывал, поскольку они индивидуальные и статья выйдет слишком громоздкая. Даже с этими минимальными настройками Вы получите полноценно работающее приложение которое в дальнейшем можно опубликовать в PlayMarket.
Официальная документация на английском, но она отлично описана и я верю что у Вас все получится 🙂

Наверх