I have a FAB in my layout as:
<android.support.design.widget.FloatingActionButton
android:id="#+id/click_receipt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="08dp"
android:clickable="true"
android:src="#drawable/ic_action_photo" />
The theme I use for this Activity is:
<!-- Detail Activity-->
<style name="NoActionBar" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorControlHighlight">#color/color_accent</item>
<item name="colorControlNormal">#color/color_accent</item>
<item name="searchViewStyle">#style/AppTheme.SearchView</item>
</style>
However the colorPrimary / colorPrimaryDark dont seem to take effect on the FAB.
Earlier I was using a universal theme for the app which is:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="colorPrimary">#color/actionBar_bg</item>
<item name="colorPrimaryDark">#color/color_primary_dark</item>
<item name="colorAccent">#color/color_accent</item>
<item name="android:spinnerStyle">#style/Widget.AppCompat.Spinner.Underlined</item>
</style>
<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>
</style>
The results with above were proper, but I dont find much difference in my custom theme for this Activity, what do I miss here?
The FAB is taking colorAccent - you will have to set this
Related
We are not able to style the actionmenu items in our app, tried setting the style in different ways. We are using androidx libraries. Please let us know what we might be doing wrong. Appreciate your help.
<style name="MenuTextStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Menu">
<item name="android:textColor">#F0F</item>
<item name="android:textStyle">normal</item>
<item name="android:textSize">10sp</item>
</style>
<style name="AppThemeMm" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item> //This works
<item name="colorPrimaryDark">#color/colorPrimaryDark</item> //This works
<item name="colorAccent">#color/colorAccent</item> //This works
<item name="android:actionMenuTextAppearance">#style/MenuTextStyle</item> //This does not work
</style>
Try something like this
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:dropDownListViewStyle">#style/actionMenuDropDown</item>
<item name="android:listPreferredItemHeightSmall">50dp</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="actionMenuDropDown" parent="#android:style/Widget.Holo.ListView.DropDown">
<item name="android:divider">#5A5252</item>
<item name="android:dividerHeight">1sp</item>
<item name="android:listSelector">#FFEA00</item>
<item name="android:background">#AC2299</item>
<item name="android:textColor">#443A43</item>
</style>
If you are using PopupOverlay text color will not change. But you can override the text color like this
<style name="AppTheme.MyPopupOverlay" parent="ThemeOverlay.AppCompat.Dark" >
<item name="android:textColor">#AC5532</item>
</style>
And use it like this
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.MyPopupOverlay" />
This is what worked for us. Added customisation directly to PopupOverlay.
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColor">#color/colorPrimaryDark</item>
<item name="android:textSize">14sp</item>
</style>
In the custom toolbar
app:popupTheme="#style/AppTheme.PopupOverlay"
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>
i have developed an android app with search view on action bar
but the suggestion drop down menu items are dark.
is there a way i can turn the drop down menu to light ?
this is my style.xml file
<!-- 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="android:dropDownListViewStyle">#android:style/Widget.DeviceDefault.Light.ListView.DropDown</item>-->
<item name="colorAccent">#color/colorAccent</item>
<item name="android:actionBarWidgetTheme">#style/Widget.AppCompat.Light.ActionBar</item>
<item name="android:popupMenuStyle">#android:style/Widget.Holo.Light.PopupMenu</item>
<!--<item name="android:dropDownListViewStyle">#android:style/Theme.Light</item>-->
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="AppTheme.ButtonBase" parent="Widget.AppCompat.Button.Colored">
<item name="android:paddingTop">12dip</item>
<item name="android:paddingBottom">12dip</item>
<item name="android:textSize">16.9sp</item>
<item name="android:textStyle">bold</item>
</style>
<style name="AppTheme.ButtonPrimary" parent="AppTheme.ButtonBase">
<item name="colorButtonNormal">#color/buttonPrimary</item>
<item name="android:textColor">#color/textLight</item>
</style>
<style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
<item name="android:textSize">18sp</item>
</style>
<style name="AppTheme.ButtonSecondary" parent="AppTheme.ButtonBase">
<item name="android:textColor">#color/textLight</item>
</style>
Just comment out your style code. for below attribute in your code.
android:dropDownListViewStyle
Now build and run your app again.
It will help you.
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 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"