BottomNavigationView не является полной шириной

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

Другая проблема заключается в том, что цвет строки состояния не применяется.

введите описание изображения здесь

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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">

<!-- Include the toolbar -->
<include layout="@layout/toolbar"/>

<RelativeLayout android:id="@+id/fragment_container"
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>


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

</android.support.design.widget.CoordinatorLayout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
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="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay"/>

</android.support.design.widget.AppBarLayout>

Edit: Добавлено решение для статуса Цвет не установлен

android:fitsSystemWindows="true"

(colorPrimaryDark) цвет строки состояния не работает на android v21?

Ответы

Ответ 1

BottomNavigationView не отображается как полная ширина.

Это не предполагается.

В соответствии с рекомендациями по дизайну ширина действия может варьироваться от 80dd до 168dp. Два действия, которые вы определили, недостаточно для заполнения всей области по горизонтали.
(В качестве примечания, также в соответствии с руководящими принципами, представление должно содержать от трех до пяти действий.)

Если вы хотите заполнить пробел за BottomNavigationView, вы можете установить цвет фона в представлении того же цвета, что и фон элементов:

<android.support.design.widget.BottomNavigationView
     android:background="@color/bottom_view_color"
     app:itemBackground="@color/bottom_view_color"

     // .... />

Ответ 2

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


Теперь подходит к моему решению...

Определите размеры ниже в размеры dimens.xml. Эти размеры должны быть в values, values-large, values-large-land. И 600dp может быть увеличено до 1000dp или более в values-large, " values-large-land, если в планшете вы не видите этого изменения.

<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_bottom_navigation_item_max_width" tools:override="true">600dp</dimen>
    <dimen name="design_bottom_navigation_active_item_max_width" tools:override="true">600dp</dimen>
</resources>

И это все!!! Результат будет как enter image description here


Это не мазик.

Почему размеры были добавлены с таким именем и значением 600dp

Оба измерения используются BottomNavigationMenuView.java (это класс, используемый для представления меню в BottomNavigationView). Ниже код

public BottomNavigationMenuView(Context context, AttributeSet attrs) {
    super(context, attrs);
    ...
    mInactiveItemMaxWidth = res.getDimensionPixelSize(
            R.dimen.design_bottom_navigation_item_max_width);
    ....
    mActiveItemMaxWidth = res.getDimensionPixelSize(
            R.dimen.design_bottom_navigation_active_item_max_width);
    .....
}

Теперь эти значения используются для создания вида с фиксированной шириной, как показано ниже

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    ....
    if (mShiftingMode) {
        final int inactiveCount = count - 1;
        final int activeMaxAvailable = width - inactiveCount * mInactiveItemMinWidth;
        final int activeWidth = Math.min(activeMaxAvailable, mActiveItemMaxWidth);
        final int inactiveMaxAvailable = (width - activeWidth) / inactiveCount;
        final int inactiveWidth = Math.min(inactiveMaxAvailable, mInactiveItemMaxWidth);
        ...
    } else {
        final int maxAvailable = width / count;
        final int childWidth = Math.min(maxAvailable, mActiveItemMaxWidth);
        .....
    }
    ....
}

Чтобы всегда использовать значение activeMaxAvailable, я устанавливаю фиктивное значение mActiveItemMaxWidth (в измерениях выше). Так что activeWidth будет иметь значение activeMaxAvailable. То же правило применяется для inactiveWidth.

Поэтому, когда вы создаете проект, design_bottom_navigation_item_max_width и design_bottom_navigation_active_item_max_width определенные в design-support-lib, будут заменены размерами, определенными нами.

Код проверен на максимально поддерживаемых опциях (5 макс) также.

Ответ 3

Я предлагаю использовать

android:background="@color/bottom_view_color"

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

Если вы добавите app:itemBackground, вы потеряете эффект пульсации.

В вашем случае

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:background="@color/colorPrimary"
    app:itemIconTint="@android:color/white"
    app:itemTextColor="@android:color/white"
    app:menu="@menu/bottom_navigation_main"/>

Ответ 4

да, это работает отлично, спасибо.