Please forgive me if this is answered elsewhere - I have been searching/testing/experimenting for 2 days without much luck.
I need to change the hint color for the email/password fields. Whether I'm on Light or Dark mode on my emulator, the text in the hint shows up Black:
... until I click on the field and it becomes at least readable:
Here's my theme as it stands right now:
<style name="Theme.MyApp.FirebaseAuth" parent="FirebaseUI">
<item name="windowActionBarOverlay">true</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowBackground">#drawable/onboard_background</item>
<item name="colorPrimary">#color/gk_orange</item>
<item name="colorPrimaryDark">#color/gk_orange</item>
<item name="colorControlNormal">#color/gk_orange</item>
<item name="colorControlActivated">#android:color/white</item>
<item name="colorControlHighlight">#color/gk_orange</item>
<item name="colorButtonNormal">#color/gk_orange</item>
<item name="android:textColorHint">#color/gk_orange</item>
<item name="android:cacheColorHint">#color/gk_orange</item>
<!--<item name="hintTextColor">#color/gk_orange</item>-->
</style>
I've tried creating a style with parent="FirebaseUI.TextInputLayout.EmailField" and other similar things - but nothing seems to touch that hint color.
If someone could please point me in the right direction, I'd be most grateful. Thanks!!!
According to This GitHub Post you can try changing the style of FirebaseUI.EditText such as:
<style name="FirebaseUI.EditText">
<item name="android:paddingBottom">14dp</item>
<item name="android:paddingTop">14dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="colorControlActivated">#color/colorWhite</item>
<item name="colorControlHighlight">#color/colorWhite</item>
<item name="android:textColorHint">#color/colorWhite</item>
<item name="android:textColor">#color/colorWhite</item>
</style>
<style name="FirebaseUI.Text.TextInputLayout" parent="#style/FirebaseUI.EditText" />
<style name="FirebaseUI.Text.HintText" parent="#style/FirebaseUI.EditText" />
The general theme used from this snippet was:
<style name="FullscreenTheme" parent="AppTheme">
<item name="android:actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowBackground">#drawable/bg_login</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorControlNormal">#color/colorWhite</item>
<item name="colorControlActivated">#color/colorWhite</item>
<item name="colorControlHighlight">#color/colorWhite</item>
</style>
<style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
<item name="android:background">#color/colorPrimary</item>
</style>
While the answer from codearn19 did not work directly as suggested, it did inspire an experiment that ultimately solved my issue. Note that this solution is probably more "global" than some people might like, in that it changes ALL the TextInputLayouts under FirebaseUI, but for my purposes, it works:
<style name="FirebaseUI.TextInputLayout" parent="Widget.Design.TextInputLayout">
<item name="android:textColorHint">#color/gk_orange</item>
<item name="android:background">#null</item>
</style>
This allowed me to change the hint color. The #null was necessary to maintain the original look & feel of the rest of the TIL.
Thanks all!!!
Related
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">.
I'm using a PreferenceFragmentCompat, but I don't think it is styled correctly.
Preferences' title seems way to big, PreferenceCategory text is unreadable, the whole think seems off.
This is what I have in theme.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="preferenceTheme">#style/PreferenceThemeOverlay</item>
</style>
<style name="PreferenceThemeOverlay">
<item name="preferenceScreenStyle">#style/Preference.PreferenceScreen</item>
<item name="preferenceFragmentStyle">#style/PreferenceFragment</item>
<item name="preferenceCategoryStyle">#style/Preference.Category</item>
<item name="preferenceStyle">#style/Preference</item>
<item name="preferenceInformationStyle">#style/Preference.Information</item>
<item name="checkBoxPreferenceStyle">#style/Preference.CheckBoxPreference</item>
<item name="switchPreferenceCompatStyle">#style/Preference.SwitchPreferenceCompat</item>
<item name="dialogPreferenceStyle">#style/Preference.DialogPreference</item>
<item name="editTextPreferenceStyle">#style/Preference.DialogPreference.EditTextPreference
</item>
<item name="preferenceFragmentListStyle">#style/PreferenceFragmentList</item>
</style>
Following this.
Change
<item name="preferenceTheme">#style/PreferenceThemeOverlay</item>
to
<item name="preferenceTheme">#style/PreferenceThemeOverlay.v14.Material</item>
Then, change in build.gradle dependencies
com.android.support:preference-v7
to
com.android.support:preference-v14
I want to make simple TabPagerIndicator, but It doesn't show a underline, I use xml to change the style. This is my xml style file:
<!-- Application theme. -->
<style name="AppTheme" parent="#style/Theme.AppCompat.Light">
<item name="vpiTitlePageIndicatorStyle">#style/CustomTitlePageIndicator</item>
<item name="vpiUnderlinePageIndicatorStyle">#style/CustomUnderlinePageIndicator</item>
<item name="vpiTabPageIndicatorStyle">#style/CustomTabPageIndicator</item>
</style>
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">#color/fondo_activity</item>
<item name="android:textAppearance">#style/CustomTabPageIndicator.Text</item>
<item name="android:textColor">#FF555555</item>
<item name="android:textSize">14sp</item>
<item name="android:dividerPadding">10dp</item>
<item name="showDividers">middle</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
</style>
<style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
<item name="android:typeface">monospace</item>
</style>
<style name="CustomUnderlinePageIndicator">
<item name="selectedColor">#FFCC0000</item>
<item name="android:background">#FFCCCCCC</item>
<item name="fadeLength">1000</item>
<item name="fadeDelay">1000</item>
</style>
<style name="CustomTitlePageIndicator">
<item name="android:background">#18FF0000</item>
<item name="footerColor">#FFAA2222</item>
<item name="footerLineHeight">1dp</item>
<item name="footerIndicatorHeight">3dp</item>
<item name="footerIndicatorStyle">underline</item>
<item name="android:textColor">#AA000000</item>
<item name="selectedColor">#FF000000</item>
<item name="selectedBold">true</item>
</style>
In this picture you can see how it is shown (the red line on the top is part of the action bar)
Does anyone knows where is the error and How can I solve it?
Best.
Can you please elaborate on where exactly you want to show the underline? Do you mean a vertical line between FOTOS and VIDEOS? Since I was not able to understand your question properly. Still I try to answer.
If you want something like ( FOTOS | VIDEOS ) then you have to put
<item name="android:divider">#drawable/custom_tab_indicator_divider</item>
custom_tab_indicator_divider is basically a nine patch image. You can checkout the nine patch in the source code of viewpagerindicator library.
If you want something like __________ below the FOTO and VIDEOS.You can create a selector and set it to background like
<item name="android:background">#drawable/custom_tab_indicator</item>
Check vpi_tab_indicator.xml in the library project for more info.
My app has text that can be either black or white; small, medium, or large; and bold or not bold. I can't figure out a way to make styles for covering all bases without resorting to just including a ton of styles and repeating everything. Is there a way to reduce this somehow or apply more than one at a time?
<style name="Text">
<item name="android:textSize">12sp</item>
<item name="android:textColor">#000000</item>
<item name="android:textStyle">normal</item>
</style>
<style name="Text.Small">
<item name="android:textSize">8sp</item>
</style>
<style name="Text.Large">
<item name="android:textSize">18sp</item>
</style>
<style name="Text.Small.Bold">
<item name="android:textStyle">bold</item>
</style>
<style name="Text.Large.Bold">
<item name="android:textStyle">bold</item>
</style>
<style name="Text.White">
<item name="android:textColor">#ffffff</item>
</style>
<style name="Text.White.Small">
<item name="android:textSize">8sp</item>
</style>
<style name="Text.White.Large">
<item name="android:textSize">18sp</item>
</style>
<style name="Text.White.Small.Bold">
<item name="android:textStyle">bold</item>
</style>
<style name="Text.White.Large.Bold">
<item name="android:textStyle">bold</item>
</style>
Half of these are literally duplicates that inherit from a different parent style. I feel like this would be pretty trivial to accomplish in CSS without repeating everything like that. Am I stuck doing it this way in Android? Or is there something I am overlooking here?
To avoid code duplication you could declare the item only once, and refer it from the others styles using the parent attribute.
Example using the code you provided :
<style name="Text.Small.Bold">
<item name="android:textStyle">bold</item>
</style>
<style name="Text.Large.Bold">
<item name="android:textStyle">bold</item>
</style>
could be changed in :
<style name="Text.Small.Bold">
<item name="android:textStyle">bold</item>
</style>
<style name="Text.Large.Bold" parent="Text.Small.Bold" />
I have dug but there doesn't seem to be a way to do this native to Android. I am just going to leave it with the duplicated parts in each style and suffice it to say that this is the DRYest it can be in this context.
Does anyone know the way in which i am meant to code the change i want to make to the color of the ActionBar? I have tried using android:textColor , and android:color , as well as various other things. It seems like a quite a hassle for me. Although there is most probably a simple solution for this. Does anyone have any ideas?
Note: i am trying to make the font color white - from what i can tell, Android does this from the "actionbar.solid.pp" style.
<style name="Theme.Pp" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarItemBackground">#drawable/selectable_background_pp</item>
<item name="android:popupMenuStyle">#style/PopupMenu.Pp</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Pp</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.Pp</item>
<item name="android:actionDropDownStyle">#style/DropDownNav.Pp</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Pp</item>
<item name="android:actionModeBackground">#drawable/cab_background_top_pp</item>
<item name="android:actionModeSplitBackground">#drawable/cab_background_bottom_pp</item>
<item name="android:actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Pp</item>
</style>
<style name="ActionBar.Solid.Pp" parent="#android:style/Widget.Holo.Light.ActionBar.Solid">
<item name="android:background">#111</item>
<item name="android:color">#FFF</item>
<item name="android:textStyle">bold</item>
<item name="android:progressBarStyle">#style/ProgressBar.Pp</item>
</style>
<style name="ActionBar.Transparent.Pp" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/ab_transparent_pp</item>
<item name="android:progressBarStyle">#style/ProgressBar.Pp</item>
</style>
<style name="PopupMenu.Pp" parent="#android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_pp</item>
</style>
<style name="DropDownListView.Pp" parent="#android:style/Widget.Holo.Light.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_pp</item>
</style>
<style name="ActionBarTabStyle.Pp" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#ffffff</item>
</style>
<style name="DropDownNav.Pp" parent="#android:style/Widget.Holo.Light.Spinner">
<item name="android:background">#drawable/spinner_background_ab_pp</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_pp</item>
<item name="android:dropDownSelector">#drawable/selectable_background_pp</item>
</style>
<style name="ProgressBar.Pp" parent="#android:style/Widget.Holo.Light.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_pp</item>
</style>
<style name="ActionButton.CloseMode.Pp" parent="#android:style/Widget.Holo.Light.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_pp</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Pp.Widget" parent="#android:style/Theme.Holo">
<item name="android:popupMenuStyle">#style/PopupMenu.Pp</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Pp</item>
</style>
Changing the action bar's text color is shown on the developer guide Styling the Action Bar
I think you can use this free tool to customize the style:
http://jgilfelt.github.io/android-actionbarstylegenerator/#name=example&compat=holo&theme=light&actionbarstyle=solid&texture=0&hairline=0&neutralPressed=1&backColor=E4E4E4%2C100&secondaryColor=D6D6D6%2C100&tabColor=33B5E5%2C100&tertiaryColor=F2F2F2%2C100&accentColor=33B5E5%2C100&cabBackColor=FFFFFF%2C100&cabHighlightColor=33B5E5%2C100