I need to know what is the best (and recommented) way to tint a Material Button (AppCompatButton) using the latest AppCompat (23.2.1 for the time being). I could have never imagined that it would be so frustrating! I tried most of the answers from here but either they wouldn't work or worked with unexpected results.
I need to keep backwards compatibility to api >= 9 And just need the ripple effect to be applied to >=21 nothing fancy. So what is the best way so far?
I'd appreciate if you could provide both xml and java code.
There are many ways to do that.
My favorite is the following:
<Button
android:id="#+id/activity_main_some_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.AppCompat.Button.Colored"
android:text="This is a button" />
This automatically tints the button with the accent color you (hopefully) set in your theme, while maintaining pressed states at API < Lollipop and Ripple >= Lollipop.
If nothing else works you could just tint the button yourself:
AppCompatButton myExampleButton = new AppCompatButton(getContext());
myExampleButton.setSupportBackgroundTintList(ContextCompat.getColorStateList(getContext(),
R.color.some_color));
Update
You can do the following to use a self defined color:
<style name="MyButtonTheme" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/someColor</item>
</style>
Define a new style with the desired color.
<Button
android:id="#+id/activity_main_some_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/MyButtonTheme"
android:text="This is a button" />
Set it to your button.
Related
I am creating an Android app and I wanted to use extended floating action button so I added this code to my activity:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/new_game_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_gravity="bottom|center"
android:text="#string/main_new_game"
android:backgroundTint="#color/colorAccent"
app:icon="#drawable/ic_play_arrow_24px"/>
The button looks exactly how it is supposed to, except that it does not have ripple effect on click.
How can I add the ripple effect? I took the code straight from https://material.io/develop/android/components/floating-action-button/#extended-fabs and it looks like the ripple should be there by default, but it does not work in my app. I have tried to create new project where I only set up the Material Components (https://material.io/develop/android/docs/getting-started/) and the button still does not have ripple effect. So it does not seem to be a problem with my project setup.
I have also tried setting the app:rippleColor attribute, setting android:clickable="true" android:focusable="true" to no avail. Only thing that sort of worked was setting android:foreground="?attr/selectableItemBackground", but the ripple effect was masked to rectangle instead of the shape of the extended FAB. Also setting the foreground is not very good approach since it is only supported on API 23 and higher and I am targeting API 21.
You are supposed to use this attribute app:rippleColor
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/new_game_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_gravity="bottom|center"
android:text="#string/main_new_game"
android:backgroundTint="#color/colorAccent"
app:icon="#drawable/ic_play_arrow_24px"
app:rippleColor="#color/colorPrimary" />
The default style of the ExtendedFloatingActionButton has a default rippleColor selector based on the colorOnSecondary.
Check in your app theme this color.
In any case you can override the color using:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
app:rippleColor="#color/my_selector" />
Or you can override the colorOnSecondary in your ExtendedFloatingActionButton using:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:theme="style/ExFabOverlay" />
with:
<style name="ExFabOverlay">
<item name="colorOnSecondary">#color/my_color</item>
</style>
Final note: use app:backgroundTint instead of android:backgroundTint.
I'm using the new material components com.google.android.material:material with android x but I can't set a custom background to the button.
I know that I can use app:backgroundTint to change the color
but the default background has some padding that I want to get rid of, and the old way of using android:background to set my own background but this is no longer working.
I looked at the docs but can't find any mention to this change.
In the Material Components Library, the MaterialButton has a default style with insetBottom and insetTop with a value of 6dp.
You can change it using:
<com.google.android.material.button.MaterialButton
android:insetTop="0dp"
android:insetBottom="0dp"
../>
If you want to change the background color you can use the app:backgroundTint attribute or you can override some theme attributes from a default style then you can use new materialThemeOverlay attribute.
In your case you can do something like:
<style name="MtButtonStyle"
parent="Widget.MaterialComponents.Button">
<item name=“materialThemeOverlay”>#style/GreenButtonThemeOverlay</item>
</style>
<style name="GreenButtonThemeOverlay">
<item name="colorPrimary">#color/green</item>
</style>
Finally starting with the version 1.2.0-alpha06 you can use the android:background attribute in the MaterialButton.
<MaterialButton
app:backgroundTint="#null"
android:background="#drawable/button_drawable"
... />
The documentation for the MaterialButton class says:
Do not use the android:background attribute. MaterialButton manages its own background drawable, and setting a new background means MaterialButton can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed, MaterialButton cannot guarantee well-defined behavior.
However, the GitHub readme says:
Note: MaterialButton is visually different from Button and AppCompatButton. One of the main differences is that AppCompatButton has a 4dp inset on the left and right sides, whereas MaterialButton does not.
This mentions only left/right inset, but the Attributes section of the readme shows that all four insets are supported:
So you could add these attributes to your <MaterialButton> tag:
android:insetTop="0dp"
android:insetBottom="0dp"
Looking at https://medium.com/#velmm/material-button-in-android-e4391a243b17 I found that app:backgroundTint (and app:backgroundTintMode) works. It changes a color, but not a drawable selector.
Also you can replace <Button with <android.widget.Button.
If you want to use gradient drawable as MaterialButton's background,
set Your MaterialButton as below:
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:backgroundTint="#null"
android:background="#drawable/group_47"
app:layout_constraintEnd_toEndOf="#+id/input_password"
app:layout_constraintStart_toStartOf="#+id/input_password"
app:layout_constraintTop_toBottomOf="#+id/input_password" />
If you wish to keep your
android:background="#drawable/button_background"
And have MaterialButton respect it, then you must set
app:backgroundTint="#null"
app:backgroundTintMode="add" // it doesn't matter the value, but it must be set
Please note that you can also use app:background instead, although I've noticed enough breaking changes that I still prefer the method above.
I face the same issue when I use state drawable in a Button but It does not change the background of the button. After searching for a long time, I found 2 solutions as below:
The first solution is change the application theme from MaterialComponents to AppCompat in values/themes.xml file. then state drawable will work well.
to
<style name="Theme.MyApplication" parent="Theme.AppCompat.DayNight.DarkActionBar">
If you still want to use MaterialComponents theme then you can try the second solution.Use <android.widget.Button instead of <Button or <com.google.android.material.button.MaterialButton
<android.widget.Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/state_test"
android:text="Button" />
The second solution I found at Here
The main reason for this decision by the google design team to exclude the functionality android:background="#drawable/" from the initial release versions of the material library is to enable developers to build consistent and professional-looking designs for apps at a faster pace. This is because most developers like me are bad in making decisions related to design and colors of the app.
Also, I found this snippet from google tutorial while migrating to MDC.
Just by using android:backgroundTint
<style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
<item name="android:backgroundTint">#color/pink</item>
</style>
<com.google.android.material.button.MaterialButton
android:id="#+id/followButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/channel_header_item_margin"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/titeChannelTV"
style="#style/MyButtonStyle"/>
using a simple
app:backgroundTint="#null"
with button attributes works perfectly.
I'm trying to polish up some details about my app and I'm stuck on design of android Button widget. Up from Android 5.0 everything is fine with simple system Button, but problem starts when I start my app on lower versions - specifically 4.4.2 . System Button has no effect on click which is of course wrong UX. I'd like to avoid making multiple layouts for different android version and I think there is some way to solve this without making my own selector and using in in pre-Lollipop layouts, but I just can't find it. My Button layout looks as follows :
<Button
android:id="#+id/some_id"
android:layout_width="wrap_content"
android:layout_height="#dimen/size_48dp"
android:paddingLeft="#dimen/margin_32dp"
android:paddingRight="#dimen/margin_32dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center"
app:backgroundTint="#color/colorAccent"
android:textColor="#color/white"
android:text="#string/some_text"/>
As i said, on all post-lollipop version it has some effect (from android 6 it's ripple, before it just changes tint) but on Kitkat id does nothing. I tried using AppCompatButton, all sort of colorControlNormal, colorButtonNormal and I don't know what in styles but to no avail. Is there some "easy" way to solve this ?
You can create styles in both styles.xmlad v21 styles.xml
Below is code snippet of v21 styles.xml
<style name="ButtonRed" parent="Theme.AppCompat">
<item name="android:colorButtonNormal">#color/primary_red</item>
<item name="android:colorControlHighlight">#color/primary_red_dark</item>
<item name="android:textColor">#color/dash_title_color_white</item>
</style>
Below is code snippet of styles.xml
<style name="ButtonRed" parent="Base.Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/primary_red</item>
<item name="colorControlHighlight">#color/primary_red_dark</item>
<item name="android:textColor">#color/dash_title_color_white</item>
</style>
Then you can use these styles as theme as given below
<Button
android:layout_width="wrap_content"
android:theme="#style/ButtonRed"
android:layout_height="wrap_content"
android:text="#string/recharge"
/>
Ripple type animation will only work from lollipop onwards. Below that the button will change colour state accordingly
Animations in material design give users feedback on their actions and provide visual continuity as users interact with your app. The material theme provides some default animations for buttons and activity transitions, and Android 5.0 (API level 21) and above lets you customize these animations and create new ones:
Touch feedback
Circular Reveal
Activity transitions
Curved motion
View state changes
Touch feedback in material design provides an instantaneous visual confirmation at the point of contact when users interact with UI elements. The default touch feedback animations for buttons use the new RippleDrawable class, which transitions between different states with a ripple effect.
Verify this Page
https://developer.android.com/training/material/animations.html#Touch
ANd Also these Answers will help you
how to create ripple effect for pre-lollipop
I am making borderless flat button using support library (23.0.1). It works normal on Lollipop. However on pre-Lollipop when I press button Its color changes to colorButtonNormal color like it's a normal button.
I don't think so it's a normal behaviour and focused color should be grey like on Lollipop.
Here's the screenshot from Lollipop and Pre-lollipop.
First normal behaviour on Lollipop:
Borderless button in normal state and focused state on Lollipop
Not normal behaviour on Pre-Lollipop (Desire color is gray like above but it's not):
Borderless button in normal state and focused state on Pre-lollipop
Theme
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
//other stuff
<item name="colorButtonNormal">#color/orangeColor</item>
<item name="buttonBarButtonStyle">#style/BorderlessButtonStyle</item>
</style>
<style name="BorderlessButtonStyle" parent="Widget.AppCompat.Button.Borderless">
<item name="android:textColor">#color/blueTextColor</item>
</style>
And now button in layout:
<Button
android:id="#+id/btnForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/forgot_your_password"
style="?attr/buttonBarButtonStyle"
/>
Any way to get it write using AppCompat Theme and styles without of making separate Drawables.
Borderless Button works on both Post and Pre Lollipop version with Support Library but there's a small difference between their onPressed color.
Pre-Lollipop: By default onPressed color is same as default Button color set using colorButtonNormal.
Lollipop: By default onPressed color is light grey, which is ideal.
You can make a Borderless Button like this:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
style="#style/Widget.AppCompat.Button.Borderless"/>
Now If you want to have the same onPressed color on all versions then you can set colorControlHighlight in a new theme and set that theme on Button.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:theme="#style/BorderlessButton"
style="#style/Widget.AppCompat.Button.Borderless"/>
And theme in your style:
<style name="BorderlessButton" parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">YOUR COLOR</item>
</style>
Updated: You can use android:theme attribute for a View since Android 5.0 Lollipop and AppCompat v22.1.0 (and higher).
Adding style="?borderlessButtonStyle" to the Button worked fine for me.
why do you worry with some things just go with this and be free
<Button
android:id="#+id/btnForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/forgot_your_password"
android:background="#drawable/abc_btn_borderless_material"
/>
and now careless about api stuff
You are using the android implemented style of "buttonBarButtonStyle" since you are calling it via ?atr - use style="#style/BorderlessButtonStyle instead.
Edit: Leave your xml as it is, but you can change it to your wanted behaviour like this:
AppCompatButton button = (AppCompatButton) findViewById(R.id.btnForgotPassword);
ColorStateList colorStateList = new ColorStateList(new int[][] {{0}}, new int[] {0xFF969696});
//969696 is your wanted grey color, just change it
button.setSupportBackgroundTintList(colorStateList);
I saw new appCompat controls are available here. And implemented it in android app, but I don't find any specific way of customizing its color.
Just like if we set accent color in style, the edit text automatically catches it. But it is not working in case of AppCompatButton.
Does anybody find something regarding this?
See here: Coloring Buttons in Android with Material Design and AppCompat
To summarize, you can use the tintBackground attribute on the button itself or you can use colorControlNormal (or a combination).
Also, you can just use Button and it'll get converted to an AppCompatButton as long as you're using the theme and inheriting from AppCompatActivity correctly.
Examples from the linked URL
theme.xml:
<item name="colorButtonNormal">#color/button_color</item>
v21/theme.xml
<item name="android:colorButtonNormal">#color/button_color</item>
or
<Button
android:id="#+id/add_remove_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/bg_remove_btn_default"
android:textColor="#android:color/white"
tools:text="Remove" />
Use the SupportLib with AppCompatButton like this:
<android.support.v7.widget.AppCompatButton
android:id="#+id/add_remove_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/bg_remove_btn_default"
android:textColor="#android:color/white"
tools:text="Remove" />
app is a mxlns: xmlns:app="http://schemas.android.com/apk/res-auto"
so the backgroundTint works also for preLollipop