Создание музыкального приложения с помощью шаблона приложения для Android

Разработка красивого пользовательского интерфейса для приложений Android может занять много времени. Вот некоторые шаги, которые мы обычно выполняем при разработке приложения:

• Мы начинаем мозговой штурм, а затем рисуем (с бумагой и ручкой), как должен выглядеть пользовательский интерфейс. Другими словами, мы делаем каркас приложения.
• Мы создаем фактический дизайн пользовательского интерфейса из каркаса в программном обеспечении для проектирования, таком как Photoshop или Sketch.
• Мы переводим дизайн пользовательского интерфейса в реальный код в Android Studio. Здесь мы кодируем бизнес-логику. Рекомендуется также придерживаться принципов дизайна материалов.

И это только вершина айсберга — разработка приложения — это большая работа! Все эти задачи могут занимать много времени, особенно если вы выполняете их только вы.

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

К счастью, CodeCanyon предлагает широкий спектр красивых шаблонов приложений, чтобы запустить ваш проект мобильного приложения. В этом руководстве я помогу вам начать работу с одним из таких шаблонов, который называется Android Material UI Template 3.0 . Мы собираемся создать музыкальное приложение для дизайна материалов, используя этот шаблон, а также рассмотрим некоторые его полезные функции.

Если музыка будет пищей любви, играйте дальше. — Уильям Шекспир

Предпосылки

Чтобы следовать этому руководству, вам понадобится Android Studio 3.0 или выше.

1. Получить шаблон

Чтобы начать создавать музыкальное приложение, вам понадобится аккаунт в Envato Market. Так что зарегистрируйтесь, если вы этого еще не сделали, и купите Android 3.0 UI Template 3.0 в CodeCanyon. Вы увидите, сколько работы это спасет вас!

После того, как вы успешно приобрели шаблон, его исходный код доступен в виде ZIP-файла, поэтому обязательно загрузите этот ZIP-файл на свой компьютер.

2. Распакуйте файл

Теперь перейдите в папку, в которую был загружен ZIP-файл, и разархивируйте или распакуйте его.

Когда вы войдете в корневую папку и нажмете на папку Project , вы увидите список папок с шаблонами. Вот что у меня есть на компьютере с Windows 10 после распаковки. Обратите внимание, что при покупке этого шаблона у вас есть доступ не только к шаблону музыкального приложения, но и к восьми другим шаблонам (как вы можете видеть на изображении выше).

3. Импортируйте шаблон

Запустите Android Studio 3 и выберите « Файл» > « Создать» > « Импортировать проект» …

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

После успешного импорта появится диалоговое окно обновления плагина Android Gradle. Рекомендуется нажать кнопку « Обновить» , чтобы позволить Android Studio обновить наш плагин Gradle до последней версии ( 3.0.0 ) для нас.

Когда Gradle закончит синхронизацию вашего проекта автоматически, вы столкнетесь с этой ошибкой в ​​Android Studio, потому что мы успешно обновили нашу зависимость Gradle до 3.0.0 .

Чтобы решить эту проблему, посетите файл build.gradle модуля приложения проекта и используйте outputFileName вместо output.outputFile в настройках конфигурации типа сборки выпуска. Убедитесь, что ваш похож на тот, что на скриншоте ниже.

Внутри того же файла build.gradle также сделайте следующее:

• Обновите ваш buildToolsVersion до '26.0.2' .
• Установите для targetVersion и compileSdkVersion значение 26 .
• Убедитесь, что артефакты Android тоже обновлены.

Эти артефакты Android доступны в репозитории Google Maven. Посетите файл build.gradle вашего проекта, чтобы включить его.

Добавляя артефакты, мы научили Gradle, как найти библиотеку. Убедитесь, что вы не забыли синхронизировать свой проект после добавления их.

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

Теперь, если вы запустите проект, вы увидите сообщение об ошибке в Android Studio Logcat.

Чтобы устранить эту ошибку, перейдите в /data/Tools.java и удалите метод getAPIVersion() . Убедитесь, что вы изменили следующие методы (на скриншоте ниже) в своем коде так, чтобы они были такими же, как у нас здесь.

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

Например, если вам не нравится выбор цвета, используемый для шаблона, ничто не мешает вам посетить цвета . xml ресурс и модифицируя их по своему вкусу.

4. Протестируйте приложение

Наконец, вы можете запустить приложение!

Вы можете сказать, что этот музыкальный интерфейс приложения хорошо разработан. По умолчанию выбрана первая вкладка — она ​​показывает список доступных песен. Нажмите на любую из песен и наслаждайтесь музыкой, которая воспроизводится (хотя в приложении доступна только одна песня).

Обратите внимание, что этот шаблон не перечисляет песни, доступные на хост-устройстве. Вместо этого он имеет свои собственные фиктивные данные (для демонстрационных целей). Так что вам нужно кодировать функциональность для перечисления песен на хост-устройстве. Генератор фиктивных классов данных находится по адресу /data/Constant.java .

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

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

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

При переходе к последней вкладке отображаются списки воспроизведения. Здесь вы даже можете добавить новый плейлист, нажав на кнопку «+» на панели инструментов.

Помните, что если вы хотите заработать на этом приложении деньги, размещая рекламу, вы можете легко интегрировать его с AdMob. Чтобы узнать, как интегрировать AdMob с приложением для Android, ознакомьтесь с моим руководством по Envato Tuts + .

• 
  Android SDK
  Как монетизировать ваши приложения для Android с помощью AdMob

Вывод

Шаблоны приложений — это отличный способ запустить ваш следующий проект или научиться чему-то другому. В этой статье показано, как мы быстро создали красивое музыкальное приложение с использованием Android Material UI Template 3.0 на CodeCanyon. Помните, что если вы ищете вдохновение или создаете приложение и вам нужна помощь с определенной функцией, то вы можете найти свой ответ в некоторых из этих шаблонов.

В Envato Market есть сотни других шаблонов приложений для Android, из которых вы можете выбирать. Существуют шаблоны для игр и готовых приложений , а также подробные начальные шаблоны, подобные тому, который мы использовали в этом посте. Так что взгляните, и вы можете сэкономить много работы над своим следующим приложением для Android.

Если вы хотите изучить больше приложений и шаблонов для iOS, ознакомьтесь с некоторыми другими нашими статьями о шаблонах приложений CodeCanyon!

• 
  iOS SDK
  17 лучших шаблонов приложений для iOS 2019 года
  Нона Блэкман
• 
  Мобильная разработка
  10 лучших погодных шаблонов приложений
• 
  Шаблоны приложений
  15 лучших шаблонов приложений Swift
  Нона Блэкман