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.
Related
Fortnightly’s short top app bar: Material Design
On the scroll, the top app bar collapses to become a short top app bar, allowing more space for content. The short top app bar contains...
The short top app bar contains two elements: the navigation icon to open the navigation drawer, and the Fortnightly logo.
I found this guideline in material design io site, could anyone share your idea, how to make this using material design, not 3rd party plugin.
This is done using a MaterialShapeDrawable with a ShapeAppearanceModel. You can also check the source code for the toolbar.
what is exact difference between appbar, Toolbar, Actionbar? and when to use them specifically?
I try to find about them but it make me confuse so can any buddy explain to me what is exact difference between them and when to use them or are this are the same name of the single component?
Toolbar
A standard toolbar for use within application content.
A Toolbar is a generalization of action bars for use within application layouts. While an action bar is traditionally part of an Activity's opaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy. An application may choose to designate a Toolbar as the action bar for an Activity using the setActionBar() method.
Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbar may contain a combination of the following optional elements:
A navigation button. This may be an Up arrow, navigation menu toggle, close, collapse, done or another glyph of the app's choosing. This button should always be used to access other navigational destinations within the container of the Toolbar and its signified content or otherwise leave the current context signified by the Toolbar. The navigation button is vertically aligned within the Toolbar's minimum height, if set.
A branded logo image. This may extend to the height of the bar and can be arbitrarily wide.
A title and subtitle. The title should be a signpost for the Toolbar's current position in the navigation hierarchy and the content contained there. The subtitle, if present should indicate any extended information about the current content. If an app uses a logo image it should strongly consider omitting a title and subtitle.
One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
An action menu. The menu of actions will pin to the end of the Toolbar offering a few frequent, important or typical actions along with an optional overflow menu for additional actions. Action buttons are vertically aligned within the Toolbar's minimum height, if set.
2.Actionbar
The action bar is a dedicated piece of real estate at the top of each screen that is generally persistent throughout the app.
It provides several key functions:
Makes important actions prominent and accessible in a predictable way (such as New or Search).
Supports consistent navigation and view switching within apps.
Reduces clutter by providing an action overflow for rarely used actions.
Provides a dedicated space for giving your app an identity.
3.Appbar
The app bar, also known as the action bar, is one of the most important design elements in your app's activities, because it provides a visual structure and interactive elements that are familiar to users. Using the app bar makes your app consistent with other Android apps, allowing users to quickly understand how to operate your app and have a great experience. The key functions of the app bar are as follows:
A dedicated space for giving your app an identity and indicating the user's location in the app.
Access to important actions in a predictable way, such as search.
Support for navigation and view switching (with tabs or drop-down lists).
EDIT
An Action bar is traditionally a part of an Activity opaque window decor controlled by the framework but a Toolbar may be placed at any level of nesting within a view hierarchy. The toolbar provides more feature than ActionBar. A Toolbar may contain a combination of elements from start to end.
Important Note:
Toolbar’s are more flexible than ActionBar. We can easily modify its color, size and position. We can also add labels, logos, navigation icons and other views in it. In Material Design Android has updated the AppCompat support libraries so that we can use Toolbar’s in our devices running API Level 7 and up...
App bar is rather a component name from the design while Toolbar and ActionBar classes are about the implementation. So the question is - what is the difference between Toolbar and ActionBar.
In short, ActionBar is an initial realization of the app bar component and it's bound to Activity. Initially it wasn't even a part of the Activity layout but rather a decoration that's rendered by the system.
Later on Toolbar was introduced, unlike ActionBar, Toolbar isn't bound to Activity, you can place it wherever you want inside your layout and it has a clearer API. To make the adoption of the Toolbar easier, there's setSupportActionBar() method in AppCompatActivity class, so you can use a Toolbar via ActionBar API, and it's where a lot of confusion comes from.
So, which class should you use in a modern Android app? There's no doubts - Toolbar, or its more advanced version from MDC library - MaterialToolbar. But as I mentioned above, a Toolbar can be used as a standalone solution and can also be set as an Activity action bar using setSupportActionBar() method. Take a look at this question Is setSupportActionbar required anymore? and the answer to find more details.
I would say they all are the same container view on the upper end of the application's screen... Toolbar is the name of the Java class defining the features of this box, but on the Android Developers site they're calling it App Bar. As I know, it is an enhanced action bar which was mainly used before Material Design.
EDIT #1: By the way, I suggest to use the App Bar tutorial when creating an application because it is the recommended way to do it.
I would like to create my own Navigation Drawer
using the current Material Design for the Navigation Drawer.
A good example of this implementation is the YouTube app.
In the App the Navigation Drawer overlaps the Action bar and is not below the action bar like in previous implementations.
I've tried following some example from other people's tutorials but they fall short of what I want. I have included some of the implementations that I have tried. I do not want to use a Library,
I want to implement it . Is there currently a tutorial that applies the Material Design Patterns properly.
YouTube Navigation Drawer
http://www.google.com/design/spec/patterns/navigation-drawer.html#
I used https://github.com/chrisbanes/cheesesquare as a reference. However I came across this tutorial that provides a proper guide on how to create a material design navigation drawer whilist also handling the click events of menu items
https://guides.codepath.com/android/Fragment-Navigation-Drawer
After Google introduced Material Design, I have heard about a new widget class called Toolbar.
What is the Toolbar, and what is the exact difference between ActionBar and ToolBar?
I found a good explanation from Android Developers Blog post.
In this release, Android introduces a new Toolbar widget. This is a generalization of the Action Bar pattern that gives you much more control and flexibility. Toolbar is a view in your hierarchy just like any other, making it easier to interleave with the rest of your views, animate it, and react to scroll events. You can also set it as your Activity’s action bar, meaning that your standard options menu actions will be display within it.
Yes, we, Android developers, needed more control over ActionBar, right? And Toolbar is just for it.
In other words, the ActionBar now became a special kind of Toolbar. This is an excerpt from Google's official Material Design spec document.
The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.
More details like how to use Toolbar as an ActionBar are included in above blog post.
The SlidingMenu library is an excellent third party library and I've already used it for a long time. Now I know Android provides a new navigation pattern using Navigation Drawer. It looks like the sliding menu. So is there anyone who already uses these two both? What is the difference and what are the pros and cons? Thanks a lot.
SlidingMenu library is a third party api which uses a RelativeLayout inside. The main advantage is customization according to your requirement. Buy your layouts have to be based on a viewgroup, unfortunatly this negates the <merge> optimisations.
Navigation Drawer is available in the Support Library of android it uses DrawerLayout inside. The main advantage is improved performance.
They also have different visual effects. SlidingMenu looks like horizontal scroll view. Sliding it in will push the main content out.
Pros :
It comes with cool entrance / exit animations for the menu content.
Depending on what Activity you use it on, it can be placed below the Action Bar or next to it (pushing the Action Bar too)
You can explicitly set the touch mode via a setter: margin or full screen. In full screen mode touching anywhere on the screen will open the menu. In margin, only when you slide from the edge of screen will the menu open.
Cons :
You can only control the shadow of the side menu
Navigation Drawer / Drawer Layout looks like an additional top level view in a frame layout. Sliding it in will mask the main content.
Pros :
If you use v4 support lib then it's already there.
You can control both the side menu shadow and obscure the main
content via setScrimColor e.g when the drawer is opened, a fade-in
alpha layer will appear above the main content. This is good to visually separate the content and the menu especially when both have a same color.
Cons:
It can only be placed below ActionBar
There is no setter for touch mode and by default you can only do margin touch mode. Doing a full screen touch mode (like Youtube) involves a lot of work
I think the best advantage is that It is official Google code, I mean it just works and works excellent.
The main disadvantage is that it is very basic to use, I mean... you cannot put two navigation drawer in the same activity or fragment, you can only use one in left and that's it.
You already said it yourself. Sliding menu is third party. Navigation drawer is official. Both have the same purpose, but third party libraries might implementing it slightly differently, depending on which one you use.