Как добавить BottomNavigationView в ваше android приложение

Рассмотрим новый компонент библиотеки поддержки материального дизайна BottomNavigationView. Это нижняя панель навигации, позволяющая переключаться между экранами приложения в одно касание, она предназначена в основном для смартфонов, поскольку расположение в нижней части экрана обеспечивает удобный и быстрый доступ для пользователя.

Этот компонент доступен в Design Support Library с версии 25.0.0 и Google рекомендует его к применению с соблюдением таких принципов дизайна:

• Рекомендуется только для смартфонов, на планшетах и других устройствах с большим экраном лучше использовать боковое меню навигации.
• Ширина областей значков зависит от их количества и может варьироваться от 80 до 168 dp. Высота панели — 56 dp, размер иконки 24×24 dp.
• Панель должна содержать не меньше 3-х, но не больше 5-ти кнопок, кнопки должны помещаться на экране и не скроллиться.
• Переключение между экранами только по тапу на кнопке, свайп не используется, что дает возможность комбинировать BottomNavigationView с вкладками. Но Google рекомендует подходить к такой комбинации с осторожностью, чтобы не дезориентировать пользователя.
• Можно закрашивать активный значок в основной цвет приложения, либо использовать белый или черный цвета, если нижняя панель навигации цветная. Не разукрашивайте значки в разные цвета.
• Текстовые метки должны быть максимально короткими и информативными, избегайте длинных надписей.
• Нажатие значка на нижней панели навигации должно привести пользователя прямо к связанному со значком окну, или обновить текущее окно. Значки не должны открывать меню или всплывающие окна. Кнопка «Назад» на устройстве не должна позволять перемещаться между экранами нижней панели навигации.
• Нижняя панель навигации может исчезать с экрана при прокрутке вверх и появляться при возвращении.

Ссылка на более подробную спецификацию есть в описании видео, а мы с вами переходим к практике — я покажу, как внедрить BottomNavigationView в приложение.

Для добавления поддержки нижней панели навигации в файл сборки уровня модуля нужно добавить такие зависимости:

compile 'com.android.support:appcompat-v7:25.0.0'
compile 'com.android.support:design:25.0.0'

В файле макета главного экрана такая разметка:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:src="@drawable/ic_map_24dp"
        android:id="@+id/img_map"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:layout_centerInParent="true" />

    <ImageView
        android:src="@drawable/ic_apps_24dp"
        android:id="@+id/img_dial"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:layout_centerInParent="true"
        android:visibility="gone" />

    <ImageView
        android:src="@drawable/ic_email_24dp"
        android:id="@+id/img_mail"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:layout_centerInParent="true"
        android:visibility="gone" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/bottom_navigation_item_background_colors"
        app:itemTextColor="@color/bottom_navigation_item_background_colors"
        app:menu="@menu/menu_bottom_navigation" />

</RelativeLayout>

Здесь три расположенных по центру Imageview, два из которых скрыты изначально при помощи атрибута visibility со значением gone. Мы будем просто отображать по очереди изображения в них в зависимости от выбранного значка в BottomNavigationView.

А ниже — виджет BottomNavigationView, он имеет такие атрибуты:

• itemBackground : цвет фона элемента панели. Может быть установлен из кода методом setItemBackgroundResource()
• itemIconTint : цвет иконки элемента панели. Может быть установлен из кода методом setItemIconTintList()
• itemTextColor : цвет текста элементов панели. Может быть установлен из кода методом setItemTextColor()

Эти два атрибута ссылаются на файл ресурса, который устанавливает цвет в зависимости от того, активен элемент или нет.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

	<item
		android:color="@android:color/darker_gray"
		android:state_checked="false"/>
	<item
		android:color="@android:color/white"
		android:state_checked="true"/>

</selector>

Последний атрибут BottomNavigationView app:menu ссылается на предварительно созданный файл ресурса menu_bottom_navigation.xml, который содержит пункты нижней панели навигации. Они практически не отличаются от обычного меню:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
	<item
		android:id="@+id/action_map"
		android:icon="@android:drawable/ic_dialog_map"
		android:title="@string/map"/>
	<item
		android:id="@+id/action_dial"
		android:icon="@android:drawable/ic_dialog_dialer"
		android:title="@string/dial" />
	<item
		android:id="@+id/action_mail"
		android:icon="@android:drawable/ic_dialog_email"
		android:title="@string/mail" />
</menu>

Теперь код главного класса MainActivity.java:

package ...

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    ImageView imgMap;
    ImageView imgDial;
    ImageView imgMail;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imgMap = (ImageView) findViewById(R.id.img_map);
        imgDial = (ImageView) findViewById(R.id.img_dial);
        imgMail = (ImageView) findViewById(R.id.img_mail);

        BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.bottom_navigation);

        bottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.action_map:
                                imgMap.setVisibility(View.VISIBLE);
                                imgDial.setVisibility(View.GONE);
                                imgMail.setVisibility(View.GONE);
                                break;
                            case R.id.action_dial:
                                imgMap.setVisibility(View.GONE);
                                imgDial.setVisibility(View.VISIBLE);
                                imgMail.setVisibility(View.GONE);
                                break;
                            case R.id.action_mail:
                                imgMap.setVisibility(View.GONE);
                                imgDial.setVisibility(View.GONE);
                                imgMail.setVisibility(View.VISIBLE);
                                break;
                        }
                        return false;
                    }
                });
    }
}

Здесь мы объявляем и находим все экранные компоненты. BottomNavigationView присваиваем слушатель, который определяет нажатие на пункты панели по идентификаторам и прописываем нужные действия в конструкции switch.

В нашем случае для простоты примера просто меняется видимость картинок в ImageView на главном экране. Но можно, например, реализовать открытие фрагментов с различным контентом и т.п.

Вот так приложение выглядит на устройстве:

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

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