Главная » Записи

Как добавить Bottom navigation и FAB в Android Studio

На чтение 12 мин Опубликовано Обновлено

Android Studio — это мощная интегрированная среда разработки (IDE) для создания мобильных приложений под операционную систему Android. Одной из важных задач при разработке приложений является создание навигации и пользовательского интерфейса, который будет прост и удобен в использовании. В этой статье мы рассмотрим, как создать Bottom Navigation + FAB (Floating Action Button) в Android Studio.

Bottom Navigation — это панель навигации, которая располагается внизу экрана и содержит несколько вкладок. Пользователь может легко переключаться между вкладками, чтобы просматривать разные разделы приложения. FAB — это выпуклая кнопка, которая служит для выполнения основного действия в контексте текущего экрана. Например, в приложении для социальной сети FAB может использоваться для создания нового поста.

Для создания Bottom Navigation + FAB в Android Studio мы будем использовать библиотеку Material Design, которая предоставляет готовые компоненты для создания современного и стильного пользовательского интерфейса. В первую очередь мы должны добавить зависимость на Material Design в файле build.gradle (Module: app):

implementation 'com.google.android.material:material:1.4.0'

Затем мы создадим основной макет приложения, который будет содержать Bottom Navigation и Placeholder для отображения контента каждой вкладки. В макете мы используем CoordinatorLayout, который является контейнером для управления взаимодействием между элементами пользовательского интерфейса.

Содержание
  1. Android Studio
  2. Bottom Navigation
  3. FAB
  4. Шаги создания Bottom Navigation + FAB
  5. Шаг 1: Создание нового проекта
  6. Шаг 2: Добавление зависимостей
  7. Шаг 3: Создание Bottom Navigation
  8. Шаг 4: Добавление иконок
  9. Шаг 5: Добавление FAB
  10. Шаг 6: Интеграция Bottom Navigation и FAB

Android Studio

Android Studio обладает мощными инструментами, которые позволяют программистам создавать высокопроизводительные приложения с современным интерфейсом и функциональностью. Вместе с Android Studio поставляется Android SDK (Software Development Kit), который содержит все необходимые библиотеки и инструменты для разработки под Android.

Основные возможности Android Studio:

  • Редактор кода с подсветкой синтаксиса и автозаполнением
  • Графический дизайнер интерфейсов
  • Встроенный эмулятор устройств Android
  • Отладчик для нахождения и исправления ошибок
  • Инструменты для тестирования приложений
  • Удобный инструментарий для сборки, управления и обновления проектов

Android Studio имеет активное сообщество разработчиков, где можно найти поддержку, обучающие материалы и различные расширения. Благодаря этому, разработка приложений на Android становится простой и эффективной задачей.

Bottom Navigation

В Android Studio есть встроенный компонент BottomNavigationView, который упрощает создание и настройку Bottom Navigation. Он представляет собой нижнюю панель с кнопками или иконками, при нажатии на которые происходит переход к соответствующему разделу.

Чтобы создать Bottom Navigation, необходимо выполнить следующие шаги:

  1. Добавить зависимость в файл build.gradle для подключения библиотеки BottomNavigationView:
    2. implementation 'com.google.android.material:material:1.2.0'
  2. Добавить код разметки в файл activity_main.xml:
    3. <com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/bottom_navigation_menu" />
  3. Создать файл bottom_navigation_menu.xml в директории res/menu:
    4. <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/ic_home"
android:title="Главная" />
<item
android:id="@+id/navigation_search"
android:icon="@drawable/ic_search"
android:title="Поиск" />
<item
android:id="@+id/navigation_profile"
android:icon="@drawable/ic_profile"
android:title="Профиль" />
</menu>
  4. Добавить следующий код в onCreate метод MainActivity.java:
    5. BottomNavigationView bottomNavigationView = findViewById(R.id.bottomNavigationView);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
// Переключение на главную страницу
return true;
case R.id.navigation_search:
// Переключение на страницу поиска
return true;
case R.id.navigation_profile:
// Переключение на страницу профиля
return true;
}
return false;
}
});

Теперь приложение будет отображать Bottom Navigation с тремя кнопками: «Главная», «Поиск» и «Профиль». При нажатии на каждую кнопку будет вызываться соответствующий обработчик событий, который позволит переключаться между разными разделами приложения.

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

FAB

Чтобы создать FAB в Android Studio, мы должны включить в проект библиотеку Google Material Design. Затем мы можем добавить FAB в разметку XML-файла с помощью следующего кода:


<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_fab_icon" />

Мы также должны добавить иконку для FAB, которая будет отображаться на экране. Это можно сделать, разместив файл изображения в директории res/drawable.

Когда пользователь нажимает на FAB, можно добавить обработчик событий, чтобы выполнить нужные действия. Например, мы можем создать новый метод обработки нажатия и зарегистрировать его в коде активности или фрагмента:


FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// Выполнение действий при нажатии на FAB
}
});

Теперь в нашем приложении отображается FAB, который можно нажать для выполнения определенных действий.

Шаги создания Bottom Navigation + FAB

Шаг 1: Зависимости Gradle

В файле build.gradle (Module: app) добавьте зависимость для Android Support Design Library:


dependencies {
// ...
implementation 'com.google.android.material:material:1.2.0'
// ...
}

Шаг 2: Добавление Bottom Navigation в разметку

Откройте файл разметки активности и добавьте следующий код:

Шаг 3: Создание меню Bottom Navigation

В папке res создайте папку menu, а затем файл menu_bottom_navigation.xml с следующим содержимым:

Шаг 4: Добавление FAB

В разметке активности добавьте следующий код для добавления кнопки FAB:

Шаг 5: Обработка событий Bottom Navigation и FAB

В файле активности добавьте следующий код для обработки событий Bottom Navigation и FAB:


// Настройка Bottom Navigation и FAB
BottomNavigationView bottomNavigationView = findViewById(R.id.bottomNavigationView);
FloatingActionButton fab = findViewById(R.id.fab);
// Обработчик событий для Bottom Navigation
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
switch (menuItem.getItemId()) {
case R.id.navigation_home:
// Обработка нажатия для Home
return true;
case R.id.navigation_dashboard:
// Обработка нажатия для Dashboard
return true;
case R.id.navigation_notifications:
// Обработка нажатия для Notifications
return true;
}
return false;
}
});
// Обработчик событий для FAB
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// Обработка нажатия на FAB
}
});

Шаг 1: Создание нового проекта

1. Запустите Android Studio и выберите «Create New Project» (Создание нового проекта) в главном окне.

2. В открывшемся окне выберите «Empty Activity» (Пустая активность) и нажмите «Next» (Далее).

3. Введите имя вашего проекта и выберите его путь на вашем компьютере. Нажмите «Finish» (Готово), чтобы создать проект.

4. Дождитесь, пока Android Studio завершит создание проекта.

5. После завершения создания проекта вы увидите структуру проекта в Android Studio, включающую папки «app», «java», «res» и другие необходимые файлы.

6. Теперь вы готовы перейти к следующему шагу и начать создавать Bottom Navigation и FAB!

Шаг 2: Добавление зависимостей

Прежде чем приступить к созданию Bottom Navigation и FAB, необходимо добавить несколько зависимостей в файл build.gradle (Module: app).

Откройте файл build.gradle (Module: app) в своем проекте. В разделе dependencies добавьте следующие строки:


implementation 'com.google.android.material:material:1.4.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.0'

Первая зависимость добавляет библиотеку Material Design, которая содержит компоненты для создания Bottom Navigation и FAB. Вторая зависимость добавляет библиотеку ConstraintLayout, которая позволит нам легко управлять расположением элементов на экране.

После добавления зависимостей, вам может потребоваться синхронизировать проект, чтобы Android Studio загрузила их. Для этого просто нажмите на кнопку «Sync Now» в верхнем правом углу.

Шаг 3: Создание Bottom Navigation

1. Откройте файл разметки activity_main.xml и добавьте в него следующий код:


<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:menu="@menu/bottom_nav_menu" />

2. Создайте файл разметки bottom_nav_menu.xml в папке res/menu и добавьте в него следующий код:


<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/ic_home"
android:title="Домашняя" />
<item
android:id="@+id/navigation_dashboard"
android:icon="@drawable/ic_dashboard"
android:title="Панель инструментов" />
<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_notifications"
android:title="Уведомления" />
</menu>

3. Теперь перейдите к методу onCreate в MainActivity.java и добавьте следующий код:


BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_nav);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
switch (menuItem.getItemId()) {
case R.id.navigation_home:
// Код для перехода на домашнюю страницу
return true;
case R.id.navigation_dashboard:
// Код для перехода на панель инструментов
return true;
case R.id.navigation_notifications:
// Код для перехода на страницу уведомлений
return true;
}
return false;
}
});

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

Шаг 4: Добавление иконок

Чтобы сделать нашу Bottom Navigation-панель более информативной и удобной для пользователей, мы будем добавлять иконки к каждому элементу меню. Для этого мы можем использовать встроенные иконки Android либо собственные иконки.

1. Вначале создадим директорию drawable внутри директории res нашего проекта, если ее еще нет.

2. Затем загрузим необходимые иконки. Мы можем использовать готовые векторные изображения в формате SVG или PNG, либо создать собственные векторные изображения с помощью графических редакторов, таких как Adobe Illustrator или Inkscape.

3. Когда вы загрузили или создали иконки, поместите их в директорию drawable. Для каждого элемента меню создайте отдельный файл с именем ic_menu_item_название_иконки.xml.

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

5. Теперь вернемся к файлу activity_main.xml и откроем его в режиме разметки. Выведите на экран нашу Bottom Navigation-панель, а затем выберите каждый элемент меню и в свойствах элемента задайте атрибут app:srcCompat="@drawable/ic_menu_item_название_иконки", где название_иконки — это имя файла иконки без расширения.

6. После этого сохраните файл activity_main.xml и перезапустите проект. Вы должны увидеть, что иконки были успешно добавлены к каждому элементу меню нашей Bottom Navigation-панели.

Теперь ваше приложение стало более интерактивным и удобным для пользователей благодаря добавленным иконкам в Bottom Navigation-панель.

Шаг 5: Добавление FAB

1. В файле activity_main.xml добавьте следующий код внутри RelativeLayout перед закрывающим тегом ``:

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_margin="@dimen/fab_margin"
app:srcCompat="@android:drawable/ic_dialog_email" />

2. В файле MainActivity.java добавьте следующий код в метод onCreate() после инициализации BottomNavigationView:

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// Действие при нажатии на FAB
}
});

В этом коде мы инициализируем FAB, устанавливаем слушатель нажатия и добавляем действие, которое будет выполняться при нажатии на кнопку. Вместо комментария «// Действие при нажатии на FAB» вы можете добавить свой код.

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

Шаг 6: Интеграция Bottom Navigation и FAB

Теперь, когда у нас есть Bottom Navigation и FAB, нам нужно связать их вместе, чтобы обеспечить полноценное взаимодействие.

1. Вначале определим идентификаторы для элементов нашего макета. В файле activity_main.xml откройте разметку и добавьте следующие идентификаторы:

<android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:id="@+id/bottom_sheet"
...
>
...
</android.support.design.widget.CoordinatorLayout>

2. В методе onCreate() вашей активности MainActivity добавьте код, который предоставит взаимодействие между Bottom Navigation и FAB:

@Override
protected void onCreate(Bundle savedInstanceState) {
...
LinearLayout bottomSheet = findViewById(R.id.bottom_sheet);
BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_favorites) {
// Handle Favorites action
} else if (id == R.id.action_music) {
// Handle Music action
} else if (id == R.id.action_books) {
// Handle Books action
}
return true;
}
});
FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (bottomSheet.getVisibility() == View.VISIBLE) {
bottomSheet.setVisibility(View.GONE);
} else {
bottomSheet.setVisibility(View.VISIBLE);
}
}
});
}

3. Теперь можно добавить обработчики для отображения содержимого Bottom Navigation. В методе onNavigationItemSelected() определите нужные вам действия при выборе определенного пункта меню:

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_favorites) {
// Handle Favorites action
} else if (id == R.id.action_music) {
// Handle Music action
} else if (id == R.id.action_books) {
// Handle Books action
}
return true;
}
});

4. Наконец, добавьте код для отображения и скрытия определенного содержимого при нажатии на FAB:

fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (bottomSheet.getVisibility() == View.VISIBLE) {
bottomSheet.setVisibility(View.GONE);
} else {
bottomSheet.setVisibility(View.VISIBLE);
}
}
});

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

Оцените статью