I am working on popup-menu in actionbar. But I am stuck to display exact below of actionbar(cut-to-cut).I am putting two snapshot.
My issue screen shot:
I want exact popup menu below of actionbar as below screenshot
Correction screenshot:
My code snippet:
<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_filter"
android:icon="#drawable/ic_filter_white_18dp"
android:title="#string/action_filter"
app:showAsAction="ifRoom" />
<item android:id="#+id/action_label"
android:icon="#drawable/ic_add_circle_outline_white_18dp"
android:title="#string/action_label"
app:showAsAction="ifRoom" />
<item android:id="#+id/action_settings"
android:title="#string/action_settings"
app:showAsAction="never" />
When working with AppCompat Theme, below code help you.Either Kitkat or Lollipop
Make your style.xml like below
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/black</item>
<item name="android:background">#android:color/transparent</item>
<item name="actionOverflowMenuStyle">#style/OverflowMenu</item>
</style>
<style name="OverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
<item name="android:windowDisablePreview">true</item>
<item name="overlapAnchor">false</item>
<item name="android:dropDownVerticalOffset">5.0dp</item>
<!--<item name="android:popupBackground">#FFF</item>-->
</style>
If you want to keep using ActionBar and AppCompat theme rather than ToolBar or Holo theme, you can use this code:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionOverflowMenuStyle">#style/MyOverflowMenu</item>
</style>
<style name="MyOverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
<item name="overlapAnchor">false</item>
<item name="android:overlapAnchor" tools:ignore="NewApi">false</item>
<item name="android:dropDownVerticalOffset">4.0dip</item>
</style>
This worked for me.
As per my code this is exact sotution by changing style.
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionMenuTextColor">#color/text_white</item>
<item name="android:popupMenuStyle">#style/PopupMenu.Example</item>
<item name="actionOverflowMenuStyle">#style/OverflowMenu</item>
</style>
<style name="PopupMenu.Example" parent="#android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#efefef</item>
</style>
<style name="OverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
<!-- Required for pre-Lollipop. -->
<item name="overlapAnchor">false</item>
<!-- Required for Lollipop. -->
<item name="android:overlapAnchor">false</item>
<item name="android:dropDownVerticalOffset">4.0dip</item>
</style>
You can achieve this by style property
overlapAnchor= false
<style name="toolBarStyle" parent="AppTheme">
<item name="popupTheme">#style/toolbarPopup</item>
</style>
<style name="toolbarPopup" parent="#android:style/Widget.Holo.ListPopupWindow"> <!--ThemeOverlay.AppCompat.Light-->
<item name="android:popupBackground">#AF0000</item>
<item name="overlapAnchor">false</item>
<item name="android:dropDownVerticalOffset">5dp</item>
</style>
and set that style in AppTheme like below
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- to avoid overlay of popup window in toolbar -->
<item name="actionOverflowMenuStyle">#style/toolBarStyle</item>
</style>
Set the theme at android manifest to
android:theme="#android:style/Theme.Holo.Light"
Related
I have tried for several days to fix a problem where multiple of my UI elements in my toolbar is the wrong color. If you take a look at the picture below you can see what I mean:
Elements that should be white are black and I just can't figure out how to fix this through my theme.
Here's my themes.xml (sry about the mess in there, but theming is really difficult):
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.GuidelinesCompat.Light.DarkToolbar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/colorBackground</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="toolbarStyle">#style/AppTheme.NoActionBar.ToolbarStyle</item>
<item name="actionModeStyle">#style/AppTheme.NoActionBar.ActionModeStyle</item>
<item name="searchViewStyle">#style/AppTheme.NoActionBar.SearchViewStyle</item>
<!--<item name="android:actionModeBackground">#color/bg_action_mode</item>-->
<!--<item name="android:textColorSecondary">#color/white</item>-->
</style>
<style name="AppTheme.ActionBar">
<item name="android:windowActionModeOverlay">true</item>
</style>
<!-- Base toolbar theme. -->
<style name="AppTheme.NoActionBar.ToolbarStyle" parent="Widget.GuidelinesCompat.Toolbar">
<item name="titleTextAppearance">#style/AppTheme.NoActionBar.ToolbarTitleTextAppearance</item>
</style>
<style name="AppTheme.NoActionBar.ToolbarTitleTextAppearance" parent="#style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textColor">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
<!-- Base Action Mode styles -->
<style name="AppTheme.NoActionBar.ActionModeStyle" parent="Widget.GuidelinesCompat.ActionMode">
<item name="background">#color/bg_action_mode</item>
<!--<item name="android:actionModeBackground">#color/bg_action_mode</item>-->
<!--<item name="android:actionOverflowButtonStyle">#style/ActionModeTitleTextStyle</item>-->
<!--<item name="statusBarColor">#color/grey_100</item>-->
</style>
<style name="ActionModeTitleTextStyle" parent="Widget.GuidelinesCompat.ActionButton.Overflow">
<item name="android:textColor">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
<style name="AppTheme.NoActionBar.SearchViewStyle" parent="Widget.AppCompat.SearchView">
<!-- Sets the search icon -->
<item name="searchIcon">#drawable/ic_search_white_24dp</item>
<!-- Gets rid of the "underline" in the text -->
<!--<item name="queryBackground">#color/white</item>-->
<!-- Gets rid of the search icon when the SearchView is expanded -->
<!--<item name="searchHintIcon">#null</item>-->
<!-- The hint text that appears when the user has not typed anything -->
<!--<item name="queryHint">#string/menu_examination_search_hint</item>-->
<item name="android:textAppearance">#style/SearchViewTextAppearance</item>
</style>
<style name="SearchViewTextAppearance">
<item name="android:textColorHint">#color/white</item>
<item name="android:textColor">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
<!-- Theme applied to LoginActivity and SignUpActivity -->
<style name="AppTheme.Login" parent="AppTheme.NoActionBar">
<item name="android:windowBackground">#color/colorPrimary</item>
<item name="android:textColorHint">#color/iron</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="colorControlNormal">#color/iron</item>
<item name="colorControlActivated">#color/white</item>
<item name="colorControlHighlight">#color/white</item>
<item name="colorButtonNormal">#color/colorPrimaryDarker</item>
</style>
<style name="AppTheme.NavigationView">
<item name="android:textColorSecondary">#color/colorTextSecondary</item>
</style>
<!-- Theme applied to Textview in LoginActivity and SignUpActivity -->
<style name="WhiteText" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/white</item>
</style>
<!-- Animations applied to dialog when entering or exiting -->
<style name="DialogAnimation">
<item name="android:windowEnterAnimation">#anim/slide_up</item>
<item name="android:windowExitAnimation">#anim/slide_down</item>
</style>
I've found out that if I set textColorSecondary in my AppTheme.NoActonBar all my controls are correctly coloured white, but this gives me trouble in all my dialogs, that now also have textColorSecondary set to white.
I hope someone out there can show me a solution, cause I'm out of ideas.
Try this here .
In your toolbar layout:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ToolBarStyle"
app:popupTheme="#style/ToolBarPopupStyle"
android:background="#color/actionbar/>
In your styles:
<!-- ToolBar -->
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="actionOverflowButtonStyle">#style/ActionButtonOverflowStyle</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
On my main app theme I have:
<item name="android:popupMenuStyle">#style/MyApp.PopupMenu</item>
<item name="android:textAppearanceLargePopupMenu">#style/MyTextAppearanceLargePopupMenu
</item>
<item name="android:textAppearanceSmallPopupMenu">#style/MyTextAppearanceSmallPopupMenu
</item>
And then I have
<style name="MyApp.PopupMenu" parent="Base.Widget.AppCompat.PopupMenu">
<item name="android:popupBackground">#color/white</item>
<item name="android:textColorPrimary">#color/black</item>
<item name="android:textColorSecondary">#color/black</item>
<item name="android:textColor">#color/black</item>
<item name="android:background">#color/color_white</item>
<item name="overlapAnchor">true</item>
<item name="android:overlapAnchor">true</item>
<item name="android:textAppearanceLargePopupMenu">#style/MyTextAppearanceLargePopupMenu
</item>
<item name="android:textAppearanceSmallPopupMenu">#style/MyTextAppearanceSmallPopupMenu
</item>
</style>
<style name="MyTextAppearanceLargePopupMenu" parent="TextAppearance.AppCompat.Widget.PopupMenu.Large">
<item name="android:textColor">#color/black</item>
</style>
<style name="MyTextAppearanceSmallPopupMenu" parent="TextAppearance.AppCompat.Widget.PopupMenu.Small">
<item name="android:textColor">#color/black</item>
</style>
But my popup menu appears with a white background and white letters instead of black. I have tested this by changing the background and that works fine.
So what am I doing wrong?
Thanks.
Edit: Figured it out, my app theme has <item name="android:textColor">#color/primary_text</item> and that seems to override whatever I do on popup menu styles.
Here's an example:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="popupMenuStyle">#style/PopupStyle</item>
<item name="textAppearanceLargePopupMenu">#style/PopupTextAppearanceLarge</item>
<item name="textAppearanceSmallPopupMenu">#style/PopupTextAppearanceSmall</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#android:color/white</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#ff00ff</item>
</style>
<style name="PopupStyle" parent="Widget.AppCompat.Light.PopupMenu">
<item name="android:popupBackground">#ff00ff</item>
</style>
<style name="PopupTextAppearanceLarge" parent="TextAppearance.AppCompat.Light.Widget.PopupMenu.Large">
<item name="android:textColor">#ffff00</item>
</style>
<style name="PopupTextAppearanceSmall" parent="TextAppearance.AppCompat.Light.Widget.PopupMenu.Small">
<item name="android:textColor">#ffff00</item>
</style>
</resources>
Toolbar example:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme.AppBarOverlay"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
Its very late but the main reason is that the attribute android:textColor is applied to the popup menu which is defined in the main style (parent) and you can't control by defining your style for popup menu. Don't know the reason for this weird functionality but it as it is, its google .
So add <item name="android:textColor">#color/white</item> in the parent style.
I'm trying to customize Toolbar's popup menu. Now I can not set background color of menu item.
My styles.xml looks like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme.NoActionBar" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="android:actionMenuTextColor">#color/actionbar_text_color</item>
<item name="android:dropDownListViewStyle">#style/AppTheme.DropDown</item>
<item name="android:itemTextAppearance">#style/menuItemColor</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="actionMenuTextColor">#color/actionbar_text_color</item>
<item name="dropDownListViewStyle">#style/AppTheme.DropDown</item>
<item name="itemTextAppearance">#style/menuItemColor</item>
</style>
<style name="AppTheme.ActionBar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">\
<item name="titleTextColor">#color/actionbar_text_color</item>
<item name="subtitleTextColor">#color/actionbar_text_color</item>
<item name="android:background">#color/actionbar_background</item>
<!-- Support library compatibility -->
<item name="background">#color/actionbar_background</item>
</style>
<style name="AppTheme.DropDown" parent="#style/Widget.AppCompat.Light.ListView.DropDown">
<item name="android:background">#color/background_color</item>
<!-- Support library compatibility -->
<item name="background">#color/background_color</item>
</style>
<style name="menuItemColor">
<item name="android:textColor">#color/inactive_text_color</item>
</style>
</resources>
I added ActionBar to activity layout with code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/AppTheme.ActionBar"/>
Note: I'm using AppCompat, not Holo or other.
This may help you,create a style like,
<style name="PopupMenu" parent="#android:style/Widget.PopupMenu">
<item name="android:popupBackground">#android:color/white</item>
and add it to your main themes..
<style name="AppTheme.NoActionBar" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item> <! added it here
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="android:actionMenuTextColor">#color/actionbar_text_color</item>
<item name="android:textColor">#color/text_color</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="actionMenuTextColor">#color/actionbar_text_color</item>
</style>
<style name="AppTheme.ActionBar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">\
<item name="titleTextColor">#color/actionbar_text_color</item>
<item name="subtitleTextColor">#color/actionbar_text_color</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item> <! added it here
<item name="android:background">#color/actionbar_background</item>
<!-- Support library compatibility -->
<item name="background">#color/actionbar_background</item>
</style>
You have to define style for Overflow Menu too like this :
<!-- OverFlow menu Styles -->
<style name="PopupMenuListView" parent="#style/Widget.AppCompat.Light.ListView.DropDown">
<item name="android:divider">#color/sp_red_500</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:background">#color/white</item>
</style>
and in your parent theme style( Base application theme.) define drop down menu style like this :
<item name="dropDownListViewStyle">#style/PopupMenuListView</item>
I got this styles for my Android app:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/background_new</item>
<item name="android:textColorPrimary">#color/colorAccent</item>
<item name="android:textColorHint">#color/colorAccentHint</item>
<!-- Customize your theme here. -->
</style>
<style name="MyToolBar" parent="Widget.AppCompat.ActionBar">
<!-- Support library compatibility -->
<item name="android:textColorPrimary">#color/colorAccent</item>
<item name="android:textColorSecondary">#color/colorAccent</item>
<item name="colorControlNormal">#color/colorAccent</item>
</style>
<!-- Custom searchView may be used or not-->
<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
<!-- Gets rid of the search icon -->
<item name="searchIcon">#null</item>
<!-- Gets rid of the "underline" in the text -->
<item name="queryBackground">#null</item>
<!-- Gets rid of the search icon when the SearchView is expanded -->
<item name="searchHintIcon">#null</item>
<!-- The hint text that appears when the user has not typed anything -->
<!--<item name="closeIcon">#null</item> -->
</style>
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabTextAppearance">#style/MyCustomTabText</item>
</style>
<style name="MyCustomTabText" parent="TextAppearance.Design.Tab">
<item name="android:textSize">12sp</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="NavDrawerTextStyle" parent="Base.TextAppearance.AppCompat">
<item name="android:textSize">12sp</item>
</style>
<style name="MyCheckBox" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorControlNormal">#color/colorPrimaryTransparent</item>
<item name="colorControlActivated">#color/colorAccent</item>
</style>
<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#color/colorAccent</item>
<item name="android:textColorPrimary">#color/colorAccent</item>
<item name="android:background">#color/background1</item>
<item name="android:buttonStyle">#style/MyApp.BorderlessButton</item>
</style>
<style name="MyApp.BorderlessButton" parent="#style/Widget.AppCompat.Button.Borderless">
<item name="android:textSize">12sp</item>
</style>
<style name="MyRadioButton" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">#color/colorAccent</item>
<item name="colorControlActivated">#color/colorAccent</item>
</style>
Normally i have transparent background on Toolbar of NavigationDrawler menu items click.
But sometimes theme in my app changes to Holo theme , and i can figure it out when its happens , so when i press menu items in Toolbar or in NavigationDrawler their background become blue, like in Holo theme
Where i have mistake and why its happens?
Can you publish your Android Manifest ? Maybe some activities override the base application style ?
I think i've tried everything on the Internet but nothing seems to work. The icons always stay gray but I want them white. Isn't that purpose of DarkActionBar?
<style name="AppTheme"
parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/one</item>
What it looks like on 4.4 and on 5.0. I want the 5.0 look.
Here is what I have in my project, it works just fine:
<style name="CustomActionBarTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:windowContentOverlay">#null</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:fastScrollThumbDrawable">#drawable/scroller_style</item>
<item name="colorPrimary">#color/statbar_bg</item>
<item name="colorPrimaryDark">#color/statbar_bg</item>
<item name="colorAccent">#color/statbar_bg</item>
<!-- <item name="windowActionBarOverlay">true</item> -->
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
<!-- Overflow menu -->
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/actionbar_bg</item>
<item name="background">#color/actionbar_bg</item>
<item name="elevation">0dp</item>
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="MyActionButtonStyle" parent="#android:style/Widget.ActionButton">
<item name="android:minWidth">0dip</item>
<item name="android:paddingLeft">0dip</item>
<item name="android:paddingRight">0dip</item>
</style>
I would also suggest you to check for different style/theme files in different values folders, maybe something is overriding.