I have a menu layout with only one item in it.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/toolbar_right_button"
android:icon="#drawable/ic_toolbar_locked"
android:orderInCategory="1"
android:title="Logout"
app:showAsAction="always|withText"/>
</menu>
As you can see I've included the withText attribute but I still only get the icon.
How can I get both the icon and text to show?
I agree with your answer, but I had to do some digging to get it to work in my code, ultimately, I had to create an onClickListener for the button.
In my code, I wrote in the onCreateOptionsMenu(Menu menu) method:
menu.getItem(indexInMenu).getActionView().findViewById(R.id.button_logout).setOnClickListener(...);
This makes the menuItem responsive when it's replaced with a button in app:actionLayout
I'm not sure why withText wouldn't work for me so I just created an actionLayout to use instead.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/toolbar_right_button"
android:icon="#drawable/ic_toolbar_locked"
android:orderInCategory="1"
android:title="Logout"
app:actionLayout="#layout/menu_item_logout"
app:showAsAction="ifRoom|withText"/>
</menu>
and the actionLayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/logout_button"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/ic_toolbar_locked"
android:gravity="center_vertical"
android:text="Logout"
android:textColor="#color/PrimaryColour"/>
</RelativeLayout>
I have try your menu xml, and it worked on android 4.1.1, 5.0.0
but it not worked on 4.3
to fix this, please refer to How to get text on an ActionBar Icon?
it use custom layout for the item
You could try:
<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" >
<!-- "Mark Favorite", should appear as action button if possible -->
<!-- Settings, should always be in the overflow -->
<item
android:title="Settings"
android:id="#+id/mainMenu"
android:icon="#drawable/ic_3d_rotation_black_24dp"
app:showAsAction="always">
<menu>
<item
android:id="#+id/menu_logout1"
android:icon="#drawable/ic_3d_rotation_black_24dp"
android:title="logout1"/>
<item
android:id="#+id/menu_logout3"
android:icon="#drawable/ic_3d_rotation_black_24dp"
android:title="logout3"/>
</menu>
</item>
<item
android:id="#+id/menu_logout2"
android:icon="#drawable/ic_3d_rotation_black_24dp"
android:title="logout2"
app:showAsAction="always"/>
</menu>
Note, that this example will also paint some icons, so if you don´t want the icons, just remove the icon attribute.
Remove icon from <item
android:icon="#drawable/ic_baseline_add_24"
Remove this line then it will show hope it worked for u
When the text in your toolbar menu items is not showing, this is probably related to your style settings. For example, when you have organized your style in a way that app title in toolbar is shown in white color, your menu items may become white on white.
To solve this, you need to set two attributes to your toolbar:
This is the general Style for the toolbar. Textcolor is white. Maybe you are using something like this when you are facing the "no text"-issue
<style name="ToolBarStyle" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
</style>
To make sure that text in menu is showing, not only set the app:theme of your toolbar but also the app:popuptheme. In this example popuptheme is set to a light theme because this leads to black text.
<androidx.appcompat.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/supplyon_blue"
app:theme="#style/ToolBarStyle"
app:popupTheme="#style/ThemeOverlay.MaterialComponents.Light"
android:id="#+id/toolbar" />
Play around with this setting and it will probably solve your problem.
Related
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.
hi there I try set ifroom in my menu item. you can see in this code I try all possible senario (please see each showAsAction item
<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/action_forward"
android:title="forward"
android:icon="#drawable/ic_action_arrow_forward"
android:showAsAction="ifRoom"
></item>
<item
android:id="#+id/action_zoom_in"
android:title="zoom in"
android:icon="#drawable/ic_action_zoom_in"
android:showAsAction="ifRoom|withText"
></item>
<item
android:id="#+id/action_home"
android:title="home"
android:icon="#drawable/ic_action_home"
app:showAsAction="ifRoom|withText"
></item>
<item
android:id="#+id/action_refresh"
android:title="refresh"
android:icon="#drawable/ic_action_refresh"
app:showAsAction="ifRoom"
></item>
<item
android:id="#+id/action_zoom_out"
android:title="zoom out"
android:icon="#drawable/ic_action_zoom_out"
showAsAction="ifRoom"
></item>
<item
android:id="#+id/action_back"
android:title="back"
android:icon="#drawable/ic_action_arrow_back"
app:showAsAction="always"
></item>
</menu>
but it just show action_back and action_home in main page.
I am noob in android studio but I think this error related to width of menu.
(It is not 100% width)
Please see my main_activity.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<include
android:id="#+id/tool_bar_bottom"
layout="#layout/tool_bar_bottom"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_gravity="center" />
</LinearLayout>
and
tool_bar_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/ColorPrimary"
android:elevation="2dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark"
xmlns:android="http://schemas.android.com/apk/res/android" />
I think the structure is true and values of all layout_width is match_parent so why ifroom do not work for me?
Android will show menu always if you set "showAsAction" attribute as "always". If you set "ifRoom", that will be displayed only if the actionbar has room to display you menu item, else it will display a overflow icon.
In your case, you are seeing "action_back" because it has "always". then "action_home" becuase there is room for one icon and that is the first item which has "app:showAsAction" attribute. others have "android:showAsAction" attribute. More explanation on this behaviour is below.
If your app is using the Support Library for compatibility on versions
as low as Android 2.1, the showAsAction attribute is not available
from the android: namespace. Instead this attribute is provided by the
Support Library and you must define your own XML namespace and use
that namespace as the attribute prefix. (A custom XML namespace should
be based on your app name, but it can be any name you want and is only
accessible within the scope of the file in which you declare it.)
I am trying to add SwitchCompat to Overflow menu using this code below:
main.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_dummy_content"
android:title=""
android:actionViewClass="android.support.v7.widget.SwitchCompat"
app:showAsAction="never"
app:actionLayout="#layout/menu_item_switch"/>
<!-- TODO: Delete this after bug fix-->
<item
android:id="#+id/menu_dummy_content_2"
android:title="Second Title"
app:showAsAction="never"/>
</menu>
The layout for menu_item_switch is:
<android.support.v7.widget.SwitchCompat
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/menu_item_switch_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/menu_item_dummy_tasks"
android:layout_centerVertical="true"/>
If I do app:showAsAction="ifRoom" or anything, the switch appears perfectly fine and the listeners work fine. But as soon as I make the showAsAction as never. The switch view becomes white/empty but the onOptionsItemSelected says the clicked item is menu_dummy_content.
I also tried using only TextView in the custom layout, and that too comes as empty. Am I missing something?
Since you set the showAsAction attribute to never, then these menu item will never show as action layout.
I believe you need to add Title Text in here...
<item
android:id="#+id/menu_dummy_content"
android:title=""
android:actionViewClass="android.support.v7.widget.SwitchCompat"
app:showAsAction="never"
app:actionLayout="#layout/menu_item_switch"/>
like this...
android:title="First Title"
I have an action bar with the follwing menu:
<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="br.com.putzbati2.PrincipalActivity" >
<item android:id="#+id/action_mensagem"
android:title="Mensagem"
android:icon="#drawable/barra_superior_envelope"
android:showAsAction="always|withText" />
<item android:id="#+id/action_carro"
android:icon="#drawable/barra_superior_carro"
app:showAsAction="always"
android:title="Meus Carros"/>
<item android:id="#+id/action_settings"
android:title="#string/action_settings"
android:orderInCategory="100"
app:showAsAction="never" />
</menu>
But the withText doesnt work. It shows only the icon.
I've already try to use android:showAsAction instead of app:showAsAction and when I do this, it doesnt show the icon neither the text. Does any one know how to help me?
I've found this solution, but as I said, it doesnt work for me
app:showAsAction ifRoom is not working on appcompat action bar
You can use like this:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#+id/action_mensagem"
android:title="#string/id_item_mensagem"
android:icon="#drawable/id_item_mensagem"
android:showAsAction="always|withText" />
<!-- ... another items -->
</menu>
'always|withText' will work if there is enough room, otherwise it will only place icon! You are using so much items with text, probably you don't have room. So you will see only the icon.
You can check it if you rotate your application to landscape.
Options menu has a default color i.e White, I want to change this color to GREEN.
Right now i have tried to add a drawable to my menu item to change its color, but its not working, here is the menu.xml code
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:icon="#drawable/character"
android:id="#+id/icon12"
android:title="test"
/>
<item
android:id="#+id/text"
android:title="Text"/>
<item
android:id="#+id/icon1"
android:title="Icon and Text"
android:icon="#drawable/item_selector"/>
<item android:id="#+id/about"
android:icon="#drawable/action"
android:title="about"
/>
</menu>
It does not change the background of the menu item. Any Answers would be appreciated.
I have tried many things, e.g hackandroid etc but nothing seemed to work properly.
Here is an artcile that describes customizing the look of the menu that I found useful.