material-components / material-components/material-components-android

[BottomNavigation] Disable item view clipping

Open
#1,107 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature request Good First Issue Widget: BottomNavigation
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

Is your feature request related to a problem? Please describe.
Currently, item icons are clipped to 24dp x 24dp. I'd like the flexibility to override this to allow for wider icons.

While it is possible to change the overall size of the icons using itemIconSize, this is not ideal as it will scale smaller image assets up to fit that size - ie, it's not a maximum size, it's the actual size.

Currently, my working solution is to iterate through all the bottom bar item views, disable clipping for children, and changing the scale type to CENTER (I'm guessing the default is FIT_XY?).

        val menuView = bottomNavigation.getChildAt(0) as BottomNavigationMenuView
        for (i in 0 until menuView.childCount) {
            val itemView = menuView.getChildAt(i) as FrameLayout
            val iconView = itemView
                .findViewById<AppCompatImageView>(com.google.android.material.R.id.icon)
            itemView.clipChildren = false
            iconView.scaleType = ImageView.ScaleType.CENTER
        }

This allows me to have a wider icon than 24dp without getting clipped.

Describe the solution you'd like
Because I'm really doing two things here, I think it makes sense to expose these two methods on BottomNavigationView via exposing BottomNavigationItemView's clipChildren and the icon view's scaleType. This could be via BottomNavigationView methods -

itemClipChildren and itemIconScaleType

mirroring similar naming of eg itemIconTint and itemTextColor

Describe alternatives you've considered
This could be condensed down to one method but that would reduce flexibility that others may need outside my particular use case.

Additional context
image

Notice the sport icon here - it's a little wider than the other icons.

If you like the idea, I'm happy to write the pull request myself but wanted to raise it in case other ideas are suggested or changes requested.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with BottomNavigationView and BottomNavigationItemView, then compare the existing itemIconTint and itemTextColor APIs with the icon and child-view behavior described in the issue. Done means exposing controls for item clipping and icon scale type so wider icons can render without clipping, while preserving independent control over both settings.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, kotlin
Domain
mobile
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.