I've got problems to have a good background from an AppCompatImageButton, just to try I'm comparing this two layouts:
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/imageButtonI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:contentDescription="#string/icolor"
android:tint="#color/accent"
app:srcCompat="#drawable/magnify"/>
<ImageButton
android:id="#+id/imageButtonS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:contentDescription="#string/scolor"
android:tint="#color/accent"
android:src="#drawable/magnify"/>
and the style file:
<style name="AppBaseTheme" parent="android:Theme.Material">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primaryDark</item>
<item name="android:colorAccent">#color/accent</item>
</style>
As you can see from this image however, the background of ImageButton is "normal" while there isn't any background in the appcompat one. How can I have the "normal" background using AppCompatImageButton?
A good way to style the Button is to use the style #style/Widget.AppCompat.Button.Colored.
The Widget.AppCompat.Button.Colored style extends the Widget.AppCompat.Button style and applies automatically the accent color you selected in your app theme.
<Button
style="#style/Widget.AppCompat.Button.Colored"
/>
To customize the background color without changing the accent color in your main theme you can create a custom theme for your Button using the android:theme attribute and extending the ThemeOverlay theme.
<Button
style="#style/Widget.AppCompat.Button.Colored"
android:theme="#style/MyButtonTheme"/>
defining the following theme:
<!-- res/values/themes.xml -->
<style name="MyButtonTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="colorAccent">#color/my_color</item>
</style>
I am not sure which version of support library are you using, but before there was bug in the library which is reported here,
https://code.google.com/p/android/issues/detail?id=78428
But they have resolved it in the latest update,
Yes, it appears to work now with the introduction of
android.support.v7.widget.AppCompatButton in AppCompat v22.1.0, color
can be controlled at overall theme level with "colorButtonNormal".
http://android-developers.blogspot.com/2015/04/android-support-library-221.html
http://chris.banes.me/2015/04/22/support-libraries-v22-1-0/
for theme
<item name="colorButtonNormal">#color/button_color</item>
for version 21
<item name="android:colorButtonNormal">#color/button_color</item>
Hope this will help you.
Thanks
Related
Android Studio 3.2.1
Here my layout:
<com.google.android.material.button.MaterialButton
android:id="#+id/bittrexJsonViewButton"
android:layout_width="0dp"
android:layout_height="#dimen/min_height"
android:layout_marginStart="#dimen/half_default_margin"
android:layout_marginEnd="#dimen/half_default_margin"
android:text="#string/json_view"
app:layout_constraintBottom_toBottomOf="#+id/binanceJsonViewButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/binanceJsonViewButton"
app:layout_constraintTop_toTopOf="#+id/binanceJsonViewButton" />
to change MaterialButton's background I change colorAccent in styles.xml
<item name="colorAccent">#color/colorAccent</item>
Nice. It's work.
But the problem is: I do not want to change colorAccent. I want to use background's color for MaterialButton's different from colorAccent
Attribute:
android:background="#aabbcc"
not help.
1st Solution
You can use app:backgroundTint to change back ground color of MaterialButton
<com.google.android.material.button.MaterialButton
android:id="#+id/bittrexJsonViewButton"
android:layout_width="0dp"
android:layout_height="#dimen/min_height"
android:layout_marginStart="#dimen/half_default_margin"
android:layout_marginEnd="#dimen/half_default_margin"
app:backgroundTint="#android:color/holo_orange_dark"
android:text="#string/json_view"
app:layout_constraintBottom_toBottomOf="#+id/binanceJsonViewButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/binanceJsonViewButton"
app:layout_constraintTop_toTopOf="#+id/binanceJsonViewButton" />
2nd Solution
MaterialButton uses colorPrimary as background when button is in active state and colorOnSurface when disabled. So, you can define it in your theme and apply it on material buttons
With the MaterialButton you have 2 options:
Using the backgroundTint attribute as suggest by Zaid Mirza
If you want to override some theme attributes from a default style you can use new materialThemeOverlay attribute. It is the best option in my opinion.
Something like:
<style name="Widget.App.ButtonStyle"
parent="Widget.MaterialComponents.Button">
<item name="materialThemeOverlay">#style/GreenButtonThemeOverlay</item>
</style>
<style name="GreenButtonThemeOverlay">
<item name="colorPrimary">#color/green</item>
</style>
and then:
<com.google.android.material.button.MaterialButton
style="Widget.App.ButtonStyle"
../>
It requires at least the version 1.1.0 of the library.
If you want to set custom drawable you need to make the app:backgroundTint="#null". For just changing the background colour app:backgroundTint="#color/yourColor"
I'm currently using 1.3.0-alpha01
<com.google.android.material.button.MaterialButton
android:id="#+id/bittrexJsonViewButton"
android:layout_width="0dp"
android:layout_height="#dimen/min_height"
android:layout_marginStart="#dimen/half_default_margin"
android:layout_marginEnd="#dimen/half_default_margin"
app:backgroundTint="#null"
android:background="#drawable/your_custom_drawable"
android:text="#string/json_view"
app:layout_constraintBottom_toBottomOf="#+id/binanceJsonViewButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/binanceJsonViewButton"
app:layout_constraintTop_toTopOf="#+id/binanceJsonViewButton" />
You can do it by following the below code.
android:background="#color/black"
app:backgroundTint="#null"
2020: It seems that they just fixed this on April 1st 2020.
It should be released on 1.2.0 beta 1 since the GitHub issue was closed as
"Fixed"
The solution that worked for me is described below:
On Button tag
<Button
android:id="#+id/login_btn"
style="#style/PrimaryButtonStyle"
app:backgroundTint="#null"
android:enabled="true"
android:text="#string/txtBtnLogin" />
#Style/PrimaryButtonStyle
<style name="PrimaryButtonStyle" parent="#style/Widget.MaterialComponents.Button">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginTop">5dp</item>
<item name="android:textColor">#color/colorPrimary</item>
<item name="android:background">#drawable/base_button_style</item>
<item name="textAllCaps">false</item>
<item name="android:textSize">16sp</item>
</style>
Output of this - Button background (light blue) is different than layout background (Comparatively dark blue)
backgroundTint also changed the disabled state color so wasn't good for me
Best solution i could find was to override the primary color for the MaterialButton (only) through overlay style
Add this code to your styles.
Replace ?attr/colorSecondary to whatever color you want
<style name="MyButtonTheme" parent="Widget.MaterialComponents.Button">
<item name="materialThemeOverlay">#style/ButtonStyleTextColor</item>
</style>
<style name="ButtonStyleTextColor">
<item name="colorPrimary">?attr/colorSecondary</item>
</style>
Add the theme to the button
<com.google.android.material.button.MaterialButton
//..
android:theme="#style/MyButtonTheme"/>
Or
If you you using MDC and you want to change the theme for all buttons:
Add this row to your themes.xml
<item name="materialButtonStyle">#style/Button.MyTheme</item>
and add these lines to your type.xml
<style name="Button.MyTheme" parent="Widget.MaterialComponents.Button">
<item name="materialThemeOverlay">#style/ButtonStyleTextColor</item>
</style>
<style name="ButtonStyleTextColor">
<item name="colorPrimary">?attr/colorSecondary</item>
</style>
In that case you don't need to add android:theme="#style/MyButtonTheme" to your MaterialButton
If any mistake please let me know and don't be hurry to downgrade
BackgroundTint Always works on material buttons, but first, do uninstall the app and reinstall it again. Sometimes changes may not reflect until you reinstall the app.
android:backgroundTint is applied over the android:background and
their combination can be controlled by android:backgroundTintMode
do check this answer for difference between android:background, android:backgroundTint and android:backgroundTintMode
https://stackoverflow.com/a/38080463/14289342
Change the backgroundTintMode to add and then your background attribute will be displayed. See example below:
<com.google.android.material.button.MaterialButton
android:id="#+id/bittrexJsonViewButton"
android:layout_width="0dp"
android:layout_height="#dimen/min_height"
android:layout_marginStart="#dimen/half_default_margin"
android:layout_marginEnd="#dimen/half_default_margin"
android:text="#string/json_view"
android:background:"#aabbcc"
app:backgroundTintMode="add"
app:layout_constraintBottom_toBottomOf="#+id/binanceJsonViewButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/binanceJsonViewButton"
app:layout_constraintTop_toTopOf="#+id/binanceJsonViewButton" />
Comments asking about disable color using colorOnSurface you need to use theme settings,
Like this:
<style name="MaterialRedButton"
parent="Widget.MaterialComponents.Button">
<item name="materialThemeOverlay">#style/MaterialRedButtonThemeOverlay</item>
</style>
<style name="MaterialRedButtonThemeOverlay">
<item name="colorPrimary">#android:color/holo_red_dark</item>
<item name="colorOnSurface">#color/white</item>
</style>
I had the same problem, and here is what it did:
create a new style with a parent of a style of on of the material button styles and change the background color and background tint in it.. hopefully it will work with you..
<style name="DialogMaterialButtonOkay" parent="Widget.Material3.Button.UnelevatedButton">
<item name="background">#color/button_background_color_main</item>
<item name="backgroundTint">#color/button_background_color_main</item>
</style>
I am trying to apply a unified style on my button.
This is my v21/styles.xml
<style name="DefaultButton" parent="Widget.AppCompat.Button.Colored">
<item name="android:colorButtonNormal">#f00</item>
<item name="android:textColor">#color/colorTextSecondary</item>
</style>
I apply this to my button like this
<Button
android:id="#+id/submit_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginTop="#dimen/unit_large"
style="#style/DefaultButton"
android:text="Lemme In!" />
nothing fancy going on in here. Yet the color of my button doesn't change. Did something change over the material support packages? I am using '25.3.1'
Actually all of this is part of a greater effort I have to do to change the default button style of the application like this
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/DefaultButton</item>
</style>
I would then remove the individual styling attributes on all the buttons
Change this style="#style/DefaultButton" to
android:theme="#style/DefaultButton"
I am trying to create a button whose text color is the colorAccent and whose background color is the default background color.
It looks like this:
I have tried default styles, but non of them have worked. Currently I have something like this but doesn't work:
styles.xml :
<style name="AppTheme.ButtonRaised" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#android:color/transparent</item>
<item name="android:textColor">#color/colorAccent</item>
</style>
And layout:
<Button
app:theme="#style/AppTheme.ButtonRaised"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="date" />
And I am getting something like this:
I am not getting any effect of style or theme here. I have also tried with style tag, but it doesn't work.
apply theme with a style like this
<style name="ThemeButtonBlue" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorAccent">#color/colorPrimary</item>
<item name="colorButtonNormal">#android:color/transparent</item>
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/colorPrimaryDark</item>
<item name="colorControlHighlight">#color/colorPrimary</item>
</style>
I am also struggling to do this effect. I could achieve something similar, but I don't know if its "material design approved".
I set the style to their button borderless colored and the elevation to 2dp because on material design they say that "Raised buttons have a default elevation of 2dp". But they don't give you xml layout examples which is annoying -_-
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
style="#style/Base.Widget.AppCompat.Button.Borderless.Colored"
android:elevation="2dp"
android:text="Button"/>
Keep in mind that the elevation tag does not show a shadow pre Lollipop devices.
In this android project im creating a default button style.
my styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/ButtonStlye123</item>
</style>
<style name="ButtonStlye123" parent="android:style/Widget.Button">
<item name="android:textSize">19dp</item>
<item name="android:layout_margin">8dp</item>
<item name="android:padding">8dp</item>
<item name="android:textColor">#color/ColorDivider</item>
<item name="android:background">#color/ColorAccent</item>
</style>
my button in a fragment.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btnLogin"
android:id="#+id/btn_login"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:theme="#style/ButtonStlye123"
android:onClick="login" />
In the preview in android studio it looks exactly like I want, but when I run the app on my device the background color is gray ("default button color"). If i change the text color in my styles.xml like:
<item name="android:textColor">#color/ColorPrimary</item>
it changes (also on my device) so the custom style is loading, i tryd different colors (that worked for the text) for the button but it wont change.
Why isnt my background color loading?
Try use AppCompactButton
instead of
<Button
use
<androidx.appcompat.widget.AppCompatButton
that will do the trick
Update: 01/06/2021
Found out that the above will not work on earlier Android versions.
For materiel design Button use
app:backgroundTint="#color/green"
Please Use androidx.appcompat.widget.AppCompatButton instead of Button.
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button_id_Login"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_below="#id/textInnputLayout_editText_id_password"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/Login_screen_button_text"
android:background="#drawable/login_button_style"
android:textAllCaps="false">
</androidx.appcompat.widget.AppCompatButton>
You might be using targetSdkVersion 30 material theme
The solution is change theme.xml style
From
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
To
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
Replace with
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
Changing MaterialComponents to AppCompat works for me..
I think you need to change your attribute from "theme" to "style". These files are intended for different things, so are used differently.
Style is used to assign attributes to individual views or components, and Theme is used to apply attributes to the entire app.
So try this instead:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btnLogin"
android:id="#+id/btn_login"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
<!-- This attribute was changed -->
android:style="#style/ButtonStlye123"
android:onClick="login" />
You should also split these different types of XML into the correct files as appropriate (styles.xml and themes.xml - instead of keeping them all in the same file). This is convention, and won't effect the code compilation or execution, but is recommended as a code style.
Use this attribute backgroundTint it will help you. It work for me. Example :
android:backgroundTint="#color/md_orange_800"
if you are using Android Studio Version 4.1 and above (Beta)
check your themes.xml file in values.
<style name="Theme.NavaFlashLightV4" 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>
</style>
change the attribute to #null
<style name="Theme.NavaFlashLightV4" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#null</item> <!-- HERE -->
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
</style>
for other old versions of Android Studio
just change this attribute
<item name="colorPrimary">#color/colorPrimary</item>
to
<item name="colorPrimary">#color/#null</item>
finally set the background of the button to the drawable icon you want.
example:
<Button
android:id="#+id/btnSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/ic_launcher_background" /> <!--the drawable you want-->
You only need to change your App Theme from Theme.MaterialComponents.DayNight.DarkActionBar to Theme.AppCompat.Light.NoActionBar inside styles.xml file
example :
from : style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"
To : style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"
your style should be like this....
<style name="ButtonStlye123" >
<item name="android:textSize">19dp</item>
<item name="android:layout_margin">8dp</item>
<item name="android:padding">8dp</item>
<item name="android:textColor">#color/ColorDivider</item>
<item name="android:background">#color/ColorAccent</item>
</style>
and in layout
<Button
android:id="#+id/btn3"
style="#style/ButtonStlye123"
android:layout_width="#dimen/sixzero"
android:layout_height="#dimen/sixzero"
android:text="3" />
I am using targetSdk 30 and compileSdk 32 and I am using Button widget. Android Studio version 2021.1.1
In my case, following change worked,
In AndroidManifest.xml, under "application" tag changing "android:theme" from
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
to
android:theme="#style/Theme.MaterialComponents.DayNight.NoActionBar"
I moved to Theme.AppCompat.Light.NoActionBar to remove the title bar. At first I tried to change "style" to "Theme.AppCompat.Light.NoActionBar" inside themes.xml but it didn't work for me.
When my checkbox is checked, I want the color to be #color/colorPrimaryLight. I can set it that way for Lollipop by setting
android:buttonTint="#color/colorPrimaryLight"
in the CheckBox but I don't know how to do it for anything before Lollipop without changing
<item name="colorControlActivated">#color/white</item>
in my theme.
CheckBox for Lollipop:
<CheckBox
android:buttonTint="#color/colorPrimaryLight"
android:id="#+id/SwapCheckbox"
android:layout_marginTop="#dimen/margin_top"
android:layout_marginLeft="#dimen/margin_left_right"
android:layout_marginRight="#dimen/margin_left_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
and for anything before Lollipop (and higher than 4.0.3):
<CheckBox
android:id="#+id/SwapCheckbox"
android:layout_marginTop="#dimen/margin_top"
android:layout_marginLeft="#dimen/margin_left_right"
android:layout_marginRight="#dimen/margin_left_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
And I also have in the theme for my app:
<style name="AppTheme" parent="Theme.AppCompat.Light">
//...
<item name="colorControlActivated">#color/white</item>
//...
</style>
I can't change colorControlActivated as it must be white for the indicator in my ViewPager. Is there anyway to change the background color of my checkbox (even if it is to the default Holo style however best so that it is set to #color/colorPrimaryLight)?
Use the following property in the App compat theme like below
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorAccent">#color/colorAccent</item>
</style>
and use the android.support.v7.widget.AppCompatCheckBox instead of CheckBox