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.
Related
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!!!
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:
How can i change the text color of all the button in my app ? right now the only think that work is to do :
<style name="MyTheme" parent="#android:style/Theme.Material.Light.NoActionBar">
<item name="android:textColor">#ff0000</item>
</style>
but i m a little worried to use android:textColor who seam to not only impact the button
I try this but it's didn't work :
<style name="BBButtonColor" parent="#android:style/Widget.Button">
<item name="android:textColor">#ff0000</item>
</style>
<style name="BBButtonStyle" parent="#android:style/Widget.Button">
<item name="android:textColor">#ff0000</item>
</style>
<style name="BBBorderlessButtonStyle" parent="#android:style/Widget.Button">
<item name="android:textColor">#ff0000</item>
</style>
<style name="MyTheme" parent="#android:style/Theme.Material.Light.NoActionBar">
<item name="android:textAppearanceButton">#style/BBButtonColor</item>
<item name="android:buttonStyle">#style/BBButtonStyle</item>
<item name="android:borderlessButtonStyle">#style/BBBorderlessButtonStyle</item>
<item name="android:colorButtonNormal">#ff0000</item>
</style>
It's mostly the color of button inside popup dialog that i want to change
Loki, you can try this. This should change the color of all buttons in your app.
<style name="BBButtonColor" parent="android:Widget.Button">
<item name="android:textColor">#FF0000</item>
</style>
You were trying to use #android:style/Widget.Button, instead use android:Widget.Button and check. Let me know if this works.
You can try this :
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:buttonStyle">#style/ButtonColor</item>
<item name="colorButtonNormal">#color/colorname</item>
</style>
<style name="ButtonColor" parent="#android:style/Widget.Button">
<item name="android:textColor">#color/colorname</item>
</style>
and/change this line in Manifest file :
android:theme="#style/AppTheme.Base
You should create new style for buttons, something like that:
<style name="optionsButton">
<item name="android:layout_width">70dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#color/white</item>
<item name="android:textColor">#color/black</item>
<item name="android:textSize">15sp</item>
</style>
Now you can set this style for every button you want in layout xml, for example:
<Button
android:id="#+id/payCashBtn"
style="#style/optionsButton"
android:text="Cash" />
You can see I set layout_width and height in style, so all my buttons which use this style will have same parameters, but you can set different values for every button, or create multiple styles if you used it more than once. I hope it will help you.
I am wanting to create a custom ToggleButton style, mainly so I can change the minimum height and text size depending on the screen size.
I have already done this for Button:
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="buttonStyle">#style/MyButtonStyle</item>
</style>
<style name="MyButtonStyle" parent="Widget.AppCompat.Button">
<item name="android:minHeight">#dimen/button_min_height</item>
<item name="android:textSize">#dimen/button_text_size</item>
</style>
And I am now wanting to do a similar thing for ToggleButton. I have tried this...
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="buttonStyle">#style/MyButtonStyle</item>
<item name="android:buttonStyleToggle">#style/MyToggleButtonStyle</item>
</style>
<style name="MyToggleButtonStyle" parent="Widget.AppCompat.ToggleButton">
<item name="android:minHeight">#dimen/button_min_height</item>
<item name="android:textSize">#dimen/button_text_size</item>
</style>
...but Widget.AppCompat.ToggleButton doesn't exist. So what changes do I need to make so I can control the minimum height and text size of my ToggleButtons like I already do for Buttons?
I would prefer an approach similar to the above, not only for consistency but so I don't have to go through all my layout files and update the ToggleButtons' xml individually.
This works for me.
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="buttonStyle">#style/MyButtonStyle</item>
<item name="android:buttonStyleToggle">#style/MyToggleButtonStyle</item>
</style>
<style name="MyToggleButtonStyle" parent="android:Widget.Button.Toggle">
<item name="android:minHeight">#dimen/button_min_height</item>
<item name="android:textSize">#dimen/button_text_size</item>
</style>
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