Title overlapping on icon in BottomNavigationView

bottomnavigationview item padding
bottomnavigationview more than 5 items
com google android material bottom_navigation bottomnavigationview
dependency for bottomnavigationview
bottomnavigationview android example github

I am trying to add BottomNavigationView with big icons. However, it is showing with title overlapping on icon.

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

I am using version 1.0.0 of material library.

Add this in dimens.xml:

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

title only shown on active element on navigation bar with 4 icons , In order to test it I change the Smallest Width Available in my device, as I the sw size, the bnb overlaps the icon with the text, seems like the parent� Icon Show Original Multi Color (Disable Tint) By default, BottomNavigationView apply tint to icon which change its original color (if the icon is multi color, it will be shown as single color). To disable this behaviour bottomNavigationView.itemIconTintList = null NOTE: It seems impossible to do this via XML. Change Icon and Selected Icon Navigation Item (including text and icon) is specified

try this one

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

in menu item

<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

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

[BottomNavigationView] Bottom Navigation View Sizing � Issue #431 , By default, BottomNavigationView apply tint to icon which change its original color Edit res/values/dimens.xml to avoid icon overlap with text. Applying a material style to Bottom Navigation View. The Material Design (MD) library provides several considerable styling options. But after the recent update 1.1.0-alpha06, we can now show BadgeDrawable over the item icon in the top right corner.

Please use android:layout_gravity="bottom" and also 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" />

Please do not use app:itemIconSize="70dp".

Reference Link :

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

Customize UI of Android BottomNavigationView, BottomNavigationView+Fragment implements main page layout and solves problem of fragment overlap and data saving, Programmer Sought, the best labelVisibilityMode is used to set the icon and title--> when the item is greater than 3 <! The bar contents can be populated by specifying a menu resource file. Each menu item title, icon and enabled state will be used for displaying bottom navigation bar items. Menu items can also be used for programmatically selecting which destination is currently active. It can be done using MenuItem#setChecked(true)

Try to use the below code.

For Widget Design BottomNavigationView

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

For Material Design 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>

Use the below method to fixed the size of bottom navigation Icon you want.

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

BottomNavigationView+Fragment implements main page layout and , Android Bottom Bar (Bottom Navigation View) was officially added in Design android:icon="@drawable/ic_call_24dp" android:title="Calls"� To change the icon size you need to pick every icon individually and set its size. You can do this using a for loop to adjust all sizes or you can change the size of a particular icon to create your custom effect. Below is the code segment which will help you understand the changes that need to be done and how can you pick the icons.

Using Bottom Navigation View with Android Design Support Library , Each menu item title, icon and enabled state will be used for displaying bottom navigation bar items. Menu items can also be used for programmatically selecting� Material Design conducted research to understand the usability and design preferences for embedding a floating action button (FAB) in the bottom navigation bar. Preferences and rankings for the different designs were gathered from around 650 participants from the United States, twenty from India and ten from Brazil.

BottomNavigationView, remove space between navigation icon and title in android bottomnavigationview icon padding long text cutting off in bottomnavigationview over 50 million developers working together to host and review bnb overlaps the icon with the text� In this android programming source code example, we are going to change bottom navigation view selected item color in android. You can copy and adopt this source code example to your android project without reinventing the wheel. Below is a step by step source code to change bottom navigation view selected item color in android. activity_main.xml

Android NavigationView: reduce space between icon and text and , Bottom navigation bar showing 4 destinations with icons and labels. Each destination is represented by an icon and an optional text label. States and Brazil favored the mini FAB , participants in India preferred an inset or overlapping FAB . Android Prevent BottomNavigationView Cover/Overlap Content/RecyclerView Android BottomNavigationView: Icon Show Original Multi Color (Disable Tint) Android BottomNavigationView: Change Icon Size

Comments
  • What about if you make android:layout_height="wrap_content"?
  • Do you want to set fix height of bottomNavigationView? and after you want solution?
  • @AIMINPAN It shows icons clipped to bottom.
  • @DPrince I want to show big icons and title below them.
  • @MalwinderSingh Problem is in your icon. Check if it has extra space
  • remove padding also
  • I am using ConstraintLayout as parent.
  • Then use app:layout_constraintBottom_toBottomOf="parent" insted of layout_gravity. @MalwinderSingh
  • If you want to use your given size and it has been fixed by you, then I have a code to use the code that you can customize the icon size.
  • issue is not that icons are not appearing large. issue is that icons are getting cut at bottom and titles are overlapping respective icons.
  • Can you show your @menu/bottom_navigation_menu file