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.
Related
I'm attempting to style this MaterialCalendar, but I'm not getting anywhere with it, any help would be appreciated.
My styles.xml looks similar to the below:
<style name="AppTheme" parent="Theme.MaterialComponents">
<item name="materialCalendarTheme">#style/ThemeMaterialCalendar</item>
</style>
<style name="ThemeMaterialCalendar" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="buttonBarPositiveButtonStyle">#style/AlterDialogButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">#style/AlterDialogButtonStyle</item>
<item name="materialButtonStyle">#style/ThemeMaterialCalendarTextButton</item>
<item name="android:colorAccent">#color/accent</item>
</style>
<style name="ThemeMaterialCalendarTextButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog.Flush">
<item name="android:textColor">?attr/colorAccent</item>
</style>
<style name="AlterDialogButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">?attr/colorAccent</item>
</style>
Which renders something like:
The very light blue/cyan is my colorAccent the header is the purple-y colour. Those are just fine. I was able to change them with the above styles.xml.
However I want to also change the dark grey background of the MaterialCalendar to white, and then of course change the text from white to black or grey (so it can be seen), as well as make the arrows for month and year selection. Any selected year or day should be highlighted with the accent color.
Essentially I want something similar to this (please ignore the fact that the below screen shot is of the old DatePickerDialog and not the new MaterialCalendar):
Any help would be greatly appreciated.
PS: I don't want to change any of my primary, secondary or accent colours for the entire app (as it will ruin the rest of the colour scheme)
The best way to customize the colors in the MaterialDatePicker is to override them:
<style name="MaterialCalendarThemeBackground" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="colorSurface">#color/....</item>
<item name="colorOnSurface">#color/....</item>
<item name="colorPrimary">#color/....</item>
<item name="colorOnPrimary">#color/....</item>
</style>
and then use:
MaterialDatePicker.Builder<Long> builder = MaterialDatePicker.Builder.datePicker();
builder.setTheme(R.style.MaterialCalendarThemeBackground);
The background color of the MaterialDatePicker is based on colorSurface attribute.
<style name="MaterialCalendarThemeBackground" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="colorSurface">#color/....</item>
</style>
Instead if you want to change the other colors using a custom style you can do:
Day: it is based on colorOnSurface. You can define:
<style name="MaterialCalendarThemeBackground" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="materialCalendarStyle">#style/CustomMaterialCalendar</item>
</style>
with:
<style name="CustomMaterialCalendar" parent="Widget.MaterialComponents.MaterialCalendar">
<item name="dayStyle">#style/CustomWidget_Day</item>
</style>
<style name="CustomWidget_Day" parent="Widget.MaterialComponents.MaterialCalendar.Day">
<item name="itemTextColor">#color/...</item>
<item name="itemStrokeColor">#color/....</item>
</style>
SelectedDay: it is based on colorPrimary/colorOnPrimary. You can define:
<style name="CustomMaterialCalendar" parent="Widget.MaterialComponents.MaterialCalendar">
<item name="daySelectedStyle">#style/CustomSelected</item>
</style>
with:
<style name= "CustomSelected" parent="Widget.MaterialComponents.MaterialCalendar.Day.Selected">
<item name="itemFillColor">...</item>
<item name="itemTextColor">...</item>
</style>
Expanding on #Gabriele Mariotti answer for those in the future that want to customize the MaterialDatePicker more.
(Side note) : I noticed the MaterialDatePicker on tablets reverts to the default colors, I don't why that is so.
MaterialDatePicker size can be changed from full screen to dialog size through using this line
<item name="android:windowFullscreen">false</item>
Set the theme of MaterialDatePicker:
builder.setTheme(R.style.CustomThemeOverlay_MaterialCalendar_Fullscreen);
I would recommend playing around with the styles and make changes to the colors to see what it actually changes if you are unsure.
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<item name="materialCalendarFullscreenTheme">#styleCustomThemeOverlay_MaterialCalendar_Fullscreen</item>
</style>
<style name="CustomThemeOverlay_MaterialCalendar_Fullscreen" parent="#style/ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="materialCalendarStyle">#style/Custom_MaterialCalendar.Fullscreen</item>
<item name="materialCalendarHeaderTitle">#style/customHeaderTitle</item>
<item name="materialCalendarHeaderSelection">#style/CustomHeaderSelection</item>
<item name="buttonBarPositiveButtonStyle">#style/Buttons</item>
<item name="buttonBarNegativeButtonStyle">#style/Buttons</item>
<item name="android:textColorPrimary">#color/...</item>
<item name="colorPrimary">#color/...</item>
<item name="colorSurface">#color/...</item>
<item name="colorOnSurface">#color/...</item>
<item name="colorOnPrimary">#color/...</item>
</style>
<style name="Custom_MaterialCalendar.Fullscreen" parent="#style/Widget.MaterialComponents.MaterialCalendar">
<item name="android:windowFullscreen">false</item>
<item name="rangeFillColor">#color/...</item>
<item name="dayStyle">#style/CustomWidget_Day</item>
<item name="daySelectedStyle">#style/CustomSelected</item>
</style>
<style name="customHeaderTitle" parent="#style/Widget.MaterialComponents.MaterialCalendar.HeaderTitle">
<item name="android:textSize">24sp</item>
<item name="android:textColor">#color/...</item>
<item name="colorSurface">#color/...</item>
</style>
<style name="CustomHeaderSelection" parent="Widget.MaterialComponents.MaterialCalendar.HeaderSelection">
<item name="android:textSize">18sp</item>
<item name="android:textColor">#color/...</item>
</style>
<style name="CustomWidget_Day" parent="Widget.MaterialComponents.MaterialCalendar.Day">
<item name="android:textSize">18sp</item>
<item name="itemTextColor">#color/...</item>
</style>
<style name= "CustomSelected" parent="Widget.MaterialComponents.MaterialCalendar.Day.Selected">
<item name="itemFillColor">#color/...</item>
<item name="itemStrokeColor">#color/...</item>
</style>
<style name="Buttons" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">#color/...</item>
</style>
I was able to make this using this code:
I am using a custom Dark Theme in my app. Everything is doing okay, except for the Cut Copy Paste dialog that appears as a solid black square.
Surely there is a style that determines that, but I can't find it, or an answer that addresses this directly. Min API is 16.
<style name="DarkTheme" parent="AppTheme.NoActionBar">
<item name="colorPrimary">#color/blackBackground</item>
<item name="colorPrimaryDark">#color/blackBackground</item>
<item name="colorAccent">#color/yellow</item>
<item name="android:textColor">#color/whiteText</item>
<item name="android:background">#color/blackBackground</item>
<item name="buttonStyle">#style/darkButtonStyle</item>
<item name="spinnerStyle">#style/darkSpinnerStyle</item>
</style>
<style name="darkButtonStyle" parent="#android:style/Widget.Button">
<item name="android:layout_width">fill_parent</item>
<item name="android:textColor">#color/whiteText</item>
<item name="android:textSize">16sp</item>
<item name="android:padding">10dp</item>
<item name="android:textStyle">bold</item>
<item name="android:background">#color/darkBackground</item>
<item name="android:gravity">center</item>
<item name="android:textAllCaps">true</item>
</style>
<style name="darkSpinnerStyle" parent="Widget.AppCompat.Spinner">
<item name="android:background">#color/blackBackground</item>
<item name="android:paddingTop">0dp</item>
<item name="android:layout_marginStart">1dp</item>
<item name="android:layout_marginLeft">1dp</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">0dp</item>
</style>
I was having the same issue when regarding to MaterialAlertDialog. I was able to fix it using backgroundTint instead of background in styles. This is how:
Before
<style name="materialAlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="android:background">#color/colorPrimaryDark</item>
<item name="materialAlertDialogTitleTextStyle">#style/TitleTextStyle</item>
<item name="materialAlertDialogBodyTextStyle">#style/BodyTextStyle</item>
<item name="buttonBarPositiveButtonStyle">#style/PositiveButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">#style/NegativeButtonStyle</item>
</style>
This will be enough to repropduce the error that you are saying... So what i did was changing background for backgroundTint...
After
<style name="materialAlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="android:backgroundTint">#color/colorPrimaryDark</item>
<item name="materialAlertDialogTitleTextStyle">#style/TitleTextStyle</item>
<item name="materialAlertDialogBodyTextStyle">#style/BodyTextStyle</item>
<item name="buttonBarPositiveButtonStyle">#style/PositiveButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">#style/NegativeButtonStyle</item>
</style>
It seems like when you set a background and the dialog is created, the toolbar of copy/paste menu was changing his background in some weird way that i cant explain.
So this is not the exact answer for your problem but it may help you.
Note: Try removing background attr of your style. I have a dark theme and there is no need to use it. Just simple use <style name="AppTheme" parent="Theme.MaterialComponents.DayNight"> instead of <style name="DarkTheme" parent="AppTheme.NoActionBar">.
Hi this is my style attributes, "myAppTheme" is my application's theme and "MyActionModeStyle" is my actionmode's style.
<style name="myAppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="actionModeStyle">#style/MyActionModeStyle</item>
</style>
<style name="MyActionModeStyle" parent="Widget.AppCompat.ActionMode">
<item name="actionModeBackground">#drawable/red_bg</item>
<item name="android:actionModeBackground">#drawable/red_bg</item>
<item name="backgroundSplit">#drawable/red_bg</item>
<item name="android:backgroundSplit">#drawable/red_bg</item>
<item name="android:titleTextStyle">#style/ActionModeText</item>
<item name="titleTextStyle">#style/ActionModeText</item>
</style>
I want to change the background of action ode to red color but unfortunately nothing happends, still action mode is in default white color.. How can i change its color.. Any idea ?
Oh ! At last i had got a solution.I had changed my action mode custom theme into activities' theme.Now its works.. This is my custom theme for activity
android:theme="#style/customActionModeTheme"
and this is my custom style
<style name="customActionModeTheme" parent="myAppTheme">
<item name="android:actionModeBackground">#color/primaryColor</item>
<item name="actionModeBackground">#color/primaryColor</item>
</style>
See attached
I am using a searchbar with the theme below (I know very little about Android themes, yet)
How do I make the text typed, in this case, "Hi Mom" white?
<style name="_Credential" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:editTextBackground">#drawable/credential_edit_text_holo_light</item>
<item name="android:textColorHighlight">#99005984</item>
<item name="android:textSelectHandleLeft">#drawable/credential_text_select_handle_left</item>
<item name="android:textSelectHandleRight">#drawable/credential_text_select_handle_right</item>
<item name="android:textSelectHandle">#drawable/credential_text_select_handle_middle</item>
<item name="android:autoCompleteTextViewStyle">#style/AutoCompleteTextViewCredential</item>
<item name="android:listChoiceIndicatorMultiple">#drawable/credential_btn_check_holo_light</item>
<item name="android:listChoiceIndicatorSingle">#drawable/credential_btn_radio_holo_light</item>
<item name="android:buttonStyle">#style/ButtonCredential</item>
<item name="android:imageButtonStyle">#style/ImageButtonCredential</item>
<item name="android:dropDownSpinnerStyle">#style/SpinnerCredential</item>
<item name="android:progressBarStyleHorizontal">#style/ProgressBarCredential</item>
<item name="android:seekBarStyle">#style/SeekBarCredential</item>
<item name="android:ratingBarStyle">#style/RatingBarCredential</item>
<item name="android:ratingBarStyleIndicator">#style/RatingBarBigCredential</item>
<item name="android:ratingBarStyleSmall">#style/RatingBarSmallCredential</item>
<item name="android:buttonStyleToggle">#style/ToggleCredential</item>
<item name="android:listChoiceBackgroundIndicator">#drawable/credential_list_selector_holo_light</item>
<item name="android:activatedBackgroundIndicator">#drawable/credential_activated_background_holo_light</item>
<item name="android:fastScrollThumbDrawable">#drawable/credential_fastscroll_thumb_holo</item>
</style>
<style name="_Credential" parent="android:Theme.Holo.Light.DarkActionBar">
...
<item name="android:editTextColor">#ffffff</item> <!--Allow to change the editText color-->
...
</style>
So you can't actually change the TextColor of something like a search box with android:textColor. Instead, you need to use the whole family of the textColor... attributes.
Create a custom style that has your main style as it's parent, and then change all three kinds of colors to be what you want. So, something like this:
<style name="master" paret="#android:Theme.Holo.Light.DarkActionBar">
<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:textColorSecondary">#FFFFFF</item>
<item name="android:textColorTertiary">#FFFFFF</item>
</style>
Read more about this here.
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>