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.
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">.
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
In my application I was using Theme.Holo and Theme.Holo.Light without any issues. When Holo theme is used and I click on a DialogPreference/ListPreference, a popped dialog is also themed with Holo. Same for the Holo.Light. But when PreferencesActivity is styled with my custom theme, which is derived from Holo.Light, all dialogs are themed with Holo.Light. I think I am missing somthing in my theme. Could anyone help me? Thanks a lot!
Here is my theme code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated with http://android-holo-colors.com -->
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="GreenTheme" parent="android:Theme.Holo.Light">
<item name="android:editTextBackground">#drawable/edit_text_holo_light</item>
<item name="android:autoCompleteTextViewStyle">#style/AutoCompleteTextViewGreenTheme</item>
<item name="android:listChoiceIndicatorMultiple">#drawable/btn_check_holo_light</item>
<item name="android:listChoiceIndicatorSingle">#drawable/btn_radio_holo_light</item>
<item name="android:buttonStyle">#style/ButtonGreenTheme</item>
<item name="android:imageButtonStyle">#style/ImageButtonGreenTheme</item>
<item name="android:dropDownSpinnerStyle">#style/SpinnerGreenTheme</item>
<item name="android:tabWidgetStyle">#style/TabWidgetGreenTheme</item>
<item name="android:progressBarStyleHorizontal">#style/ProgressBarGreenTheme</item>
<item name="android:seekBarStyle">#style/SeekBarGreenTheme</item>
<item name="android:buttonStyleToggle">#style/ToggleGreenTheme</item>
<item name="android:listChoiceBackgroundIndicator">#drawable/list_selector_holo_light</item>
<item name="android:activatedBackgroundIndicator">#drawable/activated_background_holo_light</item>
<item name="android:fastScrollThumbDrawable">#drawable/fastscroll_thumb_holo</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Greenactionbar</item>
<item name="android:buttonBarButtonStyle">#style/ButtonBarButtonStyleGreenTheme</item>
<item name="android:preferenceStyle">#style/TimePickerDialogFragmentGreen</item>
</style>
<style name="TimePickerDialogFragmentGreen" parent="#android:style/Theme.Holo.Light.Dialog">
<item name="android:editTextBackground">#drawable/edit_text_holo_light</item>
<item name="android:autoCompleteTextViewStyle">#style/AutoCompleteTextViewGreenTheme</item>
<item name="android:listChoiceIndicatorMultiple">#drawable/btn_check_holo_light</item>
<item name="android:listChoiceIndicatorSingle">#drawable/btn_radio_holo_light</item>
<item name="android:buttonStyle">#style/ButtonGreenTheme</item>
<item name="android:imageButtonStyle">#style/ImageButtonGreenTheme</item>
<item name="android:dropDownSpinnerStyle">#style/SpinnerGreenTheme</item>
<item name="android:tabWidgetStyle">#style/TabWidgetGreenTheme</item>
<item name="android:progressBarStyleHorizontal">#style/ProgressBarGreenTheme</item>
<item name="android:seekBarStyle">#style/SeekBarGreenTheme</item>
<item name="android:buttonStyleToggle">#style/ToggleGreenTheme</item>
<item name="android:listChoiceBackgroundIndicator">#drawable/list_selector_holo_light</item>
<item name="android:activatedBackgroundIndicator">#drawable/activated_background_holo_light</item>
<item name="android:fastScrollThumbDrawable">#drawable/fastscroll_thumb_holo</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Greenactionbar</item>
<item name="android:buttonBarButtonStyle">#style/ButtonBarButtonStyleGreenTheme</item>
</style>
</resources>
I found this rather unformatted but otherwise nice answer.
The gist is that DialogPreferences are AlertDialogs created without the theme parameter, which means they apply which ever theme android:alertDialogTheme points to.
So I extended my theme like this to have the dialog themed:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/yellow_500</item>
<item name="colorPrimaryDark">#color/yellow_a700</item>
<item name="colorAccent">#color/purple_400</item>
<item name="android:alertDialogTheme">#style/DialogTheme</item>
</style>
<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">#color/yellow_500</item>
<item name="colorPrimaryDark">#color/yellow_a700</item>
<item name="colorAccent">#color/purple_400</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
</style>
</resources>
The colorPrimary, colorPrimaryDark and colorAccent in the AppTheme were the colours I wanted to have applied to the dialog as well.
Note that I needed the android:windowMinWidthMinor to prevent the dialog from collapsing horizontally.
I have clarifying questions, but can't ask them because of low rate. So: 1.Does your first style work correctly? 2.Are you sure, that theme #android:style/Theme.Holo.Light.Dialog has all items, you declared in TimePickerDialogFragmentGreen?For example:
<item name="android:tabWidgetStyle"> #style/TabWidgetGreenTheme</item>
3. Have you tried the idea proposed by Luksprog
And finally: I used something like that to create custom style for my EditTexts:
<style name="EditTextStyle" parent="#style/Indents">
<item name="android:textColor">#android:color/black</item>
<item name="android:background">#android:color/white</item>
<item name="android:textColorHint">#android:color/darker_gray</item>
<item name="android:textSize">14sp</item>
</style>
<style name="Indents" parent="#style/Margins">
<item name="android:paddingBottom">#dimen/activity_vertical_padding</item>
<item name="android:paddingTop">#dimen/activity_vertical_padding</item>
</style>
<style name="Margins">
<item name="android:layout_marginTop">#dimen/activity_vertical_margin </item>
<item name="android:layout_marginBottom">#dimen/activity_vertical_margin </item>
<item name="android:layout_marginLeft">#dimen/activity_horizontal_margin </item>
<item name="android:layout_marginRight">#dimen/activity_horizontal_margin </item>
</style>
is it possible to format a textview for a widget so that it looks like the text below the apps.
like in this screenshot:
i am looking for the exact textcolor, the exact dropshadow and the rounded background.
When in doubt, check with the source, which shows that Android is using a custom TextView to implement the bubbled background around the text.
It appears that the text itself is styled using styles in the launcher app:
<style name="WorkspaceIcon">
<item name="android:textSize">13dip</item>
<item name="android:singleLine">true</item>
<item name="android:ellipsize">marquee</item>
<item name="android:shadowColor">#FF000000</item>
<item name="android:shadowRadius">2.0</item>
<item name="android:textColor">#FFF</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:background">#drawable/shortcut_selector</item>
<item name="android:paddingLeft">5dip</item>
<item name="android:paddingRight">5dip</item>
</style>
<style name="WorkspaceIcon.Portrait">
<item name="android:drawablePadding">5dip</item>
<item name="android:paddingTop">4dip</item>
<item name="android:layout_marginLeft">3dip</item>
<item name="android:layout_marginRight">3dip</item>
<item name="android:layout_marginTop">13dip</item>
<item name="android:layout_marginBottom">8dip</item>
</style>
<style name="WorkspaceIcon.Landscape">
<item name="android:drawablePadding">3dip</item>
<item name="android:paddingTop">2dip</item>
<item name="android:layout_marginLeft">10dip</item>
<item name="android:layout_marginRight">10dip</item>
</style>
Those styles are called from the launcher's layouts as appropriate.