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 :)
Related
Applying a button style by default on app theme stopped working when material design library was updated to 1.2.1 (possible in 1.2.0 also).
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="android:buttonStyle">#style/AppTheme.Button.GrayGreen</item>
</style>
<style name="AppTheme.Button" parent="Widget.MaterialComponents.Button">
...
</style>
<style name="AppTheme.Button.GrayGreen">
<item name="android:backgroundTint">#color/green</item>
<item name="android:textColor">#color/white</item>
</style>
Also tried:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="buttonStyle">#style/AppTheme.Button.GrayGreen</item>
</style>
First, MaterialButtons use app:backgroundTint for background colors and not the android attribute. Also, based on documentation which I can see on material.io is that when using styling inside style.xml or theme.xml you need to set the style for every type of MaterialButton component. like this:
<style name="Theme.App" parent="Theme.MaterialComponents.*">
...
<item name="borderlessButtonStyle">#style/Widget.App.Button.TextButton</item>
<item name="materialButtonOutlinedStyle">#style/Widget.App.Button.OutlinedButton</item>
<item name="materialButtonStyle">#style/Widget.App.Button</item>
</style>
<style name="Widget.App.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.Button.TextButton</item>
<item name="android:textAppearance">#style/TextAppearance.App.Button</item>
<item name="shapeAppearance">#style/ShapeAppearance.App.SmallComponent</item>
</style>
...
...
and so on. Check the link for more, it's all the way down on the page.
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 am using "Theme.Light" theme for my android project and while setting up a navigation drawer how can i set actionbar size(height).
I used the below code and i got an error..
<style name="Theme.Light.ActionBar" parent="#android:style/Theme.Light">
<item name="android:windowNoTitle">false</item>
<item name="android:windowActionBar">true</item>
<item name="actionBarSize">36dip</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
can you please reply to my problem as soon as possible and thank you.
Use height attribute,for actionBarHeight
<item name="android:height">#dimen/bar_height</item>
you have to create style like this:
<!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="colorPrimary">#color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">#color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<!-- native widgets will now be "tinted" with accent color -->
<item name="colorAccent">#color/accent</item>
<!--Action bar style-->
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
</style>
<style name="AppTheme.ActionBar" parent="Widget.AppCompat.Light.ActionBar">
<item name="titleTextStyle">#style/AppTheme.ActionBar.TitleText</item>
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.TitleText</item>
<item name="android:height">#dimen/bar_height</item>
</style>
<style name="AppTheme.ActionBar.TitleText" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textSize">#dimen/bar_text_size</item>
<item name="android:textColor">#color/bar_text_color</item>
</style>
you have to try below code :
<resources>
<style name="Theme.FixedSize" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="actionBarSize">48dip</item>
<item name="android:actionBarSize">48dip</item>
</style>
</resources>
If you are using AppCompat, you can set the "actionBarSize" attribute in your theme (which must inherit from Theme.AppCompat.x). You can also use a Toolbar in your layout and set its layout_height to the desired value.
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 was working hard to achieve this but I had no luck. What I tried to do is to change the background color from the style that I attached in my main style tag. This is my code:
<resources>
<style name="AppBaseTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item ></item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#2E495E</item>
</style>
Still nothing changed.
I get this in my application:
http://i.imgur.com/m1MrGwk.png
I had the same issue and it's probably the same problem you were having. Notice the docs say the following:
each style property that you declare must be declared twice..
So my issue was I declared it for 2.1 and up, but not for 3.0 and greater so my Galaxy S4 of course could not see any changes to the colours I was making.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!--Support Library compatibility-->
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/green</item>
<!--Support Library compatibility-->
<item name="background">#color/green</item>
</style>
<style name="NoActionBar" parent="Theme.AppCompat.Light">
<item name="android:windowNoTitle">true</item>
</style>
Is this the only style.xml you have? Else check if you are modifying
for the right API