I am using the MaterialButtons where the colors change as per the background tint. I am changing the styles using setTheme(R.style.theme) in the app but the buttons do not change with the theme. More over if I define the background tint in the style the entire apps background is messed up.
example
<style name="AppThemeGreen" parent="AppTheme">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/green</item>
<item name="colorPrimaryDark">#color/green</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:backgroundTint">#color/green</item>
</style>
How do I set the tint color as per the theme I do not want to find the views and use checks progmatically. That would be too tedious how do I do it using styles.
you can create style like this in style.xml file
<style name="PrimaryButton" parent="Theme.AppCompat">
<item name="colorButtonNormal">#color/colorPrimary</item>
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
and give it to button as below
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/click_me"
android:theme="#style/PrimaryButton" />
Related
I am changing color of MaterialTimePicker buttons text by changing colorPrimary of my time picker style. But when I change colorPrimary - chip in selected state also changes it's color.
What I want to achive is to make Ok and Cancel buttons text white, and selected chip leave Blue. On the screen my colorPrimary is Blue.
Is there a way to change buttons text color independently?
<style name="TimePicker" parent="#style/ThemeOverlay.MaterialComponents.TimePicker">
<item name="colorPrimary">#color/blue</item>
<item name="colorSurface">#color/dark_grey</item>
<item name="colorOnSurface">#color/light_grey</item>
<item name="colorOnPrimary">#color/white</item>
<item name="colorOnSecondary">#color/colorAccent</item>
<item name="chipStyle">#style/chipStyle</item>
<item name="materialClockStyle">#style/clockStyle</item>
<item name="imageButtonStyle">#style/Widget.MaterialComponents.TimePicker.ToggleButton</item>
</style>
<style name="chipStyle" parent="Widget.MaterialComponents.TimePicker.Display">
<item name="android:textColor">#color/selector_time_picker_chip_text_color</item>
</style>
I think i found a method.
From the source code we can see that these two buttons (OK and CANCEL) are using borderlessButtonStyle :
<Button
android:id="#+id/material_timepicker_cancel_button"
style="?attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginEnd="8dp"
android:minWidth="72dp"
android:text="#android:string/cancel"
app:layout_constraintEnd_toStartOf="#id/material_timepicker_ok_button"
app:layout_constraintTop_toTopOf="#id/material_timepicker_mode_button" />
So we can simply override the borderlessButtonStyle style in the TimePicker style to change the colors. Like this :
themes.xml :
<style name="ThemeOverlay.App.TimePicker" parent="ThemeOverlay.MaterialComponents.TimePicker">
<item name="borderlessButtonStyle">#style/borderlessButtonStyle</item>
</style>
<style name="borderlessButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">#color/white</item>
</style>
then in the end add this line in your main app's theme :
<style name="Theme.StackOverflow" parent="Theme.MaterialComponents.Light.NoActionBar">
...
<item name="materialTimePickerTheme">#style/ThemeOverlay.App.TimePicker</item>
...
</style>
This will work. Please feel free to improve my answer .
I have my layout button as -
<com.google.android.material.button.MaterialButton
android:id="#+id/save_button"
style="#style/buttonView"
android:text="Save"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
In my styles.xml, I have -
<style name="buttonView" parent="Theme.MyTheme">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginStart">16dp</item>
<item name="android:layout_marginLeft">16dp</item>
<item name="android:layout_marginTop">16dp</item>
<item name="android:layout_marginEnd">16dp</item>
<item name="android:layout_marginRight">16dp</item>
</style>
In my themes.xml, I have -
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MyTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="android:textColorPrimary">#color/black</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>
<!--- Accent color. -->
<item name="colorAccent">#color/red</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant
</item>
<!-- Customize your theme here. -->
</style>
</resources>
As per the Android documentation all the UI elements such as FAB, textview, edit text, button take the color accent. So I expect my button to take the colorAccent by default but why does it take colorPrimary. Am I doing anything wrong?
You can check the official doc.
The filled button has the backgroundTint based on the colorPrimary.
Also in your buttonView style you should extend one of the provided styles:
Default style Widget.MaterialComponents.Button
Icon style Widget.MaterialComponents.Button.Icon
Unelevated style. Widget.MaterialComponents.Button.UnelevatedButton
Unelevated icon style Widget.MaterialComponents.Button.UnelevatedButton.Icon
Example:
<style name="buttonView" parent="Widget.MaterialComponents.Button">
</style>
If you want to change the background color you can:
Use the backgroundTint attribute in your custom style
Override the colorPrimary attribute in your custom style using the materialThemeOverlay (best solution)
Example:
<style name="buttonView"parent="Widget.MaterialComponents.Button">
<item name="materialThemeOverlay">#style/CustomButtonThemeOverlay</item>
</style>
<style name="CustomButtonThemeOverlay">
<item name="colorPrimary">#color/...</item>
</style>
For my case this problem comes around when updating android studio to version 4.1.. button background color, always get color primary purple_500 by default. your code does not have problem. I set backgroundTint attribute to null and background attribute to favorite color, or just set backgroundTint to favorite color.
I want to change the color of the arrow in the fab button from black to white, this is how it looks currently in the theme editor:
And this is my code in styles.xml:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar" >
<item name="colorAccent">#color/accent</item>
<item name="colorForeground">#color/primary</item>
<item name="colorPrimary">#color/primary</item>
<item name="navigationBarColor">#color/white</item>
<item name="statusBarColor">#color/primary_dark</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:navigationBarColor">#color/primary</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="titleTextStyle">#style/MyTitleTextStyle</item>
</style>
<style name="MyTitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
</resources>
I have already manage to change the text color in the App Bar thanks to other answers but I haven't found a way to change this other part.
I'm using appcompat-v7:25.2.0
You could specify any icon with any color for your fab, using src parameter:
Here is an example from our project:
<android.support.design.widget.FloatingActionButton
android:id="#+id/training_player"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/play_fap"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="center_horizontal|bottom"
/>
Or you can simply add color tint to change color of existing icon:
android:tint="#color/white"
The following solution relies on support vectors. Read more here.
my_vector_drawable.xml
<vector
android:tint="?colorControlNormal">
...
</vector>
You can tint support vector drawables. ?colorControlNormal is an attribute defined by your theme. In light themes its semi-transparent black, in dark themes it's semi-transparent or opaque white.
layout.xml
<FloatingActionButton
style="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:srcCompat="#drawable/my_vector_drawable/>
Two things happen here:
Use app:srcCompat which will safely set a support vector drawable on all API levels.
Set a dark theme on the FAB. This will make the icon and the ripple effect white.
Theme explanation:
Dark theme = light foregrounds (text, icons, highlights), dark backgrounds.
Light theme = dark foregrounds, light backgrounds.
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 saw that
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColorSecondary">#android:color/white</item>
affects both menu ... text color (as in ... icon on the right) but also change the border of an unchecked checkbox. What I've been trying to do is to give them different colors. I tried to give a different style to checkbox but no luck.
<style name="Checkbox" parent="Widget.AppCompat.CompoundButton.CheckBox">
<item name="android:textColorSecondary">#color/blue</item>
</style>
and
<CheckBox
android:id="#+id/activitySettings_checkBox_announce"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:clickable="false"
style="#style/Checkbox"/>
but seems impossible to give any style to the checkbox because it always use the activity's theme.
You can change color by using following attribute
<style name="CheckBox" parent="Widget.AppCompat.CompoundButton.CheckBox">
<item name="colorControlNormal">#color/checkbox_normal</item> <!-- border color -->
<item name="colorControlActivated">#color/checkbox_activated</item> <!-- fill color -->
<item name="colorControlHighlight">#color/checkbox_highlight</item> <!-- animation color -->
</style>