I have a class, TextViewStyled, which extends TextView
In my theme XML, how do I apply a style to all my TextViewStyled widgets on Activities with a chosen theme?
I have this simple theme, but I want to limit the Black Gold style to TextViewStyled Widgets without specifying the Black Gold in the TextViewStyled style attribute. This is one of many themes which will be switched dynamically.:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyThemeOneofMany" parent="android:Theme.NoTitleBar.Fullscreen">
<item name="android:???????????">#style/TextViewStyled_Black_Gold</item>
</style>
<style name="TextViewStyled_Black_Gold" parent="#android:style/Widget.TextView">
<item name="android:background">#1E1921</item>
<item name="android:textColor">#A85E4F</item>
<item name="android:textColorLink">#FFBC4F</item>
<item name="android:textStyle">normal</item>
</style>
</resources>
For AppCompat theme (2.3.3+):
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:textViewStyle">#style/PizzaSizeWidget</item>
</style>
<style name="CustomTextView" parent="#android:style/TextAppearance.Widget.TextView">
<item name="android:background">#1E1921</item>
<item name="android:textColor">#A85E4F</item>
<item name="android:textStyle">normal</item>
<item name="android:textSize">93sp</item>
</style>
In order to set the style for TextViews in your custom Theme use the name "android:textViewStyle":
<style name="MyThemeOneofMany" parent="android:Theme.NoTitleBar.Fullscreen">
<item name="android:textViewStyle">#style/TextViewStyled_Black_Gold</item>
</style>
Found it when looking through the official android themes.xml [click].
I found that updating the styles works when overriding the base textview class after the inflation event.
Related
I'm trying to set a custom colour for my buttons in Android application but value set for accentColor is always used as button background colour. I am trying to set a global colour for all buttons without having to specify styles or theme for each button individually.
Can you explain please how styling works in Android? I understand the basics, but overriding existing themes is never working for me :(
styles.xml
<resources>
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:titleTextColor">#ffffff</item>
<item name="android:buttonStyle">#style/AppTheme.Button</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.Button" >
<item name="android:backgroundTint">#color/colorPrimaryDark</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
Short answer: Try going to the source code of how the
Theme.MaterialComponents.Light.NoActionBar is defining the style for
the buttons and override those attributes.
Android styling works by merging all the defined attributes in a theme. For example, you have an AppTheme that includes theming for every built-in view. If you create a new theme for your button and your define just a couple of attributes, what android studio does is to merge all the attributes defined in the AppTheme with your new attributes. So if you want to override the buttons, you need to go deep and find out what are exactly the attributes defined in the general AppTheme you set in your application, they may not be the same.
For example, this is how I changed the color of all the buttons in my app since they were using a global attribute for it:
In the general styles.xml file, I put:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorButtonNormal">?myCustomColor</item>
...
</style>
But if I wanted to change the backgroundTint attribute of my buttons, I had to do this:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorButtonNormal">?myCustomColor</item>
<item name="android:buttonStyle">#style/AppButtonStyle</item>
...
</style>
<style name="AppButtonStyle" parent="Widget.AppCompat.Button">
<item name="android:backgroundTint">?attr/colorAccent</item>
</style>
Also, check out this cool Medium post for another developer experience in this topic.
I managed to solve the issue. The main point to notice here is that I am using Theme.MaterialComponents and not AppCompact.
I have defined a new style and I set it to buttonStyle, which refers to style for AppCompact button. In order to set a style for the material button, I had to use "materialButtonStyle" instead of "buttonStyle".
All relevant properties that can be overridden for MaterialComponents can be found in material design documentation: https://www.material.io/develop/android/components/material-button/
So the final code looks like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorSecondary">#color/colorAccent</item>
<item name="floatingActionButtonStyle">#style/AppTheme.Test</item>
<item name="materialButtonStyle">#style/AppTheme.Button</item>
<!--<item name="buttonStyle">#style/Widget.MaterialComponents.Button.Icon</item>-->
</style>
<style name="AppTheme.Button" parent="#style/Widget.MaterialComponents.Button">
<item name="android:backgroundTint">#D400EB</item>
</style>
<style name="AppTheme.Test" parent="#style/Widget.MaterialComponents.FloatingActionButton">
<item name="backgroundTint">#A305B1</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
</resources>
I wanted to know how to set the fontFamily. How to set the color & background color on the Picker.items?
<Picker
style={styles.picker} // cannot set fontFamily here
selectedValue={this.state.selected2}
onValueChange={this.onValueChange.bind(this, 'selected2')}
mode="dropdown">
<Item label="hello" value="key0" /> // cannot set backgroundColor here
<Item label="world" value="key1" />
</Picker>
I posted this on Github and got the answer that only some of the attributes can be set in React Native via the style but some of the more core elements of the picker (like the font used) is driven by native Android. It needs to be done via native android using styles.xml etc.
Unfortunately I am not a native android developer so I have trouble understanding the solution. I added the following snippet to /res/values/styles.xml but text color or background of the popup didn't change.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
<style name="SpinnerItem">
<item name="android:textColor">#ffffff</item>
<item name="android:background">#993399</item>
</style>
<style name="SpinnerDropDownItem">
<item name="android:textColor">#ffffff</item>
<item name="android:background">#993399</item>
</style>
</resources>
What other changes do I need to make? How to set the fontFamily?
That's because you need to declare the styles inside your AppTheme
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item>
</style>
<style name="SpinnerItem">
<item name="android:textColor">#ffffff</item>
<item name="android:background">#993399</item>
</style>
<style name="SpinnerDropDownItem">
<item name="android:textColor">#ffffff</item>
<item name="android:background">#993399</item>
</style>
</resources>
That's it :)
How can I change all my buttons text color?
I know I can set the background color like follows :
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="colorButtonNormal">#color/buttonColor</item>
</style>
How can I do this for the button Text?
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColor">#yourcolor</item>
<item name="android:buttonStyle">#style/ButtonColor</item>
<item name="colorButtonNormal">#color/buttonColor</item>
</style>
<style name="ButtonColor" parent="#android:style/Widget.Button">
<item name="android:textColor">#color/yourcolor</item>
</style>
android:textColor This should help you change the text color globally.
With the new Theme.MaterialComponents theme you can define the materialButtonStyle attribute in your app theme, to customize globally the style of all buttons in your app.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- .... -->
<item name="materialButtonStyle">#style/Widget.App.Button</item>
</style>
With
<style name="Widget.App.Button" parent="Widget.Material3.Button">
<!-- button style customization example -->
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearance">#style/ShapeAppearance.App.SmallComponent</item>
</style>
Use Widget.MaterialComponents.Button as parent if you are using Material2 theme.
If you would like to override only some attributes like colors from the default style use the materialThemeOverlay attribute.
Something like:
<style name="Widget.App.Button" parent="Widget.Material3.Button">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button</item>
</style>
<style name="ThemeOverlay.App.Button">
<!-- For filled buttons, your theme's colorPrimary provides the default background color of the component, and -->
<!--the text color is colorOnPrimary -->
<item name="colorPrimary">#color/my_color</item>
<item name="colorOnPrimary">#color/my_color2</item>
</style>
If you just need to change the text colour of buttons. You can modify the textAppearanceButton style attribute of your main theme.
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorButtonNormal">#color/buttonColor</item>
<item name="android:textAppearanceButton">#style/TextAppearance.AppCompat.Button.Custom</item>
</style>
And declare your new textAppearance style as follows
<style name="TextAppearance.AppCompat.Button.Custom">
<item name="android:textColor">#color/mycustomcolor</item>
</style>
For anyone that stumbles onto this, I recommend checking out a similar question about Material Design Button Styles. With a theme, your "accent color" will be used to color your button.
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="android:buttonStyle">#style/Widget.AppCompat.Button.Colored</item>
<item name="buttonStyle">#style/Widget.AppCompat.Button.Colored</item>
</style>
Since MaterialComponents Buttons use colorPrimary by default you can simply set colorOnPrimary in your theme when using Theme.MaterialComponents.Light, don't know if it's the same with Material3.
<resources>
<!-- Base application theme. -->
<style name="Base.Theme.MyApplication" parent="Theme.MaterialComponents.Light">
<!-- Customize your light theme here. -->
...
<item name="colorOnPrimary">#color/colorOnPrimary</item>
</style>
<style name="Theme.MyApplication" parent="Base.Theme.MyApplication" />
</resources>
Just using AppCompatButton by setting this attribute :
"app:backgroundTint="#color/wildberries"
And make sure your activity extends AppCompatActivity. I just use it in my project. It works like a charm in both 5.X and pre-5.X.
<Button
app:backgroundTint="#fece2f" //any color
/>
This is best way if you don't want it to be defined globally
I have values:styles.xml with:
<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/my_color</item>
<item name="android:textColor">#android:color/white</item>
</style>
and values-v21:styles.xml with:
<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
<item name="android:colorButtonNormal">#color/my_color</item>
<item name="android:textColor">#android:color/white</item>
</style>
And app style with
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/AppTheme.Button</item>
</style>
But the colors appears grey instead of #color/my_color
To customize one Button only set android:theme="#style/AppTheme.Button" to your Button.
<Button
android:theme="#style/AppTheme.Button"
/>
Define your style as you did in your question
<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/my_color</item>
</style>
[EDIT]
See GitHub demo here
Use Widget.AppCompat.Button.Colored as a parent for your style.
<style name="RedButton" parent="Widget.AppCompat.Button.Colored">
<item name="android:textColor">#color/white</item>
<item name="colorButtonNormal">#color/red</item>
</style>
Use android:theme, not style in buttons definitions:
<Button android:theme="#style/RedButton"/>
See AppCompat v21 > Theming and Android Support Library v22.1 - AppCompat blog posts.
(note on second post, android:theme is supported on API11-, it just doesn't do automatic inheritance from parent, you will have to specify it on each child, not an issue here but worth mentioning - see Chris Banes' post on that).
Put the xml line below in your "AppTheme" xml, rather than trying to set it from the "AppTheme.Button". This works for me on v22.1.1 with non-lollipop devices. I'm guessing this is a bug because your solution above works fine for lollipop.
<item name="colorButtonNormal">#color/my_color</item>
Ensure your Activity is extending AppCompatActivity, otherwise it won't handle appCompat styles properly.
class: android.support.v7.app.AppCompatActivity
Gradle: compile 'com.android.support:appcompat-v7:23.0.1'
Use:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="buttonStyle">#style/AppTheme.Button</item>
</style>
remove the android:
That works:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<!-- android:buttonStyle for v21+ and buttonStyle for the rest -->
<item name="buttonStyle">#style/MyCustomButton</item>
<item name="android:buttonStyle">#style/MyCustomButton</item>
<item name="colorButtonNormal">#color/my_color</item>
</style>
<style name="MyCustomButton" parent="Base.Widget.AppCompat.Button">
<item name="android:textColor">#ffffff</item>
<item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
</style>
colorButtonNormal can be set in the theme style. To change the text color, size or any other feature of the button you can create a style and then using buttonStyle (less than v21) or android:buttonStyle (v21+) in the the theme style to set the button style.
v21/styles.xml
<style name="AppTheme.BlueButton" parent="Widget.AppCompat.Button.Colored">
<item name="android:colorButtonNormal">#color/blue</item>
<item name="android:textColor">#color/text_white</item>
</style>
styles.xml
<style name="AppTheme.BlueButton" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/blue_tint</item>
<item name="android:textColor">#color/text_white</item>
</style>
Initially I'm too facing this problem. After making correction like above I got correct UI button
It seems to be a bug on Android framework that we can not change customize colorButtonNormal with Widget.AppCompat.Button theme.
A workaround solution is to define another custom AppCompat theme and use colorAccent to set colorButtonNormal.
There are two following steps.
1.Define another theme for your custom button.
<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>
</style>
<!-- Custom button theme. -->
<style name="CustomButtonTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Set your desired button color here. -->
<item name="colorAccent">#color/red</item>
<item name="buttonStyle">#style/Widget.AppCompat.Button.Colored</item>
</style>
</resources>
2.Apply button theme in layout.
<Button android:theme="#style/CustomButtonTheme"/>
Hi I think the parent widget you used might be not correct one, it should android:Widget.Button for API version 21 or earlier version, for later version 21 or above you should use `android:Widget.Material.Button. Let say you have default style should look see below.
res/values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/AppTheme.Button</item>
</style>
<style name="AppTheme.Button" parent="android:Widget.Button">
<item name="android:background">#color/my_color</item>
<item name="android:textColor">#android:color/white</item>
</style>
</resources>
For API version 21 the resource style file should look like (res/values-v21/style.xml)
<resources>
<style name="AppTheme.Button" parent="android:Widget.Material.Button">
<item name="android:background">#color/my_color</item>
<item name="android:textColor">#android:color/white</item>
</style>
</resources>
Thank you Let me know if you have any question.
In case you wonder why colorButtonNormal is not picked up as defined for disabled buttons, you might also need to set android:disabledAlpha to 1.0 in your theme, otherwise your color will by default blend into the button's background. Example:
<style name="MyButtonTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:disabledAlpha">1.0</item>
<item name="colorButtonNormal">#color/my_solid_disabled_color</item>
<item name="colorAccent">#color/my_solid_accent_color</item>
<item name="buttonStyle">#style/my_button_style</item>
</style>
Try buttonStyle instead of android:buttonStyle, since this is AppCompat attribute pre Lollipop, so it should be without android prefix
i generated custom theme for my app on:
http://jgilfelt.github.io/android-actionbarstylegenerator/
And now i would like to add custom color for background of all activities ale fragments in the app.
I tried to do by this way, but it colors also backgroud of text views and images too (which i don't need).
How can i do it to avoid set custom background of the each activity or fragment layout ?
Thanks for any advice
<style name="Theme.Custom" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarItemBackground">#drawable/selectable_background_custom</item>
<item name="android:popupMenuStyle">#style/PopupMenu.Custom</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Custom</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.Custom</item>
<item name="android:actionDropDownStyle">#style/DropDownNav.Custom</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Custom</item>
<item name="android:actionModeBackground">#drawable/cab_background_top_custom</item>
<item name="android:actionModeSplitBackground">#drawable/cab_background_bottom_custom</item>
<item name="android:actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Custom</item>
<item name="android:background">#color/custom_white</item>
<!-- Light.DarkActionBar specific -->
<item name="android:actionBarWidgetTheme">#style/Theme.Custom.Widget</item>
</style>
You can try adding windowBackground item to your theme, this should color all your activities' backgrounds.
<resources>
<style name="MyTheme" parent="#android:style/Theme.Light">
<item name="android:windowBackground">#color/background</item>
</style>
</resources>