I'm trying to customize the background of my action bar items with a selector, to override what is shown when the button is pressed.
This was pretty easy with menu buttons (e.g., overflow icon), as you can style them with actionBarItemBackground .
Sadly this does not apply for the up/home/left indicator. I have unsuccessfully tried, in my styles.xml:
<item name="actionButtonStyle">;
<item name="actionBarStyle">;
<item name="toolbarStyle">;
None of the nested attributes seem to act on the home icon background. I also searched over android.R.attr and gave a look at this. Is there any way?
I would like to stay with the "up" indicator, without inflating a custom view. In that case, I would also have to inflate the title as well as custom views naturally appear at the end of the title. AND I would lose the burger-to-arrow animation, AND I would have to take care about margins and design guidelines (now managed by AppCompat), and some other bad thing on the way.
I thought about setting a Logo, but that would have some complications as well and I don't think I could change the background anyway.
I thought about Toolbar being a Layout, so I could put custom views in it from XML. If I'm not wrong they appear after the title, so neither this is a good idea.
What can I do?
please let me know if it works
add this to your your theme or if it doesn't take both remove the one with android prefix
<item name="android:selectableItemBackground">#drawable/selector</item>
<item name="selectableItemBackground">#drawable/selector</item>
Example #drawable/selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#ddffffff" />
<item
android:drawable="#android:color/transparent" />
</selector>
Related
I have created a menu and now I want to change the text color of the individual menu titles.
To do this, I first created a style that should contain the corresponding attribute and then called this style in my Activity_home_drawer.xml. However, this only changes the menu TextColor when the corresponding menu title is clicked but is not permanent as I would like it to be.
What do I have to do so that the text color in my menu changes permanently to white and not Black anymore? Is my way of doing it the right way or is there a more elegant way to change the TextColor?
Thanks for any help!
Part of my Activity_home_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view"
android:theme="#style/TextAppearance44">
<group android:id="#+id/category_group">
<item
android:id="#+id/nav_menu"
android:icon="#drawable/ic_store_black_24dp"
android:title="#string/menu_menu"
android:theme="#style/TextAppearance44"
/>
</group>
My TextAppearance44 style
<style name="TextAppearance44">
<item name="android:textColor">#color/colorWhite</item>
<item name="android:actionMenuTextColor">#color/colorWhite</item>
<item name="android:textSize">16sp</item>
<item name="android:titleTextColor">#color/colorWhite</item>
</style>
You need to change your ToolBar style. Check these two tutorials:
Toolbar assigning to activity and styling:
https://android-developers.googleblog.com/2014/10/appcompat-v21-material-design-for-pre.html?m=1
Changing style and items colors in the Toolbar:
https://www.murrayc.com/permalink/2014/10/28/android-changing-the-toolbars-text-color-and-overflow-icon-color/
In your case, you are looking mainly for (code fragment from second tutorial):
<!-- android:actionMenuTextColor is the color of the text of
action (menu) items in the Toolbar, at least in the
Theme.AppCompat theme.
For some reason, they already get the textColorPrimary
when running on API 21, but not on older versions of
Android, so this is only necessary to support older
Android versions.-->
<item name="actionMenuTextColor">#color/abc_primary_text_material_light</item>
I solved it by myself; I added these to lines to my NavigationView in my ActivityHome (where the Menu comes up).
app:itemTextColor="#color/colorWhite"
app:itemIconTint="#color/colorWhite"
Simple mistake, didnot know that there was such a attribute.
I added a toolbar item in my content page:
<ContentPage.ToolbarItems>
<ToolbarItem IconImageSource="icon_dropdown.png"/>
</ContentPage.ToolbarItems>
What I want to have is when a user clicks on the toolbar item, a menu pops down like this. Animated in a way where it slides down revealing the content/menu items.
I've been searching online but the keywords being searched always takes me to spinner, and being new to C# and Xamarin Forms, I am unsure if a spinner is still what I want to achieve something like this because a spinner looks more of a dialog box.
Sample image of what I'm trying to do that I've photoshopped
Any help is highly appreciated. Thanks.
I did some investigation, and find a way to change the position of the overflow popmenu by theme(code attached at the end in case you need it), but unable to change the width to match the whole screen, not sure if Android made some limitations in menu.
If you need a drop down list exact the same of your picture, spinner may not be a perfect choice either, you'd better create a new activity that overlays origin activity and customize the new activity layout, but it's not recommended considering performance. Also, you can find something in an earlier post to see if it gives you any idea.
add a new style:
<style name="OverflowMenuStyle" parent="#style/ThemeOverlay.AppCompat.Light">
<item name="overlapAnchor">false</item><!--not overlay the toolbar-->
<!--<item name="android:dropDownWidth">10dp</item> not work-->
<!--<item name="android:maxWidth">400dp</item> not work-->
<item name="android:paddingRight">0dp</item>
<!--dropDownVerticalOffset is the property you want to avoid overlay the toolbar-->
<item name="android:dropDownVerticalOffset">4dp</item>
<item name="android:dropDownHorizontalOffset">0dp</item>
<item name="android:popupBackground">#BFBFBF</item>
</style>
Android Resource layout folder's Toolbar.xml, change popupTheme to:
android:popupTheme="#style/OverflowMenuStyle"
add an item in MainTheme.Base style:
<item name="actionOverflowMenuStyle">#style/OverflowMenuStyle</item>
I am working on programmatically add a menu-Item into menu. I want to add background color on selection to particular Item. How can I add background to menuItem?
Your answer would be appreciated.
While other answers provide change style (which will affect all menu items, and, as I understand, need is to change one menu item),I propose you to use android:actionLayout attribute to implement your custom layour for menu item.
See documentation for it (search actionLayout there, it's very simple actually).
Also I think there is a possibility to make a selector as your layout and use it.
Update. Sorry, I mislead you :(
All of this will work only if MenuItem is shown as Action (not when pressing on three dots).
Seems like guys given other answers were right - the only way to customize this is changing themes.
But please check this and this - it might help you to provide selector for your purpose.
Also you can create PopupMenu or even PopupWindow, last one is fully customizable.
The last option is to create custom Spinner, check this.
Hope something from this will help you. Thanks.
Firstly You need to create an Style for popmenu as you want refer below sample for that
<style name="MyApp.PopupMenu" parent="android:Widget.Holo.Light.ListPopupWindow">
<item name="android:textStyle">#style/commonEditTextTheme</item>
<item name="android:popupBackground">#drawable/pop_up_menu_bg_with_shadow</item>
</style>
Place of drawable you can also replace with color as you needed or make XML Drawable into your drawable folder
<style name="commonEditTextTheme" parent="#android:style/TextAppearance.Medium">
<item name="android:fontFamily">sans-serif-light</item>
</style>
this pop menu theme add in your main application or activity theme like below
<!--My Theme-->
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
......
<item name="android:popupMenuStyle">#style/MyApp.PopupMenu</item>
</style>
I want to have custom background for the menu items displayed in the ActionBar. I found out that I can do that by adding the following item to my app theme style definition:
<item name="android:actionBarItemBackground">#drawable/actionbar_button</item>
Where actionbar_button.xml contains:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/action_btn_on" android:state_pressed="true" />
<item android:drawable="#drawable/action_btn_off" />
</selector>
However, this causes the background image to also render behind the custom app logo displayed on the left of the ActionBar. After several attempts at figuring out a selector that would include only the buttons, I came up with this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/action_btn_on" android:state_pressed="true" android:state_enabled="true" />
<item android:drawable="#drawable/action_btn_off" android:state_pressed="false" android:state_enabled="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
Which sort of worked, and after the app loads fully the background behind the logo is transparent as I want it. But the problem is that while it's still loading it briefly shows the logo with the button background behind it and more annoyingly, it scales and crops the logo to fit inside the fill area of the 9-patch graphic that is the button background. When finished loading, the background is switched out, but the scaling and cropping remains, which looks quite ugly. How can I fix it?
Have not found a working solution to the general problem of setting image-based backgrounds to ActionBar buttons, but the scaling/cropping does not happen if I use entered XML based backgrounds, such as created with a layer-list of shapes. For some cases in may not be viable, but in my case it was entirely possible, and maybe even better than using a bitmap based resource.
I'm using a custom title bar in my app and it all works fine except that when the app starts up, the original (standard) android title bar is shown for a brief time before it is replaced by my custom title bar.
This is not a problem when the app is already loaded in memory because the 'delay' is not apparent but if the app is not already in memory, it is very obvious.
There's nothing special about the code :
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.main);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.window_title);
I thought about changing the style to have no window title and just include my custom title in the top of the layout but that doesn't seem right.
Thanks for any pointers.
Thomas Devaux has posted a smart solution. It worked in my app
Change the windowTitleBackgroundStyle to use color “#android:color/transparent”.
Also create a style for the text “android:windowTitleStyle” and set its “android:textColor” >to transparent as well.
For completeness to Lluis' answer, here's the full code you need to hide the default-title before the custom-title is initiated:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="CustomWindowTitleStyle">
<item name="android:textColor">#android:color/transparent</item>
</style>
<style name="CustomTheme" parent="#android:style/Theme.Holo">
<item name="android:windowActionBar">false</item>
<item name="android:windowTitleBackgroundStyle">#android:color/transparent</item>
<item name="android:windowTitleSize">50dp</item>
<item name="android:windowTitleStyle">#style/CustomWindowTitleStyle</item>
</style>
</resources>
add a splash screen activity before the main activity loads, should have enough time for the next one to load properly
Are you able to use an app theme to set a custom title globally for your app? See here for a pretty good example. I had a similar problem and i seem to remember going this route fixed it.