I've created an activity with the new Appcompat v21 Toolbar. Everything works fine except when I highlight some text out of a TextView. The copy/cut Actionbar shows up, but instead of overlaying my existing toolbar or hiding it it just pushes the toolbar down so I get something like this:
Now my question is, how can I make the copy/cut actionbar overlay my toolbar? Or should I just hide it if text is selected? If so, how do I listen for textselection?
Best regards
in your theme you need to add this to it
<item name="windowActionModeOverlay">true</item>
so it would look something like this
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/color_primary</item>
<item name="colorPrimaryDark">#color/color_primary_dark</item>
<item name="colorAccent">#color/color_primary</item>
<item name="windowActionModeOverlay">true</item>
</style>
Related
I'm having trouble making ActionBarToggleButton having custom selector.
I got app that works for mobile and tablet devices, and now I have to make it usable for TV devices.
To do that I have to add some custom focus selector, that is more visible then default one.
App uses NavigationView for drawer and has toggle button in action bar that opens it. Also there are other items in action bar.
I have managed to change selectors for all action bar items except toggle button via:
<item name="android:actionBarItemBackground">#drawable/selectable_selector</item>
Is there a way to customize ActionToggleButton.
I dont need to change arrow drawable, but only color of the default selector.
Thanks
In API 21 and more you only need to write this item in style.xml, in your Toolbar theme:
<item name="colorControlHighlight">#color/xxx</item>
But in lower APIs, First you should write this style in your styles.xml:
<style name="MyToolbarTheme.Navigation" parent="#android:style/Widget">
<item name="android:background">#drawable/selector_items</item>
<item name="android:scaleType">center</item>
<item name="android:minWidth">56.0dip</item>
</style>
then add this items to your toolbar theme:
<item name="actionBarItemBackground">#drawable/selector_appbar</item>
<item name="toolbarNavigationButtonStyle">#style/MyToolbarTheme.Navigation</item>
Example:
<style name="MyToolbarTheme" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:textColorPrimary">#ffffff</item>
<item name="android:textColorSecondary">#ffffff</item>
<item name="actionBarItemBackground">#drawable/selector_appbar</item>
<item name="toolbarNavigationButtonStyle">#style/MyToolbarTheme.Navigation</item>
</style>
(Sorry for my weak English)
On android 7 (nexus phone) the title in my context menu appears white. I would expect it to be black as it is on all other devices I tested. The rest of the app looks good.
Update:
I figured out that the colorAccent is the culprit (AppCompat styles various things based on that). I set it to white in a child theme because the tabBar needs to have white tab indicators.
So now the issues is that I need white tab indicators in the actionbar, black titles in dialogs and context menus and Orange text on buttons styled with the Button.Borderless.Colored style. All of these seem to be controlled with colorAccent. I can make a seperate style for the buttons. But the styles of the dialogs and tab indicators are still conflicting. For legacy reasons I cannot use the new toolbar with a tablayout (That one is stylable) but have to use the Actionbar. Any ideas?
White title in context menu screenshot:
Thanks in advance!
Theme:
<resources>
<!-- default theme -->
<style name="Theme.MyApp" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Remove actionbar -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- Basic coloring -->
<item name="colorPrimary">#color/MyAppOrange</item>
<item name="colorPrimaryDark">#color/MyAppOrangeDark</item>
<item name="colorAccent">#color/MyAppOrangeDark</item>
<!-- AppCompat dialog themes -->
<item name="dialogTheme">#style/Theme.MyApp.Dialog</item>
<item name="alertDialogTheme">#style/Theme.MyApp.Dialog.Alert</item>
///// Tried this with a custom style but that just f*cked up my tabs...
<item name="actionBarTabStyle">#style/CustomActionBarTabs</item>
</style>
<!-- Alert and dialog styles -->
<style name="Theme.MyApp.Dialog" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">#color/MyAppOrange</item>
<item name="colorPrimaryDark">#color/MyAppOrangeDark</item>
<item name="colorAccent">#color/MyAppOrangeDark</item>
</style>
<style name="Theme.MyApp.Dialog.Alert" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorPrimary">#color/MyAppOrange</item>
<item name="colorPrimaryDark">#color/MyAppOrangeDark</item>
<item name="colorAccent">#color/MyAppOrangeDark</item>
</style>
</resources>
Djangow, you need to define a new style that with the text color as the specific color you want and then set that style in the app theme you want to use. See this link for the exact coding needed.
UPDATE: Djangow, I apologize. I looked into it and found that you have to add this line <item name="android:actionMenuTextColor">#color/your_color</item> to the main App theme. I found the answer here. Hope that helps
I know there are a couple of questions about styling the contextual action bar (ActionMode) piece of the action bar, but they don't quite seem to address what I'm after.
I'm using the Toolbar with a light theme and dark action bar. The Toolbar looks like I want it, but the action mode looks like the regular dark theme. What do I need to change in my style to get the dark themed action mode (not just action bar)? It seems I should be able to do this quickly by tapping into Theme.AppCompat since that shows the CAB how I want it, but I don't want the rest of the application to be dark.
I'm only concerned about API 14+ and am using the support Toolbar in place of action bar.
Here is my base style
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:actionModeBackground">#color/colorActionMode</item>
<item name="android:windowActionModeOverlay">true</item>
</style>
Toolbar style
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/abc_primary_text_material_dark</item>
<item name="actionMenuTextColor">#color/abc_primary_text_material_dark</item>
<item name="android:textColorSecondary">#color/abc_primary_text_material_dark</item>
<item name="android:background">#color/colorPrimaryDark</item>
</style>
Toolbar layout file (setting popupTheme here doesn't seem to have any effect).
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:theme="#style/AppTheme.Toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
android:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
android:elevation="2dp"
android:focusable="false"/>
Here's my Toolbar (which is how I want it)
Here's my ActionMode (which I need to invert)
Here's what I want the ActionMode to look like (which I got by changing my style to inherit from Theme.AppCompat instead of Theme.AppCompat.Light.DarkActionBar. The problem being that the rest of the application goes dark, which I don't want.
Start with overriding attribute actionModeStyle in your base theme:
<item name="actionModeStyle">#style/LStyled.ActionMode</item>
Define LStyled.ActionMode as:
<style name="LStyled.ActionMode" parent="#style/Widget.AppCompat.ActionMode">
<item name="titleTextStyle">#style/LStyled.ActionMode.Title</item>
<item name="subtitleTextStyle">#style/LStyled.ActionMode.Subtitle</item>
</style>
Finally:
<style name="LStyled.ActionMode.Title" parent="#style/TextAppearance.AppCompat.Widget.ActionMode.Title">
<item name="android:textColor">#color/color_action_mode_text</item>
</style>
<style name="LStyled.ActionMode.Subtitle" parent="#style/TextAppearance.AppCompat.Widget.ActionMode.Subtitle">
<item name="android:textColor">#color/color_action_mode_text</item>
</style>
This will override theme specified text color(s) for title & subtitle(if needed).
What's left is the overflow button. Fire up any image editing software that supports color-replacement. Use the overflow menu png from AppCompat's res/drawable-XXXX folder. Paint it white. Next, override actionOverflowButtonStyle in your base theme and specify the png you've just modified:
<item name="actionOverflowButtonStyle">#style/LStyled.OverFlow</item>
<style name="LStyled.OverFlow" parent="#style/Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">#drawable/modified_overflow_icon</item>
</style>
There's not much of an explanation/tutorial that I can provide regarding customization of themes. The only way to get a hang of it is to go through [styles][themes].xml files from the framework. Reading the source code also helps - you'll get to know what attributes are being used and where/if they can be customized.
Point of mention:
I want to be able to extend a style to get the same behavior that's
built into the dark theme.
Yes, but this might not be desired. The part above that deals with modifying overflow menu icon can be substituted with an overridden colorControlNormal attribute. TintManager (Link) uses the color value from colorControlNormal to tint the overflow menu drawable (among other drawables). Take a look at the contents of array TINT_COLOR_CONTROL_NORMAL in the source code. But overriding colorControlNormal to fix one drawable may change the overall look & feel of the app for worse.
Check out this blog post which explains how to style the Toolbar to be dark:
http://android-developers.blogspot.ie/2014/10/appcompat-v21-material-design-for-pre.html
<android.support.v7.widget.Toolbar
android:layout_height=”wrap_content”
android:layout_width=”match_parent”
android:minHeight=”#dimen/triple_height_toolbar”
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
You specify a Toolbar "style". What I think you're missing is the app namespaced "theme" property which applies the style to the Toolbar and all of its children.
Edit: This should work for your specific case
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:actionModeBackground">#color/colorActionMode</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/abc_primary_text_material_dark</item>
<item name="actionMenuTextColor">#color/abc_primary_text_material_dark</item>
<item name="android:textColorSecondary">#color/abc_primary_text_material_dark</item>
<item name="android:background">#color/colorPrimaryDark</item>
</style>
I just want to add to Vikram's answer, specific to coloring the overflow button and other default controls in the action mode.
The 'colorControlNormal' item that defines the coloring of these buttons in the action mode has to be placed in the action bar theme, not the action mode style. Only then will it be used for overflows, done, close and back buttons within the action mode.
Try to use
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
instead.
I have my style defined as follows:
<style name="actionBarTheme" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/button_style</item>
<item name="android:titleTextStyle">#style/actionBarTitleText</item>
</style>
And the actionBar is actually of the color defined in button_style (correctly working in other parts of the code). The problem is that the items are not working correctly (the background color is too light).
Any idea on how to solve this? Thanks
EDIT:
In the picture there is the touch-feedback that I have now. The button_style has another touch effect (a darker one) since this is almost invisible.
You can have this affect with actionButtonStyle
<style name="appTheme">
<item name="android:actionBarStyle">#style/actionBarTheme</item>
<item name="android:actionButtonStyle">#style/actionButtonTheme</item>
</style>
and then place your button style as the background of that.
<style name="actionButtonTheme">
<item name="android:background">#drawable/button_style</item>
</style>
You will still need to set the background of your action bar but this only needs to be a colour or drawable image as that is all that will actually be used.
I'm using ActionBarSherlock for an Android app I'm making, and am displaying an image on one of my screens. On this screen, I want the actionbar to go away and come back as the user presses on the screen without the image being stretched. This part I have working, but to do so I created the following style and applied it to that screen. . .
<style name="DarkActionBar.ActionBarOverlay" parent="#style/Theme.Sherlock">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
The problem is, now my action bar is transparent and I can't figure out why. If I change the parent of my style to Theme.Sherlock.Light.DarkActionBar, it is no longer transparent but doesn't look the same as Theme.Sherlock, so it will be inconsistent with the rest of my app.
I've also tried the following. . .
<style name="MyActionBar" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:background">#color/black</item>
<item name="background">#color/black</item>
</style>
<style name="DarkActionBar.ActionBarOverlay" parent="#style/Theme.Sherlock">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
Can anyone tell me why the windowActionBarOverlay items are making my actionbar transparent, and what I can do to fix it? Thank you.
As the transparent ActionBar is a feature called "Actionbar Overlay", I think the problem is inside this line:
<item name="windowActionBarOverlay">true</item>
You may need to set it to false.
Please have a read of the following paragraph:
To enable overlay mode for the action bar, you need to create a custom
theme that extends an existing action bar theme and set the
android:windowActionBarOverlay property to true
Also please have a look at Overlaying the Actionbar on Android Developers