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.
Related
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.
I am using the material slider, I want to change the custom font slider's toast
can anyone guide me
how to change the slider's font style?
My code:
<com.google.android.material.slider.Slider
android:theme="#style/ThemeOverlay.PrimaryPalette.Red"
style="#style/Widget.App.Slider"
android:id="#+id/sliderRadius"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stepSize="1"
android:valueFrom="0"
android:valueTo="20" />
<style name="Widget.App.Slider" parent="Widget.MaterialComponents.Slider">
<item name="android:textAppearance">#style/TextAppearance.App.Tooltip</item>
</style>
<style name="TextAppearance.App.Tooltip" parent="TextAppearance.MaterialComponents.Tooltip">
<item name="android:textColor">#color/purple_500</item>
<item name="fontFamily">#font/josefin_sans_semibold</item>
<item name="android:fontFamily">#font/josefin_sans_semibold</item>
</style>
<style name="ThemeOverlay.PrimaryPalette.Red" parent="">
<item name="colorPrimary">#e53935</item>
<item name="colorPrimaryDark">#ab000d</item>
<!-- <item name="android:textAppearance">#style/TextAppearance.App.Tooltip</item>-->
</style>
implementation 'com.google.android.material:material:1.3.0'
You can use something like:
<com.google.android.material.slider.Slider
style="#style/App.Slider"/>
with:
<style name="App.Slider" parent="#style/Widget.MaterialComponents.Slider">
<item name="labelStyle">#style/App.Tooltip</item>
</style>
<style name="App.Tooltip" parent="Widget.MaterialComponents.Tooltip">
<!-- background color of the Tooltip -->
<item name="backgroundTint">#color/...</item>
<!-- textAppearance of the Tooltip -->
<item name="android:textAppearance">#style/TextAppearance.App.Tooltip</item>
</style>
<style name="TextAppearance.App.Tooltip" parent="TextAppearance.MaterialComponents.Tooltip">
<item name="android:textColor">#color/....</item>
</style>
I am trying to customize the look of Toolbar in my app.
Target
I would like to set the title color and the background color of the Toolbar.
I read about how Theme and Style works, so I was able to try some solutions.
I found out that title color is managed by app:titleTextColor property and the background color from the android:background attribute.
Premise
To know how to act it is necessary to know how the style of the widget that we need to modify is managed.
The base Toolbar style is defined in the Widget.MaterialComponents.Toolbar style as below.
<style name="Widget.MaterialComponents.Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="titleTextAppearance">?attr/textAppearanceHeadline6</item>
<item name="titleTextColor">?android:attr/textColorPrimary</item>
<item name="subtitleTextAppearance">?attr/textAppearanceSubtitle1</item>
<item name="subtitleTextColor">?android:attr/textColorSecondary</item>
<!-- Overrides minimum height in landscape to avoid headline6 and subtitle1 height concerns. -->
<item name="android:minHeight">#dimen/mtrl_toolbar_default_height</item>
<item name="maxButtonHeight">#dimen/mtrl_toolbar_default_height</item>
</style>
Here the value of titleTextColor is set to ?android:attr/textColorPrimary.
So my first attempt was simply to add the ovverride of android:textColorPrimary attribute in my app theme.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</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:textColorPrimary">#color/white</item>
</style>
Result: This works.
To also set the background I decided to create a custom Toolbar style where to put the background definition, so I changed my theme as below.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
...
<!-- Customize your theme here. -->
<item name="toolbarStyle">#style/MyToolbarStyle</item>
</style>
<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:background">?attr/colorPrimary</item>
</style>
Result: This does not works. The android:background is applied but the android:textColorPrimary not.
Setting the value of titleTextColor directly inside MyToolbarStyle works.
<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="titleTextColor">?attr/colorOnPrimary</item>
<item name="android:background">?attr/colorPrimary</item>
</style>
I also tried to set the toolbar theme where I override the Android attribute:textColorPrimary, as below.
<style name="Base_ToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="android:theme">#style/Base_ToolbarTheme</item>
</style>
<style name="Base_ToolbarTheme">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
Result: This does not works too.
Now I am a bit confused from the outcome of my tests.
Why is it not possible to override the android:textColorPrimary in the custom style?
To apply a style you can use (and the toolbarStyle attribute applies this style to all the Toolbar) the style attribute:
<androidx.appcompat.widget.Toolbar
style="#style/MyToolbarStyle"
with:
<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="titleTextColor">?attr/colorOnPrimary</item>
<item name="android:background">?attr/colorPrimary</item>
</style>
because titleTextColor is a property defined in the Toolbar.
To apply a theme overlay you can use the android:theme attribute:
<androidx.appcompat.widget.Toolbar
android:theme="#style/MyToolbarThemeOverlay"
with
<style name="MyToolbarThemeOverlay">
<item name="android:textColorPrimary">#color/white</item>
</style>
because android:textColorPrimary is an attribute defined at theme level.
If you want to override a theme attribute directly in a style you have to use the materialThemeOverlay attribute:
<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="materialThemeOverlay">#style/MyToolbarThemeOverlay</item>
</style>
With using the AppCompat Material Toolbar androidx.appcompat.widget.Toolbar, I have made the following definitions to customize the Toolbar in a theme
Given this toolbar in a layout file:
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/MyAppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:popupTheme="#style/MyAppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
Define a toolbar style in themes.xml:
<style name="MyAppTheme.Toolbar" parent="Widget.MaterialComponents.Toolbar">
<!-- Add custom stuff here -->
<item name="android:background" tools:targetApi="l">#color/dark_primary</item>
<item name="background">#color/dark_primary</item>
</style>
And also add the overlay styles in themes.xml:
<style name="MyAppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="MyAppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
And then apply in app theme:
<style name="MyAppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
...
<item name="android:toolbarStyle" tools:targetApi="l">#style/MyAppTheme.Toolbar</item>
<item name="toolbarStyle">#style/MyAppTheme.Toolbar</item>
...
</style>
After I update the material components version from 1.0.0 to 1.1.1, the colors inside app messed up. For example color accent not working, buttons color not applied, bottom navigation view become black color.. Please help, thanks in advance!
values/style.xml (style here not working):
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="Button" parent="#style/Widget.MaterialComponents.Button">
<item name="cornerRadius">#dimen/button_radius</item>
<item name="fontFamily">#font/lato_regular_400</item>
<item name="android:textAllCaps">false</item>
</style>
<style name="Button.Next">
<item name="fontFamily">#font/lato_bold_700</item>
<item name="android:textSize">#dimen/_18pxsp</item>
<item name="android:textAllCaps">false</item>
<item name="cornerRadius">#dimen/_40sdp</item>
</style>
values-v23/style.xml (style here is working):
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowLightStatusBar">true</item>
</style>
button.xml:
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_save"
style="#style/Button.Next"
android:layout_width="#dimen/button_width"
android:onClick="#{click}"
android:layout_height="#dimen/button_height"
android:layout_marginBottom="#dimen/_20pxdp"
android:text="#{buttonText}" />
But even the v23 style is working, the colors all still very strange, compare to before update material components version. Very hard to apply back the same colors.
We have officially Material Components 1.1.0
Try to use parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge"
Take a look at documentation.
https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md#bridge-themes-bridge-themes
If you cannot change your theme to inherit from a Material Components theme, you can inherit from a Material Components Bridge theme.
<style name="Theme.MyApp" parent="**Theme.MaterialComponents.Light.Bridge**">
<!-- ... -->
</style>
In your case change:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
To:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">
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