[BottomNavigationView] Bottom Navigation View Sizing

[GuanacoDevs]

In order to try to keep consistency across devices densities I use Smallest Width folders. For the BottomNavigationView I set a height of 56dp, an itemIconSize of 24dp and a textSize of 12sp. 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 view of each item is not resizing accordingly as you can see from the screenshot with "Show Layout Bounds" enabled, while the icon and text sizes looks I expect. In the screenshot I'm using:

• sw360dp as a baseline:
  • bnb height: 56dp
  • icon: 24dp
  • text size: 12sp
• sw480dp:
  • bnb height: 74.67dp
  • icon: 32dp
  • text size: 16sp
• sw720dp:
  • bnb height: 112dp
  • icon: 48dp
  • text size: 24sp

Is there anyway to access the design_bottom_navigation_item to modify its layout params? as by looking a the screenshots, seems like it has a fixed height, that causes the icon/text overlaping.

or how can I avoid this?

[GuanacoDevs]

@wcshi indicated in #499 that a fixed height would make the icons and tex looked "squished" as I'm showing in my screenshots, I changed the height to wrap_content as indicated but the issue persists.

This issue is clearly visible without modifying the device density on tablets 600dp, 720dp & 768dp, physical and emulated.

[GuanacoDevs]

This is my layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/content_header"
            android:layout_width="match_parent"
            android:layout_height="@dimen/fifty_six_dip"
            android:layout_margin="@dimen/null_dimen"
            android:contentDescription="@string/lotto_fragment_header"
            android:padding="@dimen/eight_dip"
            android:scaleType="centerInside"
            android:src="@drawable/toolbar_logo"
            app:layout_constraintBottom_toTopOf="@+id/content_fragment_container"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/nav_drawer_toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/fifty_six_dip"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/content_profile_picture_logo"
            android:layout_width="@dimen/fifty_six_dip"
            android:layout_height="@dimen/fifty_six_dip"
            android:contentDescription="@string/main_user_profile_picture"
            android:padding="@dimen/twelve_dip"
            app:layout_constraintBottom_toBottomOf="@+id/nav_drawer_toolbar"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="@+id/nav_drawer_toolbar" />

        <ImageView
            android:id="@+id/content_profile_picture_flag"
            android:layout_width="@dimen/sixteen_dip"
            android:layout_height="@dimen/sixteen_dip"
            android:layout_margin="@dimen/four_dip"
            android:contentDescription="@string/main_user_profile_picture"
            app:layout_constraintBottom_toBottomOf="@+id/content_profile_picture_logo"
            app:layout_constraintRight_toRightOf="@+id/content_profile_picture_logo" />

        <FrameLayout
            android:id="@+id/content_fragment_container"
            android:layout_width="match_parent"
            android:layout_height="@dimen/null_dimen"
            app:layout_constraintBottom_toTopOf="@+id/ad_view"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/content_header" />

        <View
            android:id="@+id/content_toolbar_shadow"
            android:layout_width="match_parent"
            android:layout_height="@dimen/eight_dip"
            android:background="@drawable/toolbar_shadow"
            app:layout_constraintTop_toBottomOf="@+id/nav_drawer_toolbar" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/number_picker_fab"
            style="@style/floating_action_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/avd_add_dots"
            app:layout_constraintBottom_toBottomOf="@+id/content_fragment_container"
            app:layout_constraintRight_toRightOf="parent" />

        <com.google.android.gms.ads.AdView
            android:id="@+id/ad_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone"
            app:adSize="SMART_BANNER"
            app:adUnitId="@string/ad_banner_unit_id"
            app:layout_constraintBottom_toTopOf="@+id/bottom_navigation_view"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation_view"
            android:layout_width="match_parent"
            android:layout_height="@dimen/fifty_six_dip"
            android:layout_gravity="bottom"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/bottom_navigation" />

        <include
            android:id="@+id/content_progress_bar"
            layout="@layout/progress_bar"
            android:layout_width="@dimen/forty_dip"
            android:layout_height="@dimen/forty_dip"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_drawer_navigation_view"
        android:layout_width="@dimen/three_hundred_dip"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/primary50"
        app:headerLayout="@layout/nav_drawer_header"
        app:itemBackground="@drawable/nav_drawer_selector_background"
        app:itemHorizontalPadding="@dimen/twenty_two_dip"
        app:itemIconPadding="@dimen/fourteen_dip"
        app:itemIconSize="@dimen/twenty_four_dip"
        app:itemIconTint="@drawable/nav_drawer_selector"
        app:itemTextAppearance="@style/nav_bar_style_text_appearance"
        app:itemTextColor="@drawable/nav_drawer_selector"
        app:menu="@menu/navigation_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>

[h4h13]

For me, it was working before but after updating to the latest version it started adding padding at the bottom.

[wcshi]

@GuanacoDevs please provide a sample app, not just the xml layout to ensure that we are running the code in the exact condition as you, thank you.

[GuanacoDevs]

@wcshi I think that my issue is related to me providing different dimens.xml for smallest width where I set the values for each one of my dimensions so I can have the same look accross devices and there must be some padding/margin/height that I'm not overriding. I'll try to submit a demo app ASAP

[wcshi]

Why do you need to provide different dimens.xml? Are you using px or dp?

[GuanacoDevs]

@wcshi I'm using dp I'm not using hdpi, xdpi, xxdpi, xxxdpi, instead I'm using the "Smallest Width" qualifier, the screenshots provided are sw360dp, sw420dp, sw480dp, sw540dp, sw600dp, sw720dp, sw1080dp. I override all system dimensions that I can override. Changes as I change densities are more noticeable in the notification bar, navigation bar and AdView, as those, I can't nor try to override. Since devices are getting bigger screen densities(even the emulators nowaday, don't show hdpi, xdpi, xxdpi, xxxdpi anymore as they used to...) I thought that placing different "Smallest Width" would give me more consistency on how the app looks across different densities. So far bnb is the only widget I can't make it work, as you will notice from the screenshots I have removed the labels, because is just ugly. Tried using the "Catalog" app and change the dimensions, but got lost trying to apply "smallest width" qualifier and then change my device's densities. Those screenshots are from a Xperia Z5P changing the density from the developer options. I have tried looping over the children of the bnb and changing its params with no luck.

[wcshi]

What's the density of the last screenshot?

[GuanacoDevs]

That's a 1080(I don't really think that it might be used...) Attached are some screenshots(1080,720,360) with "Show Layout Bounds" enabled and you can see that is the BottomNavigationMenuView the one that is squeezing the views as the density grows.

I have tried changing the params.height at runtime, doesnt work, although in the Layout Inspector it shows that the height has been adjusted in the screen it does not.

[wcshi]

I am confused by what you want. Please attach a mock of what you want visually. Do you want the BottomNavigationView to reduce in height to match the height of the BottomNavigationItemView icons?

[GuanacoDevs]

All I want is the BottomNavigationView looks the same at 1080 as in 360. As you can see from my screenshots(all but the 600, it has a different ratio), my widgets look the same dimensions, the only thing that changes is the vertical spacing between them as the System Navigation and Notification bar shrinks.

And actually the NavigationView changes with densities change as the height is set to 56dp, seems like is the BottomNavigationMenuView the one that shrinks. I also tried to styled the bnmv, but I could not find a Material style to inherit from, nor an atribute to apply the style to.

[GuanacoDevs]

This is the bnb style:

    <style name="bnb_style" parent="@style/Widget.MaterialComponents.BottomNavigationView">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">@dimen/fifty_six_dip</item>
        <item name="fontFamily">@font/ubuntu_condensed_regular</item>
        <item name="itemIconTint">@drawable/bnb_colors</item>
        <item name="itemIconSize">@dimen/twenty_four_dip</item>
        <item name="itemTextColor">@drawable/bnb_colors</item>
        <item name="itemTextAppearanceInactive">@style/bnb_style_text_appearance</item>
        <item name="itemTextAppearanceActive">@style/bnb_style_text_appearance</item>
        <item name="labelVisibilityMode">unlabeled</item>
    </style>

I have not been able to find a way to style the BottomNavigationMenuView from xml.