web-dev-qa-db-fra.com

BottomNavigationView n'est pas pleine largeur

Je travaille sur une application Android Android et j'implémente BottomNavigationView à partir de la bibliothèque de conception. J'ai examiné de nombreux exemples et je n'arrive pas à comprendre ce qui ne va pas avec ma mise en page. BottomNavigationView n'est pas affiché en pleine largeur.

Un autre problème est que la couleur de la barre d'état n'est pas appliquée.

enter image description here

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>

Modifier : solution ajoutée pour la couleur d'état non définie

Android:fitsSystemWindows="true"

(colorPrimaryDark) la couleur de la barre d'état ne fonctionne pas sur Android v21?

androidmaterial-designbottom-sheet
30
midhunhk

Le BottomNavigationView n'est pas affiché en pleine largeur.

Ce n'est pas censé le faire.

Selon directives de conception la largeur d'une action peut varier entre 80dp et 168dp. Les deux actions que vous avez définies ne sont pas suffisantes pour remplir toute la zone horizontalement.
(En guise de remarque, également selon les directives, la vue doit contenir entre trois et cinq actions.)

Si vous souhaitez remplir l'espace derrière le BottomNavigationView, vous pouvez définir la couleur d'arrière-plan de la vue pour être la même couleur que l'arrière-plan des éléments:

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

     // .... />
75
Andy Res

C'est faisable. Mais cela recommencera spécifications de conception par défaut , et je vous proposerai d'aller avec spécifications de conception par défaut .

Venons-en maintenant à ma solution ...

Définissez les dimensions ci-dessous en dimens.xml. Ces dimensions doivent être en values, values-large, values-large-land. Et 600dp peut être augmenté à 1000dp ou plus dans values-large, values-large-land, si dans la tablette vous ne voyez pas ce changement.

<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>

Et c'est tout!!! Le résultat sera comme enter image description here

Ce n'est pas un labyrinthe.

Pourquoi les dimensions ont été ajoutées avec un tel nom et une telle valeur est 600dp

Les deux dimensions sont utilisées par BottomNavigationMenuView.Java (qui est la classe utilisée pour représenter le menu dans BottomNavigationView). Ci-dessous est le code

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);
    .....
}

Maintenant, ces valeurs sont utilisées pour créer une vue avec une largeur fixe, comme ci-dessous

@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);
        .....
    }
    ....
}

Pour utiliser toujours la valeur de activeMaxAvailable, j'ai défini une valeur fictive sur mActiveItemMaxWidth (en dimens ci-dessus). Ainsi, activeWidth aura la valeur de activeMaxAvailable. La même règle s'applique pour inactiveWidth.

Ainsi, lorsque vous générez un projet, design_bottom_navigation_item_max_width et design_bottom_navigation_active_item_max_width défini dans design-support-lib, sera remplacé par les dimensions définies par nous.

Code vérifié sur les options maximales prises en charge (5 max) également.

21
Pankaj Kumar

Je suggère de n'utiliser que

Android:background="@color/bottom_view_color"

Il affichera la barre en pleine largeur et conservera l'effet d'entraînement lorsque l'utilisateur cliquera sur les éléments.

Si vous ajoutez également app:itemBackground vous perdrez l'effet d'entraînement.

Dans ton cas

<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"/>
12
alan10fm