2
votes

Titre chevauchant sur l'icône dans BottomNavigationView

J'essaye d'ajouter BottomNavigationView avec de grandes icônes. Cependant, il apparaît avec le titre chevauchant sur l'icône.

Code:

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:labelVisibilityMode="labeled"
        app:itemIconSize="50dp"
        app:menu="@menu/bottom_navigation_menu"/>

J'utilise la version 1.0.0 de la bibliothèque de matériaux.

entrez la description de l'image ici

android material-design

7 commentaires

Et si vous créez android: layout_height = "wrap_content"?

Voulez-vous définir la hauteur fixe de bottomNavigationView? et après vous voulez une solution?

@AIMINPAN Il montre des icônes coupées en bas.

@DPrince Je veux afficher de grandes icônes et un titre en dessous.

@MalwinderSingh Le problème est dans votre icône. Vérifiez s'il y a plus d'espace

cette question mérite de nombreuses voix positives.

@MalwinderSingh si vous souhaitez donner la taille de l'icône, utilisez des icônes vectorielles

4 Réponses :

0
votes

Veuillez utiliser android:layout_gravity="bottom" ainsi que wrap_content :

<com.google.android.material.bottomnavigation.BottomNavigationView
  android:id="@+id/bottomNavigationView"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="bottom"
  app:menu="@menu/bottom_navigation_menu" />

Veuillez faire ne pas utiliser app:itemIconSize="70dp".

Lien de référence:

https://github.com/material-components/material-components-android/blob/master/docs/ composants / BottomNavigationView.md

1 commentaires

supprimer également le rembourrage

0
votes

essayez celui-ci

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/selected_color" android:state_checked="true" />
<item android:color="@color/disable_Color" android:state_checked="false" />

dans l'élément de menu

<item
        android:id="@+id/navigation_home_tab"
        android:enabled="true"
        android:icon="@drawable/ic_navigation_home"
        android:title="@string/home"/>

drawable -> @ drawable / bottom_view_color_change

<android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="false"
            android:splitMotionEvents="false"
            android:fitsSystemWindows="false"
            app:itemIconTint="@drawable/bottom_view_color_change"
            app:itemTextColor="@drawable/bottom_view_color_change"
            app:menu="@menu/bottom_navigation_menu
            app:labelVisibilityMode="labeled"/>

0 commentaires

0
votes

Essayez d'utiliser le code ci-dessous.

Pour la conception de widget BottomNavigationView

private void bottomIconLarge() {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
        for (int i = 0; i < menuView.getChildCount(); i++) {
            final View iconView = menuView.getChildAt(i).findViewById(android.support.design.R.id.icon);
            final ViewGroup.LayoutParams layoutParams = iconView.getLayoutParams();
            final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
            layoutParams.height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 42, displayMetrics);
            layoutParams.width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 42, displayMetrics);
            iconView.setLayoutParams(layoutParams);
        }
    }

Pour Conception de matériel BottomNavigationView

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

  <!-- Main content -->

  <com.google.android.material.bottomnavigation.BottomNavigationView
      android:id="@+id/bottom_navigation"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom"
      android:background="@color/colorPrimary"
      app:itemIconTint="@color/white"
      app:itemTextColor="@color/white"
      app:menu="@menu/bottom_navigation_menu" />

</FrameLayout>

Utilisez la méthode ci-dessous pour fixer la taille de l'icône de navigation inférieure souhaitée.

<android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="start"
        android:background="@color/white"
        app:itemIconTint="@drawable/nav_items_color"
        app:itemTextColor="@drawable/nav_items_color"
        app:menu="@menu/navigation"
        android:visibility="visible"/>

6 commentaires

J'utilise ConstraintLayout en tant que parent.

Ensuite, utilisez l'application: layout_constraintBottom_toBottomOf = "parent" insted of layout_gravity. @MalwinderSingh

Si vous souhaitez utiliser votre taille donnée et qu'elle a été fixée par vous, j'ai un code pour utiliser le code que vous pouvez personnaliser la taille de l'icône.

Le problème n'est pas que les icônes ne semblent pas grandes. Le problème est que les icônes sont coupées en bas et les titres chevauchent les icônes respectives.

Pouvez-vous afficher votre fichier @ menu / bottom_navigation_menu

Où se trouve le fichier bottom_navigation_menu?

3
votes

Ajoutez ceci dans dimens.xml:

<dimen name="design_bottom_navigation_height" tools:override="true">80dp</dimen>

0 commentaires