I am using the Material-Component Date Range Picker in my Android app and I want to customize the header layout. I have tried adding the materialCalendarHeaderLayout item in my custom style, but I am not sure how to use it properly as I am new on the Android.
I want to hide the header.
Want a custom Year & Month button. (Optional task)
I used the themes.xml to modify the date picker to appear as a popup instead of fullscreen.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/orange</item>
<item name="colorPrimaryVariant">#color/black</item>
<item name="colorOnPrimary">#color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/orange</item>
<item name="colorSecondaryVariant">#color/black</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">#color/black</item>
<!-- Date range picker -->
<item name="materialCalendarFullscreenTheme">#style/CustomThemeOverlay_MaterialCalendar_Fullscreen</item>
</style>
<!-- Popup Menu theme -->
<style name="PopupMenuBlackBackground" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:popupMenuStyle">#style/PopupMenuBlackBackground.Menu</item>
<item name="android:fontFamily">#font/poppins_regular</item>
<item name="android:popupElevation">5dp</item>
<item name="android:radius">5dp</item>
</style>
<style name="PopupMenuBlackBackground.Menu" parent="Widget.AppCompat.PopupMenu">
<item name="android:popupBackground">#color/blackDark</item>
<item name="android:popupElevation">5dp</item>
<item name="android:radius">5dp</item>
</style>
<!-- Date range picker fullscreen -->
<style name="CustomThemeOverlay_MaterialCalendar_Fullscreen"
parent="#style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen">
<item name="materialCalendarStyle">#style/Custom_MaterialCalendar.Fullscreen</item>
</style>
<style name="Custom_MaterialCalendar.Fullscreen"
parent="#style/Widget.MaterialComponents.MaterialCalendar.Fullscreen">
<item name="android:windowFullscreen">false</item>
</style>
</resources>
Expexted Date range picker:
Can someone guide me on how to achieve this customization? Any help or suggestions would be appreciated.
Thank you in advance.
To hide the header layout you can use:
<style name="App.MaterialCalendarTheme" parent="ThemeOverlay.Material3.MaterialCalendar">
<item name="materialCalendarHeaderLayout">#style/App.Material3.MaterialCalendar.HeaderLayout</item>
</style>
<style name="App.Material3.MaterialCalendar.HeaderLayout" parent="#style/Widget.Material3.MaterialCalendar.HeaderLayout">
<item name="android:visibility">gone</item>
</style>
Related
How to increase the text size of RadioGroup in AlertDialog made using setSingleChoiceItems?
This is what we tried but did not work.
<style name="DialogButtonStyle" parent="Widget.Material3.Button.TextButton.Dialog" tools:keep="#style/DialogButtonStyle">
<item name="android:textColor">#color/orange</item>
</style>
<!-- AlertDialog theme on both light and night mode -->
<style name="AppDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog" tools:keep="#style/AppDialog">
<!-- Background color -->
<!--<item name="colorSurface">#color/colorWhite_Primary</item>-->
<!-- Message color -->
<item name="colorOnSurfaceVariant">#color/white_black</item>
<item name="buttonBarPositiveButtonStyle">#style/DialogButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">#style/DialogButtonStyle</item>
<item name="materialAlertDialogBodyTextStyle">#style/AppDialog.Body</item>
<item name="alertDialogStyle">#style/MaterialAlertDialog.App</item>
</style>
<style name="MaterialAlertDialog.App" parent="MaterialAlertDialog.Material3" tools:keep="#style/MaterialAlertDialog_App">
<item name="shapeAppearance">#style/ShapeAppearance.App.MediumComponent</item>
<item name="shapeAppearanceOverlay">#null</item>
</style>
<style name="AppDialog.Body" parent="#style/MaterialAlertDialog.MaterialComponents.Title.Text">
<item name="android:textAppearance">#style/AppDialog.Body.Appearance</item>
</style>
<style name="AppDialog.Body.Appearance" parent="#style/TextAppearance.MaterialComponents.Subtitle1">
<item name="android:textSize">34sp</item>
</style>
I found the answer here, it should be checkedTextViewStyle instead of materialAlertDialogBodyTextStyle. It's a shame that Material 2 documentation is better than Material 3.
I want to change the default textColor of all text in my App. e.g. for all buttons, textViews, EditText's etc. in my App. Before moving to Material3, this was done using:
themes.xml
<style name="MyThemeName" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColor">#color/black</item>
Now it doesn't work anymore. How do I do it now? The project is a default Android project:
<style name="Theme.MyApplication" parent="Theme.Material3.DayNight.NoActionBar">
<!-- This is not working -->
<item name="android:textColor">#color/black</item>
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_200</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_200</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
I can do it like this, but that is not the answer I'm looking for:
<style name="BaseStyle" parent="android:Widget.Material.Light.Button.Borderless"/>
<style name="Widget.Button.MyCompanyName" parent="BaseStyle">
<item name="android:textColor">#android:color/black</item>
</style>
The above button style I only define the textColor when it differs from the default color that I want.
The text color of the elements will change based on what type of element it is being shown on. for example if you are using the material button by default the button color will be "colorPrimary" and the button text color will be "colorOnPrimary". and similar to this if an element color uses the "colorBackground" its text color will be "colorOnBackground".
in my case i was able to control the text color of all the elements i use by adding a value for the following styles:
<item name="colorOnPrimary">#000000</item>
<item name="colorOnPrimaryContainer">#000000</item>
<item name="colorOnSecondary">#000000</item>
<item name="colorOnSecondaryContainer">#000000</item>
<item name="colorOnBackground">#000000</item>
<item name="colorOnSurface">#000000</item>
<item name="colorOnSurfaceVariant">#000000</item>
<item name="android:textColorPrimary">#000000</item>
<item name="titleTextColor">#000000</item>
you can read more about this in "Typography and iconography colors" section Here
Does the below work? Not sure textViewStyle covers ALL texts. You might need some extra things like <item name="materialButtonStyle"> too.
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="android:textViewStyle">#style/MyTextView</item>
</style>
<style name="MyTextView" parent="Widget.MaterialComponents.TextView">
<item name="android:textColor">#android:color/black</item>
</style>
I am trying to change my positive button of the alert dialog. Can someone please help me?
This is what I have tried so far in my theme.xml from reading other people's answer:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MyFirstTest" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/yellow_200</item>
<item name="colorPrimaryVariant">#color/yellow_500</item>
<item name="colorOnPrimary">#color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<item name="android:positiveButtonText">#00f</item>
</style>
<style name="AlertDialogTheme" parent="Theme.MaterialComponents.Light.Dialog.Alert">
<item name="buttonBarPositiveButtonStyle">#style/Alert.Button.Positive</item>
</style>
<style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">#00f</item>
<item name="android:textSize">14sp</item>
<item name="android:textAllCaps">false</item>
</style>
</resources>
I am trying to change the positive button color to blue (#00f), but it kept on showing my primary color (yellow_200).
I honestly do not know how to customize this theme: Theme.MaterialComponents.Light.NoActionBar
Is there a website that guides what is included in this theme and how to customize it?
Thank you!
There is some things that are currently wrong. You need to update your styles as follows to change the text color
<style name="AlertDialogTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
<item name="buttonBarNegativeButtonStyle">#style/NegativeButtonStyle</item>
<item name="buttonBarPositiveButtonStyle">#style/PositiveButtonStyle</item>
</style>
<style name="NegativeButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textColor">#f00</item>
</style>
<style name="PositiveButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textColor">#00f</item>
</style>
You can find more information regarding material components and their theming on their website as follows
https://material.io/components/dialogs/android#theming-dialogs
I've setup a style for a DatePickerDialog background, and it shows up differently on Nexus 5 (Marshmallow):
The style I'm using is:
<style name="datepicker">
<item name="android:background">#color/android:white</item>
<item name="android:textColorPrimaryInverse">#color/android:black</item>
<item name="android:textColorPrimary">#color/android:black</item>
<item name="android:textColorSecondary">#color/colorAccent</item>
<item name="android:textColorSecondaryInverse">#color/colorAccent</item>
<item name="android:textColorTertiary">#color/android:black</item>
</style>
(colorAccent is gold)
The year at the top is supposed to be controlled by textColorSecondary, but now it's showing up as black. And the background of the header is grey, which I'd like white. What are the names of these items for Marshmallow?
You can use this style and theme config for change the text and header color. However, I think it is not more beautiful than default dialog picker.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="android:datePickerDialogTheme">#style/MyDatePickerDialogTheme</item>
</style>
<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
<item name="android:datePickerStyle">#style/MyDatePickerStyle</item>
<item name="android:textColorPrimaryInverse">#000</item> <!-- header date, month color && calendar text highlight color -->
<item name="android:textColorSecondaryInverse">#000</item> <!-- header year color -->
<item name="android:colorAccent">#B09A60</item> <!-- button color -->
</style>
<style name="MyDatePickerStyle" parent="#android:style/Widget.Material.Light.DatePicker">
<item name="android:headerBackground">#fff</item> <!-- header background color -->
</style>
Tested on API 22, 23, 25
The names of these items are the same for all android version > Andoid 5.0 Lollipop to be complient with Material design.
You can try to add a parent and override headerBackground for the background :
<style name="datepicker" parent="#android:style/Widget.Material.DatePicker">
<item name="android:background">#color/android:white</item>
<item name="android:textColorPrimaryInverse">#color/android:black</item>
<item name="android:textColorPrimary">#color/android:black</item>
<item name="android:textColorSecondary">#color/colorAccent</item>
<item name="android:textColorSecondaryInverse">#color/colorAccent</item>
<item name="android:textColorTertiary">#color/android:black</item>
<item name="android:headerBackground">#color/android:white</item>
</style>
However i think the year color is the same that textColorPrimary.
Hope this helps.
I've been trying real hard to theme SearchView. My min API is sdk 21 too, so I should be able to use the new styling options.
Specifically, I want the in-app-bar text field that appears when I click on the search icon to be theme-able. I want to ultimately make the background white, and the text/cursor either blue or black.
Here is my styles.xml. The last theme is the new SearchTheme I'm working on. The actual values don't matter, they're garbage values I threw in just trying to make a change happen.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#android:color/white</item>
<item name="android:searchViewStyle">#style/AppTheme.SearchTheme</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.PreferencesTheme" parent="AppTheme">
<item name="android:windowBackground">#android:color/white</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowBackground">#android:color/white</item>
<item name="android:searchViewStyle">#style/AppTheme.SearchTheme</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:windowBackground">#android:color/white</item>
<item name="android:searchViewStyle">#style/AppTheme.SearchTheme</item>
</style>
<style name="AppTheme.SearchTheme" parent="Theme.AppCompat.Light">
<item name="android:closeIcon">#drawable/contacts5icon</item>
<item name="android:voiceIcon">#drawable/contacts5icon</item>
<item name="android:queryBackground">#android:color/black</item>
<item name="android:windowBackground">#android:color/white</item>
</style>
</resources>
I've assigned the AppTheme.SearchTheme to the other main themes that I'm using in my layout. But nothing I do seems to have any effect. The values don't seem to change.
I haven't really messed with Android theming before, so I'm a bit lost.
This should help you get on the right track, per Chris Banes' walk-through for using material design on pre-lollipop androids. For you, in a nutshell: set item property searchViewStyle under your main style with a Widget.AppCompat.SearchView style extension.
You can use the queryBackground item property for altering the text field's background. Other properties are detailed below.
<style name=”Theme.MyTheme” parent=”Theme.AppCompat”>
<item name=”searchViewStyle”>#style/MySearchViewStyle</item>
</style>
<style name=”MySearchViewStyle” parent=”Widget.AppCompat.SearchView”>
<!-- Background for the search query section (e.g. EditText) -->
<item name="queryBackground">...</item>
<!-- Background for the actions section (e.g. voice, submit) -->
<item name="submitBackground">...</item>
<!-- Close button icon -->
<item name="closeIcon">...</item>
<!-- Search button icon -->
<item name="searchIcon">...</item>
<!-- Go/commit button icon -->
<item name="goIcon">...</item>
<!-- Voice search button icon -->
<item name="voiceIcon">...</item>
<!-- Commit icon shown in the query suggestion row -->
<item name="commitIcon">...</item>
<!-- Layout for query suggestion rows -->
<item name="suggestionRowLayout">...</item>
</style>
more here