I'm looking at the Material Design specification and see this bottom toolbar which looks good with the so-called End-Fab. https://material.io/design/components/app-bars-bottom.html#anatomy
I currently have a standard BottomNavigationBar with a Fab above, but I would very much like to left align the icons and move the fab down over the bar, as in the images in the link above.
Is it possible to do this and still keep the BottomNavigationBar or should I switch to the Bottom app bar (and rewrite the navigation logic)?
Update:
My question is not about how to align the fab, but rather how to incorporate it the same way as with the Bottom toolbar as in the images in the link above.
Related
I want to use BottomNavigation and FloatingActionButton at the same time in Android and there is nothing like this in google material components and also I didn't find any third party library which implements something like this. Attached GIF demonstrate what I want to implement. In fact I want a bottom navigation that one of its tabs has a FAB which placed on the navigation bar and the FAB disappears when another tab is selected.
See the attached image here.
You won't find a Material component for the layout in your example since it's counter to the Material Design Spec.
Floating Action Button (FAB) represents the primary action of a screen
The example would provide multiple "primary" interactions since its mixed with navigation. I would not recommend using the FAB in the context of a bottom navigation bar. Instead, separate them visually for the user's benefit by moving the FAB up and to the right of the page. Here are the Material Docs for Extending the FAB
Now you don't have to follow the Material Spec BUT you shouldn't expect pre-built Material components to ignore it.
This image is taken from this document in Material Design
specification. It is captioned:
Flexible toolbar and card toolbar
Why are they calling this toolbar flexible? Does this mean its dimensions are flexible or something like that?
The following images are taken from the same doc, and are captioned
Bottom toolbar that launches to a shelf and clings to the top of the
keyboard or other bottom component
and
Bottom toolbar shelf
respectively.
So what is that shelf and what is meant by a toolbar launching to that shelf?
Why are they calling this toolbar flexible? Does this mean its dimensions are flexible or something like that?
The reason that the Toolbar is referred to as flexible is because compared to the old ActionBar, the Toolbar is extremely flexible in what you can do with it. You can even have it it be dynamic and have animations as opposed to the ActionBar that you have almost no control over.
So what is that shelf and what is meant by a toolbar launching to that shelf?
In the first example the reason it is referred to as a shelf is because it rests above the keyboard or anything else at the bottom of your screen. In the second instance it would appear that it is a misnomer and instead it should be a Bottom toolbar with sheet. Sheets were also introduced into the Material Design Specs and seem to be a better fit for this instance.
I am using the newest AppCompat library and replaced the SupportActionBar with a Toolbar, as suggested by the Android developer's blog. I want to display a second Toolbar at the bottom of the screen, that shows an additional Menu from some xml menu resource, but nothing else.
I have two problems with that:
Although nothing but a Menu is displayed (using Toolbar.inflateMenu()), the Menu occupies only a small space on the right side of the toolbar.
The Overflow Action Menu expands to the bottom of the toolbar and is therefore not shown. It should expand to the top.
Here is a screenshot of the bottom Toolbar:
How can I solve those issues without being forced to create custom views for my Buttons?
I have a similar problem as found on this specific question.
I'm using a Toolbar from the v7 support library, and a custom layout. If I have no options menu, I have a result similar to what OP has on the question linked above:
However if I have an options menu, it shifts the toolbar a little bit to the left (start). I would like to have it over the toolbar.
Is it possible? The only way I could hack it is by adding a negative right (end) margin to the toolbar layout, however this moves the menu outside of the screen…
Initially, the whole Toolbar contained several views, so they had to share the width with the action menu.
Now instead I wrapped the Toolbar and the other views in a container (a FrameLayout), so that they overlap without sharing the width. I just need to be careful with the margin at the top so that the other views don't overlap with action icons.
Drawer layouts are typically pulled from the action bar, at least per the official docs. Is there a way to have a pull ImageView attached to the bottom of the drawer? So that the user would tap or pull the ImageView to draw out the navigation drawer? I am referring to the docs at http://developer.android.com/training/implementing-navigation/nav-drawer.html#ActionBarIcon
On newer devices you could try to rotate the view. But I don't know if this will work. See this answer Android:How to rotate LinearLayout