Как реализовать нижнюю навигационную вкладку в соответствии с новым руководством Google

Ответ 1

Здесь первое настраиваемое решение, насколько мне известно.

UPDATE:

Официальный BottomNavigationView отсутствует в Support lib 25.

Ответ 2

Вы можете использовать библиотеку поддержки v25.

Добавьте в свой build.gradle

compile 'com.android.support:design:25.0.0'

Добавьте BottomNavigationView в свой макет:

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

Затем создайте файл меню (menu/bottom_navigation_menu.xml):

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/my_action1"
        android:enabled="true"
        android:icon="@drawable/my_drawable"
        android:title="@string/text"
        app:showAsAction="ifRoom" />
    ....
</menu>

Затем добавьте слушателя:

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.my_action1:
                        //Do something...
                        break;

                }
                return false;
            }
        });

Ответ 3

Теперь BottomNavigationView добавляется в поддержку дизайна lib v25.0.0, выпущенный в октябре 2016 года.

Добавьте BottomNavigationView в свой XML файл.

Например, activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="priyank.patel.bottomnavigationdemo.MainActivity">

    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation"
        android:layout_alignParentTop="true">
    </FrameLayout>

    <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="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:menu="@menu/bottom_navigation_main" />
</RelativeLayout>

Добавьте xml для пунктов меню в папку меню.

Например, bottom_navigation_main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_video"
        android:enabled="true"
        android:icon="@drawable/ic_music_video_white_24dp"
        android:title="@string/text_video"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_audiotrack_white_24dp"
        android:title="@string/text_music"
        app:showAsAction="ifRoom" />

</menu>

Установите OnNavigationItemSelectedListener на BottomNavigationView в свой класс активности.

Например, MainActivity.java

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

public class MainActivity extends AppCompatActivity {

private Fragment fragment;
private FragmentManager fragmentManager;

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

    fragmentManager = getSupportFragmentManager();
    fragment = new FavouriteFragment();
    final FragmentTransaction transaction = fragmentManager.beginTransaction();
    transaction.add(R.id.main_container, fragment).commit();

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

    bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.action_favorites:
                            fragment = new FavouriteFragment();
                            break;
                        case R.id.action_video:
                            fragment = new VideoFragment();
                            break;
                        case R.id.action_music:
                            fragment = new MusicFragment();
                            break;
                    }
                    final FragmentTransaction transaction = fragmentManager.beginTransaction();
                    transaction.replace(R.id.main_container, fragment).commit();
                    return true;
                }
            });
    }
}

Оформить заказ здесь для BottomNavigation-Demo

Ответ 4

Нет примеров кода. Хотя есть пользовательские библиотеки, которые могут выполнять эту работу на данный момент (как упоминалось в сообщениях выше) Я бы не рекомендовал использовать TabLayout для достижения этой цели, поскольку в руководящих принципах разработки для вкладки "Нижняя навигация" четко сказано, что прокрутка экрана не должна прокручивать страницы по горизонтали. Однако TabLayout расширяет HorizontalScrollView, и его основным мотивом является облегчение прокрутки, даже если вы можете отключить его, но это не будет идеальным.

Ответ 5

Как user6146138 сказал, https://github.com/roughike/BottomBar - отличная реализация. И вы можете посмотреть отличный учебник по нему здесь, который очень прост в использовании, а в части 2 показано, как использовать его с прикрепленными фрагментами.

Другая хорошая реализация - https://github.com/aurelhubert/ahbottomnavigation, если вы хотите ее проверить. Я не знаю ни одного учебника по нему, но инструкции по ссылке достаточно хороши IMO.

Ответ 6

На данный момент нет примеров кода, а нижняя панель не находится в библиотеке поддержки (пока). Я нашел стороннюю библиотеку, которая имитирует рекомендации. Здесь можно найти здесь.

Ответ 7

Репозиторий. Я добавил полный проект по этой ссылке. https://gitlab.com/ashish29agre/android-bottom-navigation-view-support-lib

Привет Это может быть немного поздно здесь, это xml

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.BottomNavigationView
        android:id="@+id/nm_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimaryDark"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:layout_scrollFlags="scroll|enterAlways"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:menu="@menu/nav_menu" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/nm_bottom"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>

Ответ 8

Вы можете использовать библиотеки поддержки дизайна Google для BottomNavigationView. Прочитайте ответ здесь.

Ответ 9

Вы можете использовать TabLayout. Его можно легко выровнять в нижней части экрана.

Ответ 10

Пока нет примеров кода. Но в андроидном арсенале есть пользовательские библиотеки, и это подробный учебник, который вы можете проверить. Android-дизайн для нижней части сайта

Ответ 11

Нет официального примера, но проверьте ниже ссылку.
Очень хорошая реализация. https://github.com/roughike/BottomBar