I am migrating from M2 to M3 and my basic materialThemeOverlay no longer works. I follow the code at the bottom of the doc closely, it matched pretty much what I had for M2:
styles.xml
<style name="SecondaryThemeOverlay" parent="">
<item name="colorPrimary">#color/md_theme_light_secondary</item>
<item name="colorOnPrimary">#color/md_theme_light_onSecondary</item>
</style>
<style name="Widget.Button.Secondary" parent="Widget.Material3.Button">
<item name="materialThemeOverlay">#style/SecondaryThemeOverlay</item>
</style>
layout.xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Standard Button" />
<Button
style="#style/Widget.Button.Secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Standard Button Secondary" />
lib version is com.google.android.material:material:1.6.0-beta01, and the Activity is an AppCompatActivity.
App theme parent is Theme.Material3.DayNight.NoActionBar.
Also note that setting the backgroundTint works fine.
You should use ThemeOverlay on materialThemeOverlay like this.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Button style on both light and night mode -->
<style name="AppButtonStyle" parent="Widget.Material3.Button">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearanceOverlay">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<!-- Button with text style on both light and night mode -->
<style name="AppButtonTextStyle" parent="Widget.Material3.Button.TextButton">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button.TextButton</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearanceOverlay">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<!-- Button outline style on both light and night mode -->
<style name="AppOutlinedButtonStyle" parent="Widget.Material3.Button.OutlinedButton">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button.OutlinedButton</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearanceOverlay">#style/ShapeAppearance.App.SmallComponent</item>
</style>
<style name="ThemeOverlay.App.Button" parent="ThemeOverlay.Material3.Button">
<!-- Background color -->
<item name="colorPrimary">#color/primaryDarkAccent</item>
<!-- Text color -->
<item name="colorOnPrimary">#android:color/white</item>
</style>
<style name="ThemeOverlay.App.Button.TextButton" parent="ThemeOverlay.Material3.Button.TextButton">
<!-- Background color -->
<item name="colorPrimary">#color/primaryDarkAccent</item>
<!-- Text color -->
<item name="colorOnSurface">#android:color/white</item>
</style>
<style name="ThemeOverlay.App.Button.OutlinedButton" parent="ThemeOverlay.Material3.Button">
<!-- Background color -->
<item name="colorOnSurface">#color/primaryDarkAccent</item>
<!-- Text color -->
<item name="colorPrimary">#color/primaryDarkAccent</item>
</style>
<style name="TextAppearance.App.Button" parent="TextAppearance.Material3.LabelLarge">
<item name="fontFamily">sans-serif-medium</item>
<item name="android:fontFamily">sans-serif-medium</item>
</style>
</resources>
Use it like this in you main theme.
<item name="materialButtonStyle">#style/AppButtonStyle</item>
Unfortunately the sample in the documentation seems incorrect as always.
Related
I have this SeekBar in my app:
<SeekBar
android:id="#+id/volume_seek_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:theme="#style/Volume_Seekbar" />
And this is the style file:
<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/toolbar_background</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="ProgressBarStyle">
<item name="colorAccent">#color/colorPrimary</item>
</style>
<style name="Volume_Seekbar">
<item name="colorPrimary">#color/app_blue</item>
<item name="colorPrimaryDark">#color/toolbar_background</item>
<item name="colorAccent">#color/app_blue</item>
</style>
I want to use the style to change the color of the SeekBar but it keeps taking the color definition from the AppTheme style. Any idea what is the problem?
With a SeekBar you can use:
<SeekBar
android:theme="#style/MySeekBar"
/>
with:
<style name="MySeekBar">
<item name="android:progressBackgroundTint">#color/....</item>
<item name="android:progressTint">#color/...</item>
<item name="android:colorControlActivated">#color/....</item>
</style>
Now you can also use the new Slider components provided by the Material Components Library:
<com.google.android.material.slider.Slider
android:valueFrom="0"
android:valueTo="300"
android:value="200"
android:theme="#style/slider_red"
/>
You can override the default color using something like:
<style name="slider_red">
<item name="colorPrimary">#......</item>
</style>
Note: Slider requires the version 1.2.0 of the Material Components.
There is this useful information and everything works well:
http://docs.appcelerator.com/platform/latest/#!/guide/Android_Themes
The image is also very helpful:
The problem is that I want to have white or very light gray in the top bar. When I set this as "android:textColorPrimary", however, the text is white in the top bar, but in all alerts for instance as well making it invisible/very difficult to read.
How can I set the text color of the bar to white and theme the alert messages and other text in the default text color (dark gray)?
The themeAndroid.xml in app/platform/android/res/values looks like this
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="materialTheme" parent="#style/Theme.AppCompat.Light">
<item name="colorPrimary">#2e7d32</item>
<item name="colorPrimaryDark">#005005</item>
<item name="colorAccent">#80d8ff</item>
<item name="colorSwitchThumbNormal">#49a7cc</item>
<item name="android:colorButtonNormal">#49a7cc</item>
<item name="android:textColorPrimary">#DADADA</item>
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item>
</style>
If you want to style the color of the actionbar font you need to extend your theme like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.MyThemeActionbar" parent="Theme.AppCompat">
<item name="colorPrimary">#FF0000</item>
<item name="colorPrimaryDark">#000000</item>
<item name="actionBarStyle">#style/CustomTheme.ActionBarStyle</item>
<item name="actionBarTheme">#style/Theme.ActionBarTheme</item>
<!-- tab -->
<item name="actionBarTabTextStyle">#style/TabStyle</item>
<item name="android:actionBarTabTextStyle">#style/TabStyle</item>
</style>
<style name="Theme.ActionBarTheme" parent="style/Widget.AppCompat.Light.ActionBar">
<!-- actionbar arrow -->
<item name="colorControlNormal">#ffffff</item>
</style>
<style name="CustomTheme.ActionBarStyle" parent="style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<!-- actionbar -->
<item name="elevation">0dp</item>
<item name="android:actionMenuTextColor">#FFFFFF</item>
<item name="android:titleTextStyle">#style/CustomTheme.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/CustomTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="CustomTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<!-- actionbar font -->
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="TabStyle" parent="style/Widget.AppCompat.Light.ActionBar.TabText">
<!-- tab font -->
<item name="android:textColor">#ffffff</item>
</style>
</resources>
Then you can set the font color and the primary color to a different value and leave other thinks to the default values
I try to learn Android Themes and got into trouble setting a TextView TextColor to another color then this global:
<item name="android:textColor">#color/white</item>
I created this:
<item name="chatBubbleTextColor">#color/material_bohemia_500</item>
and thought I could use it in the TextView xml like
android:textColor="?attr/chatBubbleTextColor"
but i cannot get it to work maybe it does not work like that?
I know I can do like this:
<style name="BohemiachatBubbleTextColor" parent="android:Theme">
<item name="android:textColor">#color/material_bohemia_500</item>
</style>
But do I really have to do like this? I only want to create a color attribute not creating a new style
Here is the Theme, it´s two Themes and the chatBubbleTextColor is different for both
Bohemia App Theme and Red App Theme
<!-- Base Theme -->
<style name="BaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Attributes for all APIs -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="dialogTheme">#style/AppTheme.Dialog</item>
<item name="alertDialogTheme">#style/AppTheme.Dialog.Alert</item>
<item name="colorControlHighlight">#color/selector_black_pressed</item>
<!-- Theme for the Preferences -->
<item name="preferenceTheme">#style/AppPreferenceTheme</item>
<!-- Theme for the pacv_placesAutoCompleteTextV -->
<item name="pacv_placesAutoCompleteTextViewStyle">#style/Widget.AppCompat.EditText</item>
<!-- Default App Theme -->
<style name="AppTheme" parent="BaseTheme">
<!-- API specific attributes 14+ -->
<item name="selectableRectDrawable">#drawable/state_list_selectable_rect_black</item>
<item name="selectableRectDrawableInverse">#drawable/state_list_selectable_rect_white</item>
<item name="selectableRectDrawableColored">#drawable/state_list_selectable_rect_black</item>
<item name="selectableRoundedRectDrawable">#drawable/state_list_selectable_rounded_rect_black</item>
<item name="selectableRoundedRectDrawableInverse">#drawable/state_list_selectable_rounded_rect_white</item>
<item name="selectableRoundedRectDrawableColored">#drawable/state_list_selectable_rounded_rect_black</item>
</style>
<!-- Bohemia App Theme -->
<style name="BaseTheme.Bohemia" parent="AppTheme">
<!-- Attributes for all APIs -->
<item name="colorPrimary">#color/material_bohemia_400</item>
<item name="colorPrimaryDark">#color/material_bohemia_500</item>
<item name="colorAccent">#color/material_bohemia_a100</item>
<item name="dialogTheme">#style/AppTheme.Dialog.Bohemia</item>
<item name="alertDialogTheme">#style/AppTheme.Dialog.Alert.Bohemia</item>
<item name="android:windowBackground">#color/material_bohemia_600</item>
<!-- Sets the color of the control when it is not activated like an unchecked checkbox. -->
<item name="colorControlNormal">#color/material_bohemia_a200</item>
<!-- Chat bubble -->
<item name="chatBubbleTextColor">#color/material_bohemia_500</item>
</style>
<style name="AppTheme.Bohemia" parent="BaseTheme.Bohemia">
<!-- API specific attributes 14+ -->
<item name="selectableRectDrawableColored">#drawable/state_list_selectable_rect_bohemia</item>
<item name="selectableRoundedRectDrawableColored">#drawable/state_list_selectable_rounded_rect_bohemia</item>
<!-- Add your custom overall styles here -->
</style>
<!-- Red App Theme -->
<style name="BaseTheme.Red" parent="AppTheme">
<!-- Attributes for all APIs -->
<item name="colorPrimary">#color/material_red_500</item>
<item name="colorPrimaryDark">#color/material_red_700</item>
<item name="colorAccent">#color/material_red_a700</item>
<item name="dialogTheme">#style/AppTheme.Dialog.Red</item>
<item name="alertDialogTheme">#style/AppTheme.Dialog.Alert.Red</item>
<item name="android:windowBackground">#color/material_red_300</item>
<!-- Chat bubble -->
<item name="chatBubbleTextColor">#color/material_red_500</item>
</style>
<style name="AppTheme.Red" parent="BaseTheme.Red">
<!-- API specific attributes 14+ -->
<item name="selectableRectDrawableColored">#drawable/state_list_selectable_rect_red</item>
<item name="selectableRoundedRectDrawableColored">#drawable/state_list_selectable_rounded_rect_red</item>
<!-- Add your custom overall styles here -->
</style>
I found the answer to my own question here.
Basically it goes like this:
In the file attr.xml I define this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="ChatBubbleBackGroundColor" format="reference|color" />
<attr name="ChatBubbleTextColor" format="reference|color" />
</resources>
Next I add to my two BaseThemes:
<style name="BaseTheme.Red" parent="AppTheme">
<item name="ChatBubbleBackGroundColor">#color/material_red_a200</item>
<item name="ChatBubbleTextColor">#color/material_red_a700</item>
</style>
<style name="BaseTheme.Orange" parent="AppTheme">
<item name="ChatBubbleBackGroundColor">#color/material_orange_a200</item>
<item name="ChatBubbleTextColor">#color/material_orange_a700</item>
</style>
and finally in my layout:
<TextView
android:id="#+id/quoteTitle"
android:textColor="?ChatBubbleTextColor"
android:BackGround="?ChatBubbleBackGroundColor"
...
</TextView>
Into your TextView use style="#style/chatBubbleTextColor" instead of android:textColor="?attr/chatBubbleTextColor".
Something like this
<TextView
style="#style/chatBubbleTextColor"
android:id="#+id/my_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
You have set color for chatBubbleTextColor in this theme <style name="BaseTheme.Bohemia" parent="AppTheme"> if you apply this theme to any activity with in that if you set it to any TextView color android:textColor="?attr/chatBubbleTextColor" then it will work if set chatBubbleTextColor in AppTheme Style it will be available to entire app
I have a couple of Themes in an app and it works ok. Now I wanted to set a chat bubble text color to color red when user select BaseTheme.Red, and text color orange when user select BaseTheme.Orange (see code below)
It´s only the chat bubble text right that I want to be like red for the ´Red´ and Orange for the Orange Theme and all other TextView text color in the app will have default Theme color.
I try to learn Android Themes and got into trouble setting this chat TextView text color to another color then this global:
<item name="android:textColor">#color/white</item>
I created this: Inside the BaseTheme.Red
<item name="chatBubbleTextColor">#color/material_red_500</item>
and thought I could use it in the TextView xml like
android:textColor="?attr/chatBubbleTextColor"
but i cannot get it to work maybe it does not work like that?
How can I with the Themes below make this work?
Here is two Themes Red and Orange:
<!-- Base Theme -->
<style name="BaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Attributes for all APIs -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="dialogTheme">#style/AppTheme.Dialog</item>
<item name="alertDialogTheme">#style/AppTheme.Dialog.Alert</item>
<item name="colorControlHighlight">#color/selector_black_pressed</item>
<!-- Theme for the Preferences -->
<item name="preferenceTheme">#style/AppPreferenceTheme</item>
<!-- Theme for the pacv_placesAutoCompleteTextV -->
<item name="pacv_placesAutoCompleteTextViewStyle">#style/Widget.AppCompat.EditText</item>
<!-- Default App Theme -->
<style name="AppTheme" parent="BaseTheme">
<!-- API specific attributes 14+ -->
<item name="selectableRectDrawable">#drawable/state_list_selectable_rect_black</item>
<item name="selectableRectDrawableInverse">#drawable/state_list_selectable_rect_white</item>
<item name="selectableRectDrawableColored">#drawable/state_list_selectable_rect_black</item>
<item name="selectableRoundedRectDrawable">#drawable/state_list_selectable_rounded_rect_black</item>
<item name="selectableRoundedRectDrawableInverse">#drawable/state_list_selectable_rounded_rect_white</item>
<item name="selectableRoundedRectDrawableColored">#drawable/state_list_selectable_rounded_rect_black</item>
</style>
<!-- Orange App Theme -->
<style name="BaseTheme.Orange" parent="AppTheme">
<!-- Attributes for all APIs -->
<item name="colorPrimary">#color/material_orange_500</item>
<item name="colorPrimaryDark">#color/material_orange_700</item>
<item name="colorAccent">#color/material_orange_a700</item>
<item name="dialogTheme">#style/AppTheme.Dialog.Orange</item>
<item name="alertDialogTheme">#style/AppTheme.Dialog.Alert.Orange</item>
<item name="android:windowBackground">#color/material_orange_300</item>
</style>
<style name="AppTheme.Orange" parent="BaseTheme.Orange">
<!-- API specific attributes 14+ -->
<item name="selectableRectDrawableColored">#drawable/state_list_selectable_rect_orange</item>
<item name="selectableRoundedRectDrawableColored">#drawable/state_list_selectable_rounded_rect_orange</item>
<!-- Add your custom overall styles here -->
</style>
<!-- Red App Theme -->
<style name="BaseTheme.Red" parent="AppTheme">
<!-- Attributes for all APIs -->
<item name="colorPrimary">#color/material_red_500</item>
<item name="colorPrimaryDark">#color/material_red_700</item>
<item name="colorAccent">#color/material_red_a700</item>
<item name="dialogTheme">#style/AppTheme.Dialog.Red</item>
<item name="alertDialogTheme">#style/AppTheme.Dialog.Alert.Red</item>
<item name="android:windowBackground">#color/material_red_300</item>
<!-- Chat bubble attribute not working-->
<item name="chatBubbleTextColor">#color/material_red_500</item>
</style>
<style name="AppTheme.Red" parent="BaseTheme.Red">
<!-- API specific attributes 14+ -->
<item name="selectableRectDrawableColored">#drawable/state_list_selectable_rect_red</item>
<item name="selectableRoundedRectDrawableColored">#drawable/state_list_selectable_rounded_rect_red</item>
<!-- Add your custom overall styles here -->
</style>
I found the answer to my own question here
Basically, it goes like this:
In the file attr.xml, I define this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="ChatBubbleBackGroundColor" format="reference|color" />
<attr name="ChatBubbleTextColor" format="reference|color" />
</resources>
Next I add to my two BaseTheme:
<style name="BaseTheme.Red" parent="AppTheme">
<item name="ChatBubbleBackGroundColor">#color/material_red_a200</item>
<item name="ChatBubbleTextColor">#color/material_red_a700</item>
</style>
<style name="BaseTheme.Orange" parent="AppTheme">
<item name="ChatBubbleBackGroundColor">#color/material_orange_a200</item>
<item name="ChatBubbleTextColor">#color/material_orange_a700</item>
</style>
and finally in my layout
<TextView
android:id="#+id/quoteTitle"
android:textColor="?ChatBubbleTextColor"
android:BackGround="?ChatBubbleBackGroundColor"
...
</TextView>
I would like to set my spinner drop down color to white, whilst keeping the other elements in my theme the default color. Here is the situation:
<android.support.v7.widget.Toolbar
android:layout_height="#dimen/action_bar_height"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ToolbarTheme.Base"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"/>
</android.support.v7.widget.Toolbar>
And the style is:
<!-- My base app theme -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/theme_tint</item>
<!-- <item name="colorControlNormal">#FFFFFF</item> -->
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:typeface">sans</item>
<item name="android:windowBackground">#color/background_primary</item>
</style>
<!-- My Toolbar theme -->
<style name="ToolbarTheme.Base" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlNormal">#FFFFFF</item>
</style>
If I was to put <item name="colorControlNormal">#FFFFFF</item> in the App theme (commented out above) then the spinner drop down will do to white BUT the checkbox will also turn white. So how can I get the spinner ONLY to go white?
Finally, I have found a solution on how to change arrow color of Spinner to white.
1) In styles.xml, add the following style:
<style name="ActionBarThemeOverlay" parent="">
<item name="android:textColorPrimary">#ffffff</item>
<item name="colorControlNormal">#ffffff</item>
<item name="colorControlHighlight">#ff33b5e5</item>
</style>
<style name="Widget.MyTheme.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:theme">#style/ActionBarThemeOverlay</item>
</style>
2) In the layout, where you use the Spinner (in your case with Toolbar), add the style to your spinner:
<Spinner
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_spinner"
style="#style/Widget.MyTheme.HeaderBar.Spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Just stumbled across this questions. Even though it has been asked some time ago I just wanted to leave an answer that should work:
Toolbar *.xml
<android.support.v7.widget.Toolbar
<!-- leave the theme stuff out of here -->
style="#style/MyToolbarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
Styles / Themes
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- your other attributes -->
<!-- following is used to tint the checkbox - purple for demo purpose -->
<item name="colorControlNormal">#2196F3</item>
</style>
<style name="MyToolbarStyle">
<item name="android:minHeight">?actionBarSize</item>
<item name="android:background">?colorPrimary</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/MyToolbarTheme</item>
</style>
<style name="MyToolbarTheme">
<!-- Used to tint the back arrow, menu and spinner arrow -->
<item name="colorControlNormal">#FFF</item>
</style>
Result
Note: I made the checkbox purple for demo purpose