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.
Официальная документация на английском, но она отлично описана и я верю что у Вас все получится 🙂

Back to Top
Ads Blocker Image Powered by Code Help Pro

Обнаружен блокировщик рекламы

Мы обнаружили, что вы используете расширения для блокировки рекламы. Пожалуйста, поддержите сайт, отключив блокировщик рекламы.

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker

Powered By
CHP Adblock Detector Plugin | Codehelppro