Top is the default padding for the upnavigation arrow when you set
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
I would like the Toolbar to look more like the bottom image, as I want the title to indicate where the upnavigation arrow will send the user to rather than being a description of the current activity. So far I have tried adding a custom textview to the toolbar, and setting app:contentInsetStartWithNavigation="0dp" as per this similar question. But as the author notes, this doesn't remove the padding to the right of the arrow. How can I get the toolbar to look more like the second image? Current xml for my toolbar is as follows:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_doc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:contentInsetStartWithNavigation="0dp"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:gravity="left"
android:id="#+id/txtTitle"
android:textColor="#FFFFFF"/>
</android.support.v7.widget.Toolbar>
I further provide the xml for the menu, which I add to the toolbar using the menu inflater. Another solution I was floating around was adding an arrow icon and textview to the menu itself? But then I'm not sure how I'd give the new arrow icon the same upnavigation behavior.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_baseline_home_24px"
app:showAsAction="always"/>
<item
android:id="#+id/action_settings"
android:orderInCategory="100"
android:title="#string/action_settings"
app:showAsAction="never" />
</menu>
Try setting app:contentInsetStart to 0dp instead of app:contentInsetStartWithNavigation.
<android.support.v7.widget.Toolbar
...
app:contentInsetStart="0dp">
Related
I have to show back icon, Logo and text (Next) in Toolbar. Next is right aligned. I tried placing text via menu. I have set logo and back button to toolbar.
toolbar.setLogo(R.mipmap.logo);
toolbar.setNavigationIcon(R.mipmap.back);
Also, I have inflated following menu in onCreateOptionsMenu
Menu inflated:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
>
<item
android:id="#+id/action_next"
android:title="#string/next"
app:showAsAction="always" />
Text Menu is not visible at all. if I put icon in menu item, it gets displayed.
I have used android.support.v7.widget.Toolbar.
Edited:
I solved it. In case someone else gets struck with such issue.
Please add
<item name="android:actionMenuTextColor">#color/blue</item>
in styles. Menu itemw as getting selected on click but was not visible, means it was showing white text color on white toolbar. Setting menuText color solved my problem.
Android Documentation explains that the withText option for showAsAction will
Also include the title text (defined by android:title) with the action item.
Since that is what you want, code the following.
<item
android:id="#+id/action_next"
android:title="#string/next"
app:showAsAction="always|withText" />
You can do something like this:
First, remove default title in your Activity:
getSupportActionBar().setDisplayShowTitleEnabled(false);
Then, your toolbar layout can be like this:
<LinearLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/material_blue"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:gravity="end"
android:text="#string/app_name"
android:textColor="#android:color/white" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
And, in your activity handle the click event:
toolbarTop.findViewById(R.id.toolbar_title).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Log.d(TAG,"Clicked");
}
});
Try Changing to support widget. This worked for me
app:actionViewClass="android.support.v7.widget.SearchView"
This what it looked after the change
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<item android:id="#+id/search"
android:title="#string/search_title"
android:icon="#drawable/ic_search"
app:showAsAction="always|withText"
app:actionViewClass="android.support.v7.widget.SearchView"
tools:context=".AppHome.HomeActivity"/>
</menu>
If you are getting an empty action with no text but blank space in it,
it might happen if you have created your own tool bar in the layout and have also used the Action bar in your theme's parent.
If you are creating your own toolbar then use parent="Theme.MaterialComponents.DayNight.NoActionBar" in your themes, both normal and night themes.
It's happening because of the style used in your layout.
To solve this, define a new style and use it in your layout.
<style name="ToolBarStyle" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
<item name="android:itemBackground">#fff</item> // background color of the menus
<item name="android:textColor">#000</item>// text color of the menus
</style>
Use it like this in your layout
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolBarStyle"
app:popupTheme="#style/ThemeOverlay.MaterialComponents.Light"
android:background="#color/primary_pink"
android:minHeight="?attr/actionBarSize"
android:elevation="4dp"
/>
How can I align items of a toolbar to the left, middle and right? Everytime I inflate the menu from my toolbar_menu.xml it loads the icons to the far right. How can I put them in the order I want? I am using an standalone toolbar at the bottom of the screen.
I Have an AXML which holds the toolbar.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarMenuMain"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#CC2827"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:layout_alignParentBottom="true"/>
My Main activity:
mToolbarMenu = FindViewById<SupportToolbar> (Resource.Id.toolbarMenuMain);
mToolbarMenu.InflateMenu(Resource.Menu.toolbarMenu);
mToolbarMenu.MenuItemClick += mToolbarMenu_MenuItemClick;
And the toolbar_menu.xml.
<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myapp="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_home"
android:icon="#drawable/ic_directions_car_white_24dp"
android:title="Home"
android:layout_gravity="left"
myapp:showAsAction="always"/>
<item android:id="#+id/action_Shop"
android:icon="#drawable/ic_store_mall_directory_white_24dp"
android:title="Shop"
android:layout_gravity="center"
myapp:showAsAction="always"/>
<item android:id="#+id/action_Map"
android:icon="#drawable/ic_map_white_24dp"
android:title="Maps"
android:layout_gravity="right"
myapp:showAsAction="always"/>
</menu>
The layoutDirection attribute should be added to the toolbar tag.
for examle:
android:layoutDirection="rtl"
If you want to align items of a toolbar to the left, middle and right, you need to create seperate layout for it. because in menus you don't have any option to change the position, they will always come on right of the screen. You can use custom layout and inflate it in the tool bar.
please refer - Add custom layout to toolbar
I am using the android.support.v7.widget.Toolbar in my activity.
I added it into my layout for the activity as following:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/add_contact_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/colorPrimary"
android:elevation="6dp"
android:title="#string/add_contact_toolbar_title"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</RelativeLayout>
I inflate the options menu in onCreateOptionsMenu of the activity and I
inflate my menu.xml :
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/add_contact_optionmenu_save"
android:title="#string/add_contact_optionmenu_save"
app:showAsAction="always"/>
</menu>
But unfortunately, the item appears way too far right and is too small:
How can I make it to appear like in all other apps? Bigger, and with more
right margin?
Cheers!
Well to move the MenuItem to a bit left from the right edge, you need to set paddingRight attribute to the android.support.v7.widget.Toolbar.
android:paddingRight="20dp"
To change the size, add the following style <item> to your App Theme.
<item name="actionMenuTextAppearance">#style/ActionBar.MenuTextStyle</item>
<item name="android:actionMenuTextAppearance">#style/ActionBar.MenuTextStyle</item>
<style name="ActionBar.MenuTextStyle"
parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textSize">48dp</item>
</style>
All this being said, a better design pattern is simply to go ahead and follow the Material Design guidelines. I would suggest you have an icon for save rather than the text.
So far, I have achieved the following:
Im using Appcompat Library for customizing my Toolbars.
Files that are in use:
a. app_bar.xml (top toolbar)
b. app_bar_bottom.xml (bottom toolbar)
my main_menu.xml looks like this:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item
android:id="#+id/notices"
android:orderInCategory="100"
android:title="#string/notices"
android:icon="#drawable/ic_notices_white_24dp"
app:showAsAction="never" />
<item
android:id="#+id/exchange_rate"
android:orderInCategory="100"
android:title="#string/exchange_rate"
app:showAsAction="always"
android:icon="#drawable/ic_rupees_white_24dp"/>
and at the app_bar_bottom.xml I have done something like this inside my MainActivity.java :
toolbar = (Toolbar) findViewById(R.id.app_bar_bottom);
toolbar.setLogo(R.drawable.ic_rupees_white_24dp);
setSupportActionBar(toolbar);
The ic_rupees_white_24dp is an image file under drawable folder.
My question:
a. How can I add menu items to specific toolbars, i.e. different action items to top and bottom toolbar? Can it be achieved via xml declarations only without having to use toolbar.setLogo() and so forth?
b. Is there a way to assign each item declared inside menu_main.xml to be set to one particular toolbar only? For eg. the rupees image in the above screenshot is to be put as an action item at the bottom toolbar only?
Forgive me for my stupidity of the question is vague. It aroused only out of my curiosity.
Thank You.
Within each toolbar, you should declare its ActionMenuView
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#color/light_primary_color"
>
<android.support.v7.widget.ActionMenuView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<android.support.v7.widget.ActionMenuView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</android.support.v7.widget.Toolbar>
I'm having a problem trying to center the back button on the support toolbar.
I'm using it inside an ActionBarActivity.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:toolbar="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
toolbar:popupTheme="#style/ThemeOverlay.AppCompat.Light"
toolbar:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
And set the up navigation inside the Activity's onCreate() like this:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(R.string.title_activity_scanner);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
However, what I'm getting is this:
As you can see the back button is misplaced
Edit:
The problem seems to lie in a custom value for ?attr/actionBarSize set to 40dp, however, it turns out now, that it's the title that is misplaced instead.
From the developer.android.com :
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.
So if you set minHeight attribute the same as your toolbar height (layout_height ), the back arrow will be centered vertically.
(2020)
In case you have a non-standard toolbar height, to center the back button nowadays (2k20) with androidx Toolbar you can just use the buttonGravity property.
This allows you to use wrap_content instead of a specific height (minHeight doesn't allow you to do so):
<androidx.appcompat.widget.Toolbar
app:buttonGravity="center_vertical"
android:layout_height="wrap_content"
... />
Inside ActionBarActivity
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBat().setTitle("Hello World");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
Layout code :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary"
app:theme="#style/ToolbarTheme"
app:popupTheme="#style/Theme.AppCompat"/>
And style :
<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primaryDark</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="windowActionBar">false</item>
</style>
<style name="AppTheme" parent="AppTheme.Base">
Remember that toolbar is just viewgroup, so u can style it in any way u like.
Here is image link : Toolbar sample
Hope it helps.
Best way to achieve this is remove regular Back button from the toolbar and add a custom ImageButton in your XML layout and set image to it. You can place this ImageButtton wherever you want on the toolbar.
Your activity layout code should be something like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<ImageButton
android:layout_width="60dp"
android:layout_height="60dp"
android:id="#+id/button"
android:src="#drawable/attach_icon"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
For me, none of the solutions worked. In my case the problem was the margin I applied:
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
... >
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp" />
</android.support.v7.widget.Toolbar>
After applying it to the toolbar directly, the button was centered vertically:
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
... >
<View
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
Piggybacking off of #Rick Sanchez answer - if you know the size of the Toolbar's minHeight attribute you can then use:
android:gravity="top"
app:titleMarginTop="#dimen/margin_to_center"
in the Toolbar to center the text. If you are using android:minHeight="?actionBarSize" then this would be about 13p
#Rick Sanchez answer is work,setup Toolbar's layout_height the same as minHeight
I found in Toolbar constructor have a field can setup button gravity,
mButtonGravity = a.getInteger(R.styleable.Toolbar_buttonGravity, Gravity.TOP);
,but v7 support Toolbar can not setup,
mButtonGravity = Gravity.TOP;
make your button size 56dp and set scaleType to center with no margins on Appbar
Make sure your icon is 24x24 dimensions
I was using
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar">
when I should've been using
<style name="MyActionBar" parent="#style/Widget.AppCompat.Toolbar">