I'm currently migrating to Material3 and had to no...

# compose

[Lilly]

I'm currently migrating to Material3 and had to notice that the M3 BottomBar does not has the same purpose as the M2 euqivalent and also does not has the same style, e.g. no cutout with an extended FAB button. Unfortunately there is no explanation why this component was degraded. Also Banner component was dropped. Feels bad tbh. Is someone aware of the reasons behind these decisions? Another question would be if it is worth to migrate? Is this the new trend regarding UI/UX that M3 is representing? The only reason why I started migration is the stable status of the library and still most of the components are experimental :/

[Ian Lake]

Have you looked at the Material3 design site? That lists exactly what components are recommended and is the source of truth for what the components (which are specifically for matching those designs) will support.

For example, it seems like if you are looking for a bottom bar with a FAB, that is covered in the docs specifically: https://m3.material.io/components/navigation-bar/guidelines#c5a1eb4e-7837-4063-8e11-9b3ce1879d6a

[Ian Lake]

AFAIK, there's never been a component called Banner though?

[Lilly]

@Ian Lake I had a look into the guidelines. While the design of the bottom bar didnt change that much, the purpose changes. There is Navigationbar but this requires navigation. What if I have a screen that serves as an entry point to a more complex hierarchy. I have attached my main screen, the pro of the bottom app bar was the prominent extended FAB but without the need of actions or navigation context. How could I design this screen with m3?

[Ian Lake]

Oh, you meant a bottom app bar: https://m3.material.io/components/bottom-app-bar/guidelines

Yes, that exists in Material3 and in Material3 Compose

[Lilly]

Yes but the concept of docking a FAB was dropped. Should I stick with the actual design or should I redesign the screen more m3 conformal? If you suggest former one, can you give me a hint how to dock the fab and how to get a cutout. I guess the concept of cutouts was also dropped. Otherwise how would you layout the screen?

[Ian Lake]

Right, the FAB is now right aligned inside the bottom app bar and that's exactly what the Material3 Compose library provides: https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#BottomAppBar(kotlin.Functio[…]ndation.layout.WindowInsets)

It is just a slot for the FAB though, so there's nothing stopping you from putting an extended FAB in there I guess?

[Ian Lake]

Personally, you might consider moving the overflow menu to the top right (which is usually where I, as a user, would look for more options, and just use the extended fab at the bottom, skipping the bottom app bar entirely, but YMMV

[Lilly]

ok thanks for your opinion Ian. Regarding the banner component: m2 does mention the banner component but it was never implemented in Android. In m3 it isnt mentioned anymore. Do you know why it got never that much attention?

[Ian Lake]

No idea about that - I'm just a user of those libraries, not a designer or someone who works on them so your guess is as good as mine on that part