Как добавлять в Android проект сторонние компоненты через Gradle

Для Android проект написано много сторонних компонентов. Как их подключать в своем проекте? В статье об одном из способов на примере подключения Fancybuttons.

📖 Содержание ⬇️

Содержание

• Сборники компонентов
• Проблема
• Создание проекта
• Подключение библиотеки
• Использование добавленного компонента

Сборники компонентов

https://snowdream.github.io/awesome-android/

https://android-arsenal.com/

Проблема

Например, вы захотели себе в проект добавить Fancybuttons — кнопки с закругленными углами:

Рисунок 1 — Библиотека Fancybuttons

Но в разделе установки компонента написана только одна строчка:

Рисунок 2 — Инструкция по установке компонента

Что делать и как устанавливать? Куда копировать файлы библиотеки и как? А всё на самом деле просто.

Создание проекта

Создадим простой проект Android.

Создание Android проекта

Рисунок 3 — Создание нового проекта

Рисунок 4 — Выбор типа активности

Рисунок 5 — Настройка проекта

Подключение библиотеки

Для подключения библиотеки будет нужен Интернет!

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

Откройте файл build.gradle (Module: app):

Рисунок 6 — Файл build.gradle

В файле найдите раздел dependencies. И просто напишите там ту строчку, которая была в разделе установки Installation библиотеки:

implementation 'com.github.medyo:fancybuttons:1.9.1'

Рисунок 7 — Установка компонента

Потом нажмите Sync now для синхронизации библиотеки. То есть Android Studio сама скачает нужные файлы добавленной библиотеки.

Всё, установка компонента закончена!

Использование добавленного компонента

После окончания синхронизации вы можете полноценно использовать компонент, как расписано в разделе, например, Usage в документации компонента.

Перейдем в файл разметки activity_main.xml. Там разметку типа ConstraintLayout поменяем на LinearLayout (исключительно для простоты примера):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >

</LinearLayout>

Добавим в качестве атрибута в этот LinearLayout следующую строчку (это по документации компонента):

xmlns:fancy="http://schemas.android.com/apk/res-auto"

И внутрь этой разметки вставим код кнопки из документации:

<mehdi.sakout.fancybuttons.FancyButton
    android:id="@+id/btn_spotify"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="10dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="10dp"
    fancy:fb_borderColor="#FFFFFF"
    fancy:fb_borderWidth="1dp"
    fancy:fb_defaultColor="#7ab800"
    fancy:fb_focusColor="#9bd823"
    fancy:fb_fontIconResource="&#xf04b;"
    fancy:fb_iconPosition="left"
    fancy:fb_radius="30dp"
    fancy:fb_text="SHUFFLE PLAY"
    fancy:fb_textColor="#FFFFFF" />

В итоге получил вот такой код разметки:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical"
    xmlns:fancy="http://schemas.android.com/apk/res-auto">

    <mehdi.sakout.fancybuttons.FancyButton
        android:id="@+id/btn_spotify"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="10dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="10dp"
        fancy:fb_borderColor="#FFFFFF"
        fancy:fb_borderWidth="1dp"
        fancy:fb_defaultColor="#7ab800"
        fancy:fb_focusColor="#9bd823"
        fancy:fb_fontIconResource="&#xf04b;"
        fancy:fb_iconPosition="left"
        fancy:fb_radius="30dp"
        fancy:fb_text="SHUFFLE PLAY"
        fancy:fb_textColor="#FFFFFF" />

</LinearLayout>

Рисунок 8 — Код разметки активности

Запускаем проект:

Рисунок 9 — Запуск проекта

Рисунок 10 — Запущенное приложение

P. S. Разница между двумя файлами build.gradle объясняется тут.