I created a custom theme for the action bar that makes it white, and having a tad bit of trouble, and I have not been able to find the solution. First of all I want the 'options button' to be red, like the text below. but especially I want when clicked the whole row to be highlighted, not like it is shown in the picture:
Sso here is the code for the theme I'm using:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="MyCustomTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBarTheme</item>
<item name="android:background">#color/White</item>
<item name="android:textColorLink">#color/White</item>
</style>
<style name="MyActionBarTheme" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/White</item>
<item name="android:textColor">#color/Red</item>
</style>
</resources>
I was hoping I could also get the red text to be aligned right, and have tried multiple alignment methods with no luck.thanks.
You need styles for android:actionMenuTextColor to change the "options" text color and android:textAppearanceLargePopupMenu to change the PopupMenu text color.
<style name="Your.Theme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionMenuTextColor">#android:color/holo_red_dark</item>
<item name="android:textAppearanceLargePopupMenu">#style/TextAppearance.Red.PopupMenu.Large</item>
<item name="android:popupMenuStyle">#style/PopupMenu.Example</item>
</style>
<style name="TextAppearance.Red.PopupMenu.Large" parent="#android:style/TextAppearance.DeviceDefault.Widget.PopupMenu.Large">
<item name="android:textColor">#android:color/holo_red_dark</item>
</style>
<style name="PopupMenu.Example" parent="#android:style/Widget.ListPopupWindow">
<item name="android:popupBackground">#drawable/your_background</item>
<!-- Or use -->
<item name="android:popupBackground">#android:color/white</item>
</style>
Related
We're having a difficult time for so long working with how to style Firebase UI. We tried to look in the repo but it seems there is no clean solution nor proper documentation on customizing Spinner.
We need to make Spinner background pop up dialog dark while text color of items is white by just overriding the existing style of FirebaseUI.
This is our XML code
<style name="FirebaseUI.CountrySpinner">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:drawablePadding">10dp</item>
<item name="android:spinnerDropDownItemStyle">#style/CustomSpinnerItemStyle</item>
</style>
<style name="CustomSpinnerItemStyle" parent="Widget.AppCompat.DropDownItem.Spinner">
<item name="android:textColor">#android:color/white</item>
<item name="backgroundColor">#color/colorPrimaryDark</item>
</style>
The above styling will give you this
Then tried other approach as well
<style name="AuthStyle" parent="FirebaseUI">
<!--Override action bar and status bar-->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:colorControlNormal">#color/colorAccent</item> <!--Spinner underline color-->
<item name="android:colorFocusedHighlight">#color/colorAccent</item>
<!--Override action bar and status bar-->
<item name="android:windowBackground">#color/colorPrimary</item>
<item name="android:textColorTertiary">#android:color/white</item>
<item name="android:buttonStyle">#style/AuthButton</item>
<item name="android:spinnerStyle">#style/AuthSpinner</item>
</style>
<style name="AuthSpinner" parent="FirebaseUI.CountrySpinner">
<item name="android:textColor">#android:color/white</item> <!--Spinner placeholder text color-->
<item name="itemTextColor">#android:color/white</item>
<item name="android:popupBackground">#color/colorPrimaryDark</item>
<item name="android:colorBackground">#color/colorPrimaryDark</item>
</style>
Then apply the theme
AuthUI.SignInIntentBuilder builder = AuthUI.getInstance().createSignInIntentBuilder()
.setTheme(R.style.AuthStyle)
.setIsSmartLockEnabled(true)
.setAvailableProviders(getProviderList());
The above styling will give you this
The only difference is the underline in spinner disappear when directly overriding it. It is good also to if we can adjust the down arrow as it seems really close to the text.
PS
Originally AuthStyle extends ThemeOverlay.AppCompat.Dark giving us the required style but only to newer devices with SDK 30 and above while leaving the older version such as here SDK 21 with the same issue.
After a long battle and frustration I came to a solution where it works on API 21, API 26, API 29 and possibly above by extending Theme.AppCompat as parent.
<style name="AuthStyle" parent="Theme.AppCompat">
<!--Override action bar and status bar-->
<item name="colorAccent">#color/colorAccent</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:colorControlNormal">#color/colorAccent</item> <!--Spinner or non focus field underline color-->
<item name="android:colorFocusedHighlight">#color/colorAccent</item>
<!--Override main background-->
<item name="android:windowBackground">#color/colorPrimary</item>
<!--Description text color-->
<item name="android:textColorTertiary">#android:color/white</item>
</style>
<!--Override-->
<style name="FirebaseUI.TextInputEditText.PhoneField">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">14sp</item>
<item name="android:inputType">number</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textColorHint">#android:color/white</item>
</style>
<!--Override-->
<style name="FirebaseUI.CountrySpinner">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#android:color/white</item> <!--Spinner placeholder text color-->
<item name="android:backgroundTint">#color/colorAccent</item> <!--Spinner underline and arrow color-->
</style>
The above style if applied will look like this depending on you color values.
Though I cannot change the pop up background and the item list no matter what attempts, this will serve well as long as the country that will be added in Spinner is readable across all API version.
I would like to avoid applying a style to the toolbars in all layouts, so I have a style I created for it:
<style name="DarkToolbar" >
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:background">#color/blue</item>
<item name="android:elevation">4dp</item>
</style>
And I added it to my theme as follows:
<style name="Theme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/blue</item>
<item name="colorPrimaryDark">#color/blue</item>
<item name="colorAccent">#color/blue</item>
<item name="android:toolbarStyle">#style/DarkToolbar</item>
</style>
This is the resulting toolbar:
As you can see, the title and subtitle have the wrong formatting. If I remove the style from the theme and apply it directly to the toolbar in the layout, I get the following result instead:
Both images use the same style. One is applied through the app theme with
<item name="android:toolbarStyle">#style/DarkToolbar</item>
and the second one is applied directly to the toolbar with
style="#style/DarkToolbar"
Does anyone know the reason for the difference?
Also, does anyone know why the
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
Are not being applied?
Thanks
Add parent="Widget.AppCompat.Toolbar" to your toolbar style. It is default style for toolbar.
For example:
<style name="DarkToolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:background">#color/blue</item>
<item name="android:elevation">4dp</item>
</style>
I think this has to do with
< item name="android:theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar< /item>
in your style
I personally find styling toolbar text quite complicated, so mostly end up with my own TextView. How about using your own TextView inside toolbar. It would be easy, though a bit lengthy.
You are setting parent as no action bar in your theme, as this will give you the run time exception and null point exception as there is no action bar or tool bar to set the title/sub-title. Try adding parent in your theme with toolbar or action bar likes this.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="DarkToolbar">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:background">#color/blue</item>
<item name="android:elevation">4dp</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/blue</item>
<item name="colorPrimaryDark">#color/blue</item>
<item name="colorAccent">#color/blue</item>
<item name="android:toolbarStyle">#style/DarkToolbar</item>
</style>
</resources>
I am trying to change the drop down background of the sherlock action bar as well as its text color. Here's what I have tried:
<style name="DropDown" parent="Widget.Sherlock.Spinner.DropDown.ActionBar">
<item name="android:popupBackground">#EDEDED</item>
</style>
<style name="TextAppearance" parent="TextAppearance.Sherlock.Widget.TextView.SpinnerItem">
<item name="android:textColor">#A9A9A9</item>
</style>
<style name="SpinnerItemStyle" parent="Widget.Sherlock.TextView.SpinnerItem">
<item name="android:textAppearance">#style/TextAppearance</item>
</style>
<style name="MyTheme" parent="#style/devcheckStyle">
<item name="android:actionDropDownStyle">#style/DropDown</item>
<item name="actionDropDownStyle">#style/DropDown</item>
<item name="spinnerItemStyle">#style/SpinnerItemStyle</item>
<item name="android:spinnerItemStyle">#style/SpinnerItemStyle</item>
</style>
The main theme being MyTheme, with the following code I am getting the desirable background color, but I am getting nowhere with the text's color inside the drop down navigation. Can someone please help.
Put that code
<item name="android:textColor">#ffffffff</item>
into your MyTheme code should be like:
<style name="MyTheme" parent="#style/devcheckStyle">
<item name="android:actionDropDownStyle">#style/DropDown</item>
<item name="actionDropDownStyle">#style/DropDown</item>
<item name="spinnerItemStyle">#style/SpinnerItemStyle</item>
<item name="android:spinnerItemStyle">#style/SpinnerItemStyle</item>
</style>
I am trying to achieve 2 things
White Text for Menu Items, Title text color works
Text Shadows for Title and Menu item
All this on XML.
What works, after experiments?
Custom Action bar layout works just fine with shadows.
Text color for all Tiles works but text shadow has no effect
Text color for Menu item has no effect anywhere. In the example code when I declare MenuTextStyle in the main Theme tag, I am able to change text size but not color.
<style name="Theme.SexyApp" parent="Theme.Sherlock.Light">
<item name="actionBarStyle">#style/Widget.SexyApp.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.SexyApp.ActionBar</item>
<item name="android:actionBarItemBackground">#drawable/list_state</item>
<item name="actionBarItemBackground">#drawable/list_state</item>
<item name="android:actionMenuTextAppearance">#style/Theme.SexyApp.ActionBar.MenuTextStyle</item>
<item name="actionMenuTextAppearance">#style/Theme.SexyApp.ActionBar.MenuTextStyle</item>
</style>
<style name="Widget.SexyApp.ActionBar" parent="#style/Widget.Sherlock.Light.ActionBar">
<item name="android:displayOptions">showHome|useLogo|showTitle</item>
<item name="android:titleTextStyle">#style/Theme.SexyApp.ActionBar.TextAppearance</item>
<item name="titleTextStyle">#style/Theme.SexyApp.ActionBar.TextAppearance</item>
</style>
<style name="Theme.SexyApp.ActionBar.TextAppearance" parent="#style/TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
<item name="android:textSize">20dp</item>
<item name="android:textStyle">bold</item>
<item name="android:shadowColor">#333333</item>
<item name="android:shadowRadius">1</item>
<item name="android:shadowDy">1</item>
</style>
<style name="Theme.SexyApp.ActionBar.MenuTextStyle" parent="#style/TextAppearance.Sherlock.Widget.ActionBar.Menu">
<item name="android:textColor">#color/white</item>
<item name="android:textSize">13dp</item>
<item name="android:textStyle">bold</item>
<item name="android:shadowColor">#333333</item>
<item name="android:shadowRadius">1</item>
<item name="android:shadowDy">1</item>
</style>
To change the menu item text color, you need to add the actionMenuTextColor item to your theme style as in the code below:
<style name="ThemeName" parent="#style/Theme.Sherlock.Light">
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
</style>
To update the menu item text appearance (color, size, style) you need to make changes at two different places. The following answer is for sherlock.actionbar
1: In your themes.xml file add following lines:
<style name="Theme.Mytheme" parent="#style/Theme.Sherlock">
<item name="android:actionMenuTextAppearance">#style/CustomMenuItem</item> // define custom style in the style.xml file.
<item name="actionMenuTextColor">#color/mycolor</item>
<item name="android:actionMenuTextColor">#color/mycolor</item>
2: In your styles.xml
<style name="CustomMenuItem" parent="#style/TextAppearance.Sherlock.Widget.ActionBar.Menu">
<item name="android:textStyle">normal</item>
<item name="android:textSize">15sp</item>
<item name="android:textAllCaps">false</item>
</style>
How can I modify the style of the items on the Action bar of an Android Application?
I tryed the following:
<item name="android:actionBarStyle">#style/ActionBar.Light</item>
<style name="ActionBar.Light" parent="#style/ActionBar">
<item name="android:background">#color/black</item>
<item name="android:actionMenuTextColor">#FF00FF</item>
</style>
The background of the Action bar I was able to modify, but not the text Colors of the items in the Action bar. How can I do it?
EDIT:
I tried pretty much all the android:action attributes I found, but I couldn't manage to change anything other than the background. Only the first <item name="android:background">#FF0000</item> of the following code makes changes on my code. No matter which values I put on the Test style, it doesn't change anything. Why is it happening?
<item name="android:actionBarStyle">#style/ActionBar.Light</item>
<style name="ActionBar.Light" parent="#style/ActionBar">
<item name="android:background">#FF0000</item>
<item name="android:actionMenuTextColor">#style/Test</item>
<item name="android:actionButtonStyle">#style/Test</item>
<item name="android:actionModeBackground">#style/Test</item>
<item name="android:actionMenuTextAppearance">#style/Test</item>
</style>
<style name="Test">
<item name="android:textColor">#color/white</item>
<item name="android:background">#FF0000</item>
</style>
If you want to change the color of the menu items in the action bar you have to set the actionMenuTextColor in your theme style.
<style name="PortfolioTheme" parent="android:style/Theme.Holo.Light">
<item name="android:actionMenuTextColor">#24598a</item>
<item name="actionMenuTextColor">#24598a</item>
</style>
You don't define the menu item colors in the actionMenuTextAppearance!
You can change the color by:-
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyTheme.ActionBarStyle</item>
</style>
<style name="MyTheme.ActionBarStyle" parent="android:style/Widget.Holo.ActionBar">
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#color/red</item>
</style>
</resources>