Problems with BottomAppBar Elevation
See original GitHub issueVersion number
Library version: 1.0.0-alpha2
Details
While trying out the all-new BottomAppBar I’ve noticed that it has no elevation, which should be present by default as per the guidelines, and even worse than that is the fact there is no way to set it manually (.setElevation(…) & .setTranslationZ(…) have no effect).
I have also analyzed the source code of the aforementioned widget and it seems like the following should be responsible for the drawing of the background shadow:
topEdgeTreatment =
new BottomAppBarTopEdgeTreatment(fabCradleMargin, fabCornerRadius, fabVerticalOffset);
ShapePathModel appBarModel = new ShapePathModel();
appBarModel.setTopEdge(topEdgeTreatment);
materialShapeDrawable = new MaterialShapeDrawable(appBarModel);
materialShapeDrawable.setStrokeWidth(1f /* hairline */);
materialShapeDrawable.setShadowEnabled(true);
materialShapeDrawable.setPaintStyle(Style.FILL);
DrawableCompat.setTintList(materialShapeDrawable, backgroundTint);
ViewCompat.setBackground(this, materialShapeDrawable);
while it hints at its role in the drawing of the shadow, no shadow is actually getting drawn.
I believe this is a bug as the same widget is used in the Google I/O 2018 app, where it is displayed properly (with default elevation).
Screenshots
- My sample app
- Google I/O 2018 app
Issue Analytics
- State:
- Created 5 years ago
- Reactions:7
- Comments:23 (5 by maintainers)
Top Results From Across the Web
Cannot get elevation in BottomAppBar - Stack Overflow
1 Answer 1 ... Part of the problem is the way the lighting system works on Android. There is a light source from...
Read more >[BottomAppBar] No shadow is shown above the component ...
The BottomAppBar does not display any shadow/elevation because the shape of the background ... Still waiting, the android:elevation is not working any more....
Read more >BottomAppBar elevation issue fix - by Shekar allam - Medium
In 'material:1.0.0- alpha01' BottomAppBar shows dark elevation like this. “BottomAppBar elevation issue fix” is published by Shekar allam.
Read more >App bars: bottom - Material Design
Overlap : The FAB is at a higher elevation than the bottom app bar, and has no effect on the bar's shape. Inset:...
Read more >AppBar class - material library - Flutter - Dart API docs
appBar property, which places the app bar as a fixed-height widget at the top of the screen. ... To remedy the problem, override...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
My bad. I update the dependency
implementation ‘androidx.appcompat:appcompat:1.1.0-alpha01’ implementation ‘com.google.android.material:material:1.1.0-alpha02’
The shadow works fine now but when I set the fab to the end of bottomappbar the icons on the bottomappbar are also aligned at the end instead of the right side. It makes the icons and the fab collapsed at the end of bottomappbar
@davidlira94 still waiting for the stable release, which should have that issue addressed.