As of Android L, we have a Toolbar instead of the ActionBar although its usages seems the same. They even made back compatibility for Toolbar via support library.
What was the reason they replaced ActionBar with a Toolbar?
Toolbar was added because UIs have evolved past the limitations of the ActionBar. The main difference is that the Toolbar can be decoupled from an Activity's opaque window decor and placed in your custom layout somewhere. From there, you have the freedom to do some more interesting things with the Toolbar. One common example is growing or shrinking the height based on scrolling.
From the Toolbar Documentation.
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.
In modern Android UIs developers should lean more on a visually
distinct color scheme for toolbars than on their application icon. The
use of application icon plus title as a standard layout is discouraged
on API 21 devices and newer.
Related
I'm trying to add the edge-to-edge stuff for the gesture navigation bar to the Tip Time app from Google. I added the transparent navigationBarColor XML tag to themes.xml as well as the following code to the onCreate() function of MainActivity.kt:
This was directly copy-pasted from the documentation. Android Studio says that "it cannot find a parameter with this name" for each of the three margins. I noticed that changing the parenthesis right after <ViewGroup.MarginLayoutParams> to curly braces fixes the compiler error. Maybe the documentation is just wrong?
Anyways, even after fixing that, the app still doesn't look right:
As you can see, the entire view gets shifted up slightly and the "Cost of Service" TextView is partially cut-off by the app bar. What would I need to change to implement the system/navigation bar insets for edge-to-edge content so the UI looks nice? Also, as a side-question, how can I change the dark blue color of the system status bar to match the color of the app bar so that they look blended?
As per documentation for edge to edge contents:
Draw behind the status bar if it makes sense for your content and
layout, such as in the case of full-width imagery. To do this, use
APIs such as AppBarLayout, which defines an app bar pinned to the top
of the screen.
So, while handing the window insets (especially the top one), you can't use the default ActionBar, instead you need to customize that with AppBarLayout and ToolBar, and to make it act as the ActionBar, use setSupportActionBar(), and a NoActionBar app theme; it'd be <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.NoActionBar"> in the shared repo.
the entire view gets shifted up slightly and the "Cost of Service" text field is partially cut-off by the app bar.
The reason that the sample uses the default ActionBar instead of a customized one; when it comes to handle the top window insets, it won't affect the default ActionBar; notice that you pass in the activity's root layout to setOnApplyWindowInsetsListener callback, and as the ActionBar is not a part of the activity, it won't be affected. Therefore the activity is shifted up behind the ActionBar when the top inset is removed. So, to solve this you have either to totally remove the default ActionBar or to use a custom toolbar instead.
Also, as a side-question, how can I change the dark blue color of the system status bar to match the color of the app bar so that they look blended?
Use a transparent status bar color in the app's theme:
<item name="android:statusBarColor" tools:targetApi="l">#android:color/transparent</item>
If there is a toolbar, it is usually passed into setSupportActionBar(). Why?
As per docs
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.
But in simple ways, this is a way of telling the Activity that you are interested in using the features related to Toolbar. It will delegate the functionalities related to your defined toolbar. It helps activity to understand the many of the requirements some of them mentioned below.
1) Setting menu options
2) Setting Navigation drawer
3) Setting common Toolbar
4) Setting back button on the top left
5) Using an icon for brand identification
6) Setting a common title or subtitle
7) And many more
If you don't mention for these functionalities by telling the activity using setSupportActionBar then you have to create all this by your self and support them back to the older version. With Toolbar it comes free and you have to just tell a activity to use it will take of supporting different functionalities itself.
if you want to apply your custom toolbar instead of default toolbar then to set toolbar into that specific screen/activity you must be use setSupportActionBar() along with your toolbar. ;)
I have an app, which have an action menu item on the right (2).
I need an ulterior menu in the left(1) or a button in the action bar, is that possible?
I attach a image.
enter image description here
You may create a custom toolbar. The standard height of a toolbar is 89dp.
To create a custom toolbar you should make your activity view container RelativeLayout. Then create a custom toolbar view (it may also be RelativeLayout) which height is 89dp. Then add your toolbar to the main container and set alignParentTop to true. So you have a custom flexible toolbar and you can add any view to it.
This way is very comfortable to use any custom views on your toolbar.
I also faced the same situation of customizing action bar. After a lot of searching I got the solution which is Toolbar.
Checkout: https://developer.android.com/training/appbar/setting-up
I think from now on, you should start using Toolbar as the default action bar for your apps. It provides high level of customization and material design features.
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 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.