Material effect on button with background color

Question

I am using Android v21 support library    I have created a button with custom background color  The Material design effects like ripple  reveal are gone  except the elevation on click  when I use the back ground color     lt Button  style   android attr buttonStyleSmall   android background   attr colorPrimary   android textColor   color white   android textAllCaps  true   android layout width  fill parent   android layout height  wrap content   android text  Button1     gt     The following is a normal button  and the effects are working just fine    lt Button  style   android attr buttonStyleSmall   android layout width  fill parent   android layout height  wrap content   android textAllCaps  true   android text  Button1    gt

User · Answer

There are two approaches explained in the great tutorial be Alex Lockwood: http://www.androiddesignpatterns.com/2016/08/coloring-buttons-with-themeoverlays-background-tints.html:

Approach #1: Modifying the button’s background color w/ a ThemeOverlay

<!-- res/values/themes.xml -->
<style name="RedButtonLightTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorAccent">@color/googred500</item>
</style>

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/RedButtonLightTheme"/>

Approach #2: Setting the AppCompatButton’s background tint

<!-- res/color/btn_colored_background_tint.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Disabled state. -->
    <item android:state_enabled="false"
          android:color="?attr/colorButtonNormal"
          android:alpha="?android:attr/disabledAlpha"/>

    <!-- Enabled state. -->
    <item android:color="?attr/colorAccent"/>

</selector>

<android.support.v7.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/btn_colored_background_tint"/>

User · Answer

If you re ok with using a third party library  check out traex RippleEffect  It allows you to add a Ripple effect to ANY view with just a few lines of code  You just need to wrap  in your xml layout file  the element you want to have a ripple effect with a com andexert library RippleView container    As an added bonus it requires Min SDK 9 so you can have design consistency across OS versions   Here s an example taken from the libraries  GitHub repo    lt com andexert library RippleView     android layout width  wrap content      android layout height  wrap content      app rv centered  true  gt        lt ImageView         android layout width  100dp          android layout height  100dp          android src   android drawable ic menu edit          android background   android color holo blue dark   gt     lt  com andexert library RippleView gt    You can change the ripple colour by adding this attribute the the RippleView element  app rv color   color my fancy ripple color

User · Answer

I used the backgroundTint and foreground    lt Button     android layout width  match parent      android layout height  40dp      android backgroundTint   color colorAccent      android foreground   android attr selectableItemBackground      android textColor   android color white      android textSize  10sp   gt

User · Answer

Here is a simple and backward compatible way to deliver ripple effect to raised buttons with the custom background   Your layout should look like this   lt Button     android layout width  wrap content      android layout height  wrap content      android background   drawable my custom background      android foreground   android attr selectableItemBackground   gt

User · Answer

Programmatically applying the colors   if  android os Build VERSION SDK INT  gt   android os Build VERSION CODES LOLLIPOP         ColorStateList colorStateListRipple   new ColorStateList              new int       0                new int    Color WHITE     ripple color                     RippleDrawable rippleDrawable    RippleDrawable  myButton getBackground        rippleDrawable setColor colorStateListRipple       myButton setBackground rippleDrawable      applying the ripple color    ColorStateList colorStateList   new ColorStateList          new int                      new int   android R attr state pressed      when pressed                 new int   android R attr state enabled      normal state color                 new int        normal state color                    new int                    Color CYAN     when pressed                 Color RED     normal state color                 Color RED    normal state color               ViewCompat setBackgroundTintList myButton  colorStateList      applying the state colors

User · Answer

With AppCompat  22 1 1   you can add a style like this    lt style name  MyGreenButton  gt       lt item name  colorButtonNormal  gt  009900 lt  item gt   lt  style gt    And use it by just applying the style    lt android support v7 widget AppCompatButton     style   style MyGreenButton      android layout width  match width      android layout height  wrap content      android text  A Green Button        gt    Programmatically changing the color  I found that the only way to update the color  on API 15 or 16  was to use the  background tint list  instead   And it doesn t remove the nice radial animation on API 21 devices   ColorStateList colorStateList   new ColorStateList new int       0    new int    0xFF009900       0xAARRGGBB button setSupportBackgroundTintList colorStateList     Because button setBackground      and button getBackground   mutate   setColorFilter      do not change the button color on API 15 and 16 like they do on API 21

User · Answer

There is another simple solution to provide custom background for  Flat  buttons while keeping their  Material  effects    Place your button in ViewGroup with desired background set there set selectableItemBackground from current theme as background for your button  API   11    i e      lt FrameLayout     android layout width  wrap content      android layout height  wrap content      android background   color blue  gt       lt Button         style   android attr buttonStyleSmall          android background   android attr selectableItemBackground          android textColor   android color white          android textAllCaps  true          android layout width  fill parent          android layout height  wrap content          android text  Button1            gt   lt  FrameLayout gt    Can be used for Flat buttons  it works on API   11  and you will get ripple effect on   21 devices  keeping regular buttons on pre-21 till AppCompat is updated to support ripple there as well   You can also use selectableItemBackgroundBorderless for   21 buttons only

User · Answer

Use backgroundTint instead of background

User · Answer

I tried this   android backgroundTint   color mycolor    instead of changing background property  This does not remove the material effect

User · Answer

If you are interested in ImageButton you can try this simple thing     lt ImageButton     android layout width  wrap content      android layout height  wrap content      android src   android drawable ic button      android background   attr selectableItemBackgroundBorderless    gt

User · Answer

I ran into this problem today actually playing with the v22 library    Assuming that you re using styles you can set the colorButtonNormal property and the buttons will use that color by default     lt style name  AppTheme  parent  BaseTheme  gt       lt  -- Customize your theme here  -- gt       lt item name  colorPrimary  gt  color primaryColor lt  item gt       lt item name  colorPrimaryDark  gt  color primaryColorDark lt  item gt       lt item name  colorAccent  gt  color accentColor lt  item gt       lt item name  colorButtonNormal  gt  color primaryColor lt  item gt   lt  style gt    Outside of that you could still make a style for the button then use that per button if you needed an assortment of colors  haven t tested  just speculating    Remember to add android  before the item names in your v21 style

User · Answer

The  ianhanniballake s answer is absolutely correct and simple  But it took me few days to understand  For someone who don t understand his answer  here is more detail implementation   lt Button         android id    id btn          style   style MaterialButton                gt     lt style name  MaterialButton  parent  Widget AppCompat Button Colored  gt       lt item name  android theme  gt  style Theme MaterialButton lt  item gt          lt  style gt     lt style name  Theme MaterialButton  parent  YourTheme  gt       lt item name  colorAccent  gt  color yourAccentColor lt  item gt       lt item name  colorButtonNormal  gt  color yourButtonNormalColor lt  item gt   lt  style gt       Or      lt Button         android id    id btn          style   style Widget AppCompat Button Colored          android theme   style Theme MaterialButton    gt    lt style name  Theme MaterialButton  parent  YourTheme  gt       lt item name  colorAccent  gt  color yourAccentColor lt  item gt       lt item name  colorButtonNormal  gt  color yourButtonNormalColor lt  item gt   lt  style gt

User · Answer

v22 1 of appcompat-v7 introduced some new possibilities  Now it s possible to assign a specific theme only to one view      Deprecated use of app theme for styling Toolbar  You can now use   android theme for toolbars on all API level 7 and higher devices and   android theme support for all widgets on API level 11 and higher   devices    So instead of setting the desired color in a global theme  we create a new one and assign it only to the Button  Example    lt style name  MyColorButton  parent  Theme AppCompat Light DarkActionBar  gt           lt item name  colorButtonNormal  gt  color myColor lt  item gt   lt  style gt    And use this style as theme of your Button   lt Button  style   android attr buttonStyleSmall   android layout width  fill parent   android layout height  wrap content   android text  Button1   android theme   style MyColorButton   gt

User · Answer

When  you use android background  you are replacing much of the styling and look and feel of a button with a blank color   Update  As of the version 23 0 0 release of AppCompat  there is a new Widget AppCompat Button Colored style which uses your theme s colorButtonNormal for the disabled color and colorAccent for the enabled color   This allows you apply it to your button directly via   lt Button         style   style Widget AppCompat Button Colored    gt    If you need a custom colorButtonNormal or colorAccent  you can use a ThemeOverlay as explained in this pro-tip and android theme on the button   Previous Answer  You can use a drawable in your v21 directory for your background such as    lt  xml version  1 0  encoding  utf-8   gt   lt ripple xmlns android  http   schemas android com apk res android          android color   attr colorControlHighlight  gt       lt item android drawable   attr colorPrimary   gt   lt  ripple gt    This will ensure your background color is  attr colorPrimary and has the default ripple animation using the default  attr colorControlHighlight  which you can also set in your theme if you d like    Note  you ll have to create a custom selector for less than v21    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android drawable   color primaryPressed  android state pressed  true   gt       lt item android drawable   color primaryFocused  android state focused  true   gt       lt item android drawable   color primary   gt   lt  selector gt    Assuming you have some colors you d like for the default  pressed  and focused state  Personally  I took a screenshot of a ripple midway through being selected and pulled the primary focused state out of that

User · Answer

lt android support v7 widget AppCompatButton     android layout width  wrap content      android layout height  wrap content      app backgroundTint   fff      android textColor   000      android text  test   gt    Use   xmlns app  http   schemas android com apk res-auto    and the color will acept on pre-lolipop

User · Answer

I came to this post looking for a way to have a background color of my ListView Item  yet keep the ripple   I simply added my color as a background and the selectableItemBackground as a foreground    lt style name  my list item  gt       lt item name  android background  gt  color white lt  item gt       lt item name  android foreground  gt  attr selectableItemBackground lt  item gt       lt item name  android layout height  gt  dimen my list item height lt  item gt   lt  style gt    and it works like a charm  I guess the same technique could be used for buttons as well  Good luck

[android] Material effect on button with background color

Examples related to android

Examples related to android-5.0-lollipop