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.
Related
Here is the button :
<Button
android:id="#+id/btn_choose_photo"
style="#style/Widget.MaterialComponents.Button.TextButton.Dialog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_camera"
android:drawablePadding="8dp"
android:text="#string/image_picker_dialog_choose_image"
android:textAlignment="textStart" />
I am using material themes, so this will be inflated into a material button
drawableStart has no effect at all, however drawableEnd, bottom and top work just fine
When I make the button tag a text view, drawableStart works
It seems like a bug or maybe I am missing something ?
Edit: My app theme is as follows :
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!---colors-->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryVariant">#color/colorPrimaryVariant</item>
<item name="colorPrimaryDark">#color/colorPrimaryVariant</item>
<item name="colorSecondary">#color/colorSecondary</item>
<item name="colorSecondaryVariant">#color/colorSecondaryVariant</item>
<item name="colorAccent">#color/colorSecondary</item>
<!--
<item name="android:colorBackground">#color/colorBackground</item>
-->
<!--components-->
<item name="textInputStyle">#style/text_input_layout_style</item>
<item name="bottomSheetDialogTheme">#style/bottom_sheet_dialog_theme</item>
<item name="spinnerStyle">#style/spinner_style</item>
<item name="android:spinnerStyle">#style/spinner_style</item>
<item name="android:toolbarStyle">#style/toolbar_style</item>
<item name="toolbarStyle">#style/toolbar_style</item>
<item name="actionOverflowButtonStyle">#style/overflow_button_style</item>
<item name="android:actionOverflowButtonStyle">#style/overflow_button_style</item>
</style>
You should use app:icon like this:
In the layout:
<Button
...
app:icon="#drawable/ic_camera"
style="#style/Widget.MaterialComponents.Button.TextButton"
/>
It is displayed at the start, before the text label. You can change icon gravity, tint or size.
For more information
Using
android:drawableLeft
will solve the problem, but will not give you RTL(Right to left) support. If your end user uses a different language which follow RTL, then your Button will not support it.
Are you managing the Button's property in the Activity or Fragment, as technically speaking,
android:drawableStart
should work.
You can change to "App compat button"
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/continuar_anonimo_button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center"
app:backgroundTint="#color/greenPrimary"
android:background="#drawable/corner_boton_outline"
android:text="Continuar anonimamente"
android:paddingLeft="15dp"
android:drawableStart="#drawable/ic_google_color"
style="?android:textAppearanceSmall"/>
Use android:drawableLeft
android:drawableLeft="#drawable/ic_phone"
android:backgroundTint="#android:color/white"
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'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
I am testing out my app for API21 on Android! Unfortunately, my buttons seem weird - there is some kind of background color added. The background images did not change - they are completely transparent except for the border. (The different text and size is due to the screenshot).
Here you see the buttons before and since API 21: http://imgur.com/9EEcl0o,yVEnJkI#0
I already tried android:elevation="0dp" and android:background="#android:color/transparent". Anybody knows why my buttons change? Thank you very much!
layout.xml:
<Button android:id="#+id/sm_achievements_btn"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.1"
android:background="#drawable/menu_btn_selector"
android:onClick="showAchievements"
android:text="#string/sm_achievements_btn"
android:padding="#dimen/padding_std"
android:layout_marginTop="#dimen/margin_small"
android:textColor="#color/button_text"
android:textSize="#dimen/text_xlarge"
style="#style/lbm_button"/>
menu_btn_selector.xml:
<item android:drawable="#drawable/menu_button"
android:state_pressed="false"/>
style.xml:
<style name="lbm_button" parent="android:Theme.Holo.Light">
<item name="android:textAllCaps">false</item>
</style>
Material buttons have a default stateListAnimator that provides state-based elevation (e.g. 0dp when disabled, 1dp when enabled). You can clear it by setting android:stateListAnimator="#null" in your style or directly on the Button.
Here is what that would look like on your button XML:
<Button android:id="#+id/sm_achievements_btn"
...
android:textAllCaps="false"
android:stateListAnimator="#null" />
Also, you're using the wrong parent for your button style. You should never set a theme as the parent for a widget style. Regardless, here is what that should look like if you prefer that route:
<Button android:id="#+id/sm_achievements_btn"
...
style="#style/MyButtonStyle" />
<style name="MyButtonStyle" parent="android:Widget.Material.Light.Button">
<item name="android:textAllCaps">false</item>
<item name="android:stateListAnimator">#null</item>
</style>