Пример работы с BottomNavigationView. Нижнее меню в Android

Нижняя панель навигации BottomNavigationView представляет собой новый компонент пользовательского интерфейса в стиле Material Design. Этот виджет был создан для замены верхнего меню приложения, чтобы пользователям не пришлось тянуться пальцем через все 5.5″ дисплея для нажатия одной кнопки. Это обеспечивает более простую навигацию и может освежить дизайн вашего приложения

Пример работы с BottomNavigationView в Android

Виджет BottomNavigationView — это наследник FrameLayout с внутренними контейнерами ViewGroup для элементов меню. Это достаточно легковесный и просто в использовании виджет в стилях материального дизайна.

Переходим к работе. Создайте новый проект в Android Studio или добавьте виджет BottomNavigationView из библиотеки поддержки (Design Support library) в существующий проект.

Сама библиотека поддержки должна быть добавлена в зависимостях файла gradle.build на уровне проекта:

// gradle.build
...
    compile 'com.android.support:appcompat-v7:26.0.0-alpha1'
    compile 'com.android.support:design:26.0.0-alpha1'
...

// gradle.build

...

compile 'com.android.support:appcompat-v7:26.0.0-alpha1'

compile 'com.android.support:design:26.0.0-alpha1'

...

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

В этом примере я покажу простое приложение с нижней панелью навигации BottomNavigationView с тремя пунктами меню и фрагментами.

Посмотрим на макет activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.javadevblog.bottomnavigationviewapp.MainActivity">

    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/darker_gray"
        app:menu="@menu/navigation" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

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

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context="com.javadevblog.bottomnavigationviewapp.MainActivity">

<FrameLayout

android:id="@+id/fl_content"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" />

<android.support.design.widget.BottomNavigationView

android:id="@+id/navigation"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

android:background="@android:color/darker_gray"

app:menu="@menu/navigation" />

</LinearLayout>

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

Само меню выглядит так:

<?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_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

<?xml version="1.0" encoding="utf-8"?>

<item

android:id="@+id/navigation_home"

android:icon="@drawable/ic_home_black_24dp"

android:title="@string/title_home" />

<item

android:id="@+id/navigation_dashboard"

android:icon="@drawable/ic_dashboard_black_24dp"

android:title="@string/title_dashboard" />

<item

android:id="@+id/navigation_notifications"

android:icon="@drawable/ic_notifications_black_24dp"

android:title="@string/title_notifications" />

</menu>

Где android:icon — векторная иконка действия на пункте меню. Эти иконки, а также весь проект вы найдете по ссылке в конце статьи.

Теперь создадим 3 идентичных фрагмента. В статье ниже приводится лишь 1 фрагмент и его макет — остальные 2 будут точно такие же.

Листинг класса HomeFragment:

package com.javadevblog.bottomnavigationviewapp;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HomeFragment extends Fragment {

    public HomeFragment() {
    }

    public static HomeFragment newInstance() {
        return new HomeFragment();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_home, container, false);
    }
}

package com.javadevblog.bottomnavigationviewapp;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class HomeFragment extends Fragment {

public HomeFragment() {

}

public static HomeFragment newInstance() {

return new HomeFragment();

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_home, container, false);

}

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

Содержимое макета fragment_home.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/fl_home"
    tools:context="com.javadevblog.bottomnavigationviewapp.HomeFragment">

    <TextView
        android:id="@+id/tv_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal"
        android:text="@string/title_home"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</FrameLayout>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/fl_home"

tools:context="com.javadevblog.bottomnavigationviewapp.HomeFragment">

<TextView

android:id="@+id/tv_home"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical|center_horizontal"

android:text="@string/title_home"

android:textAppearance="?android:attr/textAppearanceLarge" />

</FrameLayout>

Просто показываем виджет TextView с текстом «Home». Для других фрагментов этот текст будет «Dashboard» и «Notifications».

Содержимое класса MainActivity:

package com.javadevblog.bottomnavigationviewapp;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    loadFragment(HomeFragment.newInstance());
                    return true;
                case R.id.navigation_dashboard:
                    loadFragment(DashboardFragment.newInstance());
                    return true;
                case R.id.navigation_notifications:
                    loadFragment(NotificationsFragment.newInstance());
                    return true;
            }
            return false;
        }
    };

    private void loadFragment(Fragment fragment) {
        FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.replace(R.id.fl_content, fragment);
        ft.commit();
    }

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

        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
    }

}

package com.javadevblog.bottomnavigationviewapp;

import android.os.Bundle;

import android.support.annotation.NonNull;

import android.support.design.widget.BottomNavigationView;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentTransaction;

import android.support.v7.app.AppCompatActivity;

import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener

= new BottomNavigationView.OnNavigationItemSelectedListener() {

@Override

public boolean onNavigationItemSelected(@NonNull MenuItem item) {

switch (item.getItemId()) {

case R.id.navigation_home:

loadFragment(HomeFragment.newInstance());

return true;

case R.id.navigation_dashboard:

loadFragment(DashboardFragment.newInstance());

return true;

case R.id.navigation_notifications:

loadFragment(NotificationsFragment.newInstance());

return true;

}

return false;

}

};

private void loadFragment(Fragment fragment) {

FragmentTransaction ft = getSupportFragmentManager().beginTransaction();

ft.replace(R.id.fl_content, fragment);

ft.commit();

}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);

navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

}

Добавили обработчик нажатия на пункты нижнего меню и написали простой метод loadFragment(), который на вход принимает Fragment.

Теперь запустим приложение и посмотрим результат:

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

Ссылка на проект в Android Studio.

Подписывайтесь на обновления сайта, а также следите на новостями в соц. сетях!