ActionBar default color - android

I'm using the Action Bar for the top of my screen and have buttons there. i'd like an additional sequence of butons at the bottom, but there's too many controls for it to fit in the Action Bar, so I'm creating a Custom View and layout. I'm trying to match the color scheme of hte Action Bar, but I can't figure out what the default Android.R.Color is for the Action Bar.
I've set the custom view's layout as shown. There doesn't seem to be a built in color for light_gray, or anything indicating a menu or action bar default color.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#android:color/darker_gray" />
<stroke android:width="1dip" android:color="#333333"/>
</shape>

you can inspect all the styles by looking at styles.xml in your android SDK platforms folder. e.g.,
<your-sdk-dir>/platforms/android-16/data/res/values/styles.xml
looking at API level 16, this is what i see,
<style name="Widget.ActionBar">
<item name="android:background">#android:drawable/action_bar_background</item>
...
if that resource is not public, your best bet is to set the action bar background and your footer background to something you define. you do this by creating a theme in your styles.xml and overriding the action bar style,
<style name="Theme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar</item>
</style>
now create the actual action bar style,
<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/my_background</item>
</style>
now assign this style to your application,
<application
...
android:theme="#style/Theme" >
...

I found myself looking for the colors values inside xml files. I couldn't find it. In the end the most stupid idea was the best:
Print screen of emulator and color picker in gimp. This matched exactly the color I've been looking for.
For me this answer is really stupid. However at the end of a day I've been able to find value very quickly.

Related

Changing the Color of the the Menu Items does not work

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.

set actionbar icon height to match actionbar height

see the problem here, the grey checkbox leaves room from the top and bottom of the action bar:
styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="CustomActionBarTheme" parent="Theme.Base.AppCompat.Light">
<item name="android:windowContentOverlay">#null</item>
<item name="android:actionButtonStyle">#style/ActionButtonStyle</item>
</style>
<!--<style name="ActionButtonStyle" parent="#android:style/Widget.Holo.Light.ActionButton">-->
<style name="ActionButtonStyle" >
<item name="android:height">#dimen/abc_action_bar_default_height</item>
<item name="android:layout_height">#dimen/abc_action_bar_default_height</item>
</style>
i set the item like so:
getMenuInflater().inflate(R.menu.submit_action, menu);
submit_action looks like:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_submit"
android:icon="#drawable/check"
app:showAsAction="always" />
</menu>
and finally, attached is the #drawable/check being used.
any idea how i can get the check to fill the actionbar?
The reason your icon doesn't fill the ActionBar is due to how the ActionMenuItemView measures the icon.
The ActionMenuItemView invokes a maximum size of 32dp when it sets the bounds for your icon
So, it makes so difference how large your image is, the system will always resize it.
any idea how i can get the check to fill the actionbar?
You should use a action layout for your MenuItem, a check mark icon with no background, and change the background color of the action layout parent as you see fit. Here's an example:
layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="?android:attr/actionButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#e8e8e8"
android:clickable="true"
android:contentDescription="#string/cd" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:scaleType="centerInside"
android:src="#drawable/ic_action_tick" />
</RelativeLayout>
MenuItem
<item
android:id="#+id/action_submit"
android:actionLayout="#layout/your_action_layout"
android:showAsAction="always"/>
Accessibility
It's important to make sure your MenuItem is accessible. Normally when you long press an item in the ActionBar a short Toast will display the content description for you, but when you're using a custom MenuItem it's up to you to implement this pattern. An easy way to do this is by using Roman Nurik's CheatSheet. If you're unsure how to use it, you should refer to my answer here that goes into much more detail on creating custom MenuItem layouts.
Alternatively
If you want to use that background color for every MenuItem you have, you could create a custom style and apply it using the android:actionButtonStyle attribute. Here's an example of that:
Your style
<style name="Your.ActionButton" parent="#android:style/Widget.Holo.Light.ActionButton">
<item name="android:background">#e8e8e8</item>
</style>
Your theme
<style name="Your.Theme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionButtonStyle">#style/Your.ActionButton</item>
</style>
Results
Here's what I do with Icons in Android to get the sizing correct. You have an existing project with the res/drawable- folders. You have to put the correct Icon into the correct folder.
Start a new project wizard and when you get to the launcher icon put in the Icon you want to use in your existing project. finish the wizard. The wizard will make the various sizes of Icons for you. Then I manually copy the Icons from the res/drawable-xdpi res/drawable-ldpi etc to the corresponding folder on my existing project. Delete the new project it is no longer needed.

Changing default text colour and still showing disabled menu items in different colour

With Theme.Holo.Light as the base theme, a designer noticed that the default text colour is not black, but a dark grey (#505050). We'd like to change it to black.
Looking for a simple way to change the default to black everywhere in the app, I found that this works:
<resources>
<style name="MyAppTheme" parent="android:Theme.Holo.Light">
<item name="android:textColor">#android:color/black</item>
</style>
</resources>
Now, problem is, that also changes the colour of disabled items in Action Bar's overflow menu. How to override default text colour while still having disabled menu items look "disabled"?
The menu should look something like below, but using android:textColor as above, it changes all the items to black.
I was experimenting with textColorPrimaryInverse, textColorPrimaryDisableOnly, textColorPrimaryInverseDisableOnly and disabledAlpha but those didn't seem to affect the overflow menu.
You can use a drawable as the text colour, and in drawable you can use selector to select the colour according to enabled status. Using following drawable definition as colour will make your disabled menu items grey and the rest black.
In e.g. res/drawable/default_text_colour.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:color="#android:color/darker_gray"/>
<item android:color="#android:color/black"/>
</selector>
Then, using the drawable:
<item name="android:textColor">#drawable/default_text_colour</item>

Window background is clipped by status bar

I am setting image as window background:
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:windowBackground">#drawable/bg_window</item>
</style>
It works for tablets and fullscreen windows:
but on the handset it is clipped by status bar:
Is this the way things work? How do I avoid it? Of course, I could set the background for each layout, but I want to know if this the only way to solve the problem.
My solution to this problem (at least for phones) was to create a xml drawable with the statusbar height as the top offset
e.g. drawable/window_background.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="25dp">
<bitmap android:src="#drawable/some_background" />
</item>
</layer-list>
This will not work, if the status bar is on the bottom though.
EDIT: edited the answer to use a single xml drawable, as sugested by Aleksejs Mjaliks
Try it in the following way..
<style name="AppTheme" parent="#android:style/Theme.Holo.Light.NoActionBar.Fullscreen">
<item name="android:windowBackground">#drawable/bg_window</item>
</style>
:)

Is it possible to grey out (not just disable) a MenuItem in Android?

There's a question for the same functionality on Blackberry, and a few different threads referred to this bug (which has since been closed without resolution as far as I can tell), but I haven't found one specifically for Android.
I'm calling setEnabled(false) on certain MenuItems based on some state, but they visually look the same. I'd like them to be offset in some way, so that the user knows that the option currently isn't available -- is there any way to do that?
On all android versions, easiest way to use this to SHOW a menu action icon as disabled AND make it FUNCTION as disabled as well:
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
MenuItem item = menu.findItem(R.id.menu_my_item);
if (myItemShouldBeEnabled) {
item.setEnabled(true);
item.getIcon().setAlpha(255);
} else {
// disabled
item.setEnabled(false);
item.getIcon().setAlpha(130);
}
}
I had the same issue. There are two ways of getting this to work:
Put your icons in a StateList so that a different icon will be used on disable
What I use now. Change the icon yourself with something like this in onPrepareOptionsMenu():
public boolean onPrepareOptionsMenu(Menu menu) {
boolean menusEnabled = reachedEndOfSlidehow(); // enable or disable?
MenuItem item = menu.findItem(R.id.menu_next_slide);
Drawable resIcon = getResources().getDrawable(R.drawable.ic_next_slide);
if (!menusEnabled)
resIcon.mutate().setColorFilter(Color.GRAY, PorterDuff.Mode.SRC_IN);
item.setEnabled(menusEnabled); // any text will be automatically disabled
item.setIcon(resIcon);
}
You can call invalidateOptionsMenu() (or from ABS, supportInvalidateOptionsMenu()) to rebuild the menu.
EDIT: Updated solution 2
Source: https://groups.google.com/forum/?fromgroups#!topic/actionbarsherlock/Z8Ic8djq-3o
I found a new way to solve this issue using a drawable selector xml file. You just create a selector with the icon you want to use in your menu item, then you can either change the tint, alpha or both of the bitmap:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true">
<bitmap android:src="#drawable/ic_menu_item"
android:tint="#color/enabled_color"
android:alpha="#integer/enabled_alpha"/>
</item>
<item android:state_enabled="false">
<bitmap android:src="#drawable/ic_menu_item"
android:tint="#color/disabled_color"
android:alpha="#integer/disabled_alpha"/>
</item>
</selector>
As a side note; I like to set the tint to "?android:attr/textColorPrimary" for enabled state and "?android:attr/textColorHint" for disabled state. This way it will adjust depending on the theme used.
Then you can just set the icon in your menu xml file to the selector resource:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/menu_action"
android:orderInCategory="0"
android:title="#string/title_menu_action"
android:icon="#drawable/ic_menu_item_selector"
app:showAsAction="ifRoom"/>
</menu>
Then when you call item.setEnabled(enabled) the color and/or alpha of the icon will change along with the state!
The way I did it is by using "itemIconTint" in NavigationView, you can also grey out the text by using "itemTextColor"
This is Navigationview:
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:itemBackground="#color/white"
android:background="#color/white"
app:itemTextColor="#color/menu_text_color"
app:itemIconTint="#color/menu_text_color"
app:menu="#menu/main_drawer" />
and the "#color/menu_text_color" is a selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/primaryColor" />
<item android:state_enabled="false" android:color="#color/disabled_text_color" />
<item android:color="#color/primaryText" />
</selector>
Finally, if you want to disable a menuitem,
MenuItem item = mNavigationView.getMenu().findItem(R.id.your_menu_item);
item.setEnabled(isEnable);
Done!
I was having difficulty with this on modern android with MaterialComponents theme. My problem was I had set <item name="actionMenuTextColor">#color/blue</item> in styles.xml and this overrides the text color whether the item is enabled or disabled. The solution is to set a Color state list and not a color directly.
My styles attribute now looks like:
<item name="actionMenuTextColor">#color/menu_color_selector</item>
I had an issue where neither my the text nor the icon was visibly changing. The other answers either didn't work for me or weren't very elegant. Here's an answer that works for the latest Material recommendations.
You should be able to simply call menu.findItem(R.id.menu_my_item).isEnabled = false in onPrepareOptionsMenu(menu: Menu).
(If you need onPrepareOptionsMenu to run again, you can simply call invalidateOptionsMenu() or activity?.invalidateOptionsMenu() (from a fragment) and the application will queue up the menu to be recreated. Alternatively you can store off the menu item in a member variable to modify it later, but be careful to destroy your reference to it within onDestroyOptionsMenu to avoid a memory leak.)
The fact that the menu item is disabled should be enough to grey out the text or the icon automatically. The difficulty is in setting up your styles to make this work.
Short Answer
First create a color state list my_color_state_list.xml that you want your icons and text to use (e.g. black when enabled, grey when disabled). (See the full answer for an example.)
If you're using com.google.android.material.appbar.MaterialToolbar, you can tell it to use this selector for icons and text by providing a custom theme overlay. In your activity's XML, give the toolbar the attribute android:theme="#style/Foo" and define that style somewhere as:
<style name="Foo">
<item name="colorControlNormal">#color/my_color_state_list</item>
<item name="actionMenuTextColor">#color/my_color_state_list</item>
</style>
Now when the menu item is enabled or disabled via menu.findItem(R.id.menu_my_item).isEnabled = false the text will automatically change color, and any icons which use the color ?attr/colorControlNormal will also automatically change color.
Full answer
My starting place
My menu items are part of a Material toolbar. This answer may help for other kinds of toolbar/app bar, but your mileage may vary. In my activity I have something like this:
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.MaterialComponents.Toolbar.Surface"/>
and the theme I'm using looks something like this:
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="colorPrimary">#color/blue</item>
<item name="colorSecondary">#color/green</item>
<item name="colorSurface">#color/lightGrey</item>
<item name="colorOnSurface">#color/black</item>
[...]
<item name="windowActionModeOverlay">true</item>
</style>
It is also convention that the icon you use in buttons and menu items (and everywhere really) should have their default color be ?attr/colorControlNormal. So for example I might have a vector image which looks like:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="?attr/colorControlNormal"
android:tintMode="src_atop">
<path android:pathData="..." android:fillColor="#android:color/white"/>
</vector>
If you download an icon from Material Icons you will see they all use colorControlNormal.
What I needed to do
If you look back at the definition of my toolbar, you will see it uses a ThemeOverlay ThemeOverlay.MaterialComponents.Toolbar.Surface which is defined as:
<style name="ThemeOverlay.MaterialComponents.Toolbar.Surface" parent="">
<item name="colorControlNormal">#color/material_on_surface_emphasis_medium</item>
<item name="actionMenuTextColor">#color/material_on_surface_emphasis_medium</item>
</style>
This sets the menu item text color and icon color to #color/material_on_surface_emphasis_medium which does not respond to being enabled or not. #color/material_on_surface_emphasis_medium looks like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="#dimen/material_emphasis_medium" android:color="?attr/colorOnSurface"/>
</selector>
(You may be using ThemeOverlay.MaterialComponents.Toolbar.Primary instead, which has a similar issue - it simply uses colorOnPrimary.)
We need to replace this with our own color state list which responds to enabled state. So, make a new file res/color/menu_item_selector.xml that looks something like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:alpha="#dimen/material_emphasis_medium" android:color="?attr/colorOnSurface"/>
<item android:alpha="#dimen/material_emphasis_disabled" android:color="?attr/colorOnSurface"/>
</selector>
You see I've used the same conventions that the material library does by using their constants to define the alpha values, and I used colorOnSurface as my color. If you were using ThemeOverlay.MaterialComponents.Toolbar.Primary you would want colorOnPrimary instead. Of course you can use any color or alpha here, it's up to you.
And now make a new ThemeOverlay in res/values/styles.xml to point to this selector, inheriting from whatever ThemeOverlay you were using:
<!-- Toolbar - overrides the menu text color to use a selector that responds to whether it's enabled or not -->
<style name="ThemeOverlay.MyTheme.Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Surface">
<!-- Color used in the icons of menu actions (i.e. non-overflow menu items). This is just convention, this will affect anything that uses ?attr/colorControlNormal) -->
<item name="colorControlNormal">#color/menu_item_color_selector</item>
<!-- Color used in the text of menu actions (i.e. non-overflow menu items) -->
<item name="actionMenuTextColor">#color/menu_item_color_selector</item>
</style>
And now finally we can apply this ThemeOverlay to the toolbar:
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.MyTheme.Toolbar"/>
setEnabled(false) works fine on API Level < 14 but on 14 the item still clickable.
Have a look at this link
setEnabled can also be used for MenuItems.
Here's a simple way to do it (using Kotlin):
fun changeMenuItemColour(enabled: Boolean) {
var menuItem = SpannableString(mCustomToolbar?.menu?.findItem(R.id.some_menu_item)?.title)
var style = activity?.resources?.getColor(R.color.darkGraphite)!!
if (enabled) style = activity?.resources?.getColor(R.color.black)!!
menuItem.setSpan(ForegroundColorSpan(style), 0, menuItem.length, 0)
}

Categories

Resources