Android Material Design Button Styles

Question

I m confused on button styles for material design  I d like to get colorful raised buttons like in the attached link   like the  force stop  and  uninstall  buttons seen under the usage section  Are there available styles or do I need to define them   http   www google com design spec components buttons html buttons-usage  I couldn t find the default button styles    Example     lt Button style   style PrimaryButton      android layout width  wrap content      android layout height  wrap content      android text  Calculate      android id    id button3      android layout below    id editText5      android layout alignEnd    id editText5      android enabled  true    gt    If I try to change the background color of the button by adding       android background   color primary    all of the styles go away  such as the touch animation  shadow  rounded corner  etc

User · Answer

With the stable release of Android Material Components in Nov 2018, Google has moved the material components from namespace android.support.design to com.google.android.material.
Material Component library is replacement for Android’s Design Support Library.

Add the dependency to your build.gradle:

dependencies { implementation ‘com.google.android.material:material:1.0.0’ }

Then add the MaterialButton to your layout:

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="6dp"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearance="@style/MyShapeAppearance"
   />

You can check the full documentation here and API here.

To change the background color you have 2 options.

Using the backgroundTint attribute.

Something like:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>

It will be the best option in my opinion. If you want to override some theme attributes from a default style then you can use new materialThemeOverlay attribute.

Something like:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/GreenButtonThemeOverlay</item>
</style>

<style name="GreenButtonThemeOverlay">
  <!-- For filled buttons, your theme's colorPrimary provides the default background color of the component --> 
  <item name="colorPrimary">@color/green</item>
</style>

The option#2 requires the 'com.google.android.material:material:1.1.0'.

OLD Support Library:

With the new Support Library 28.0.0, the Design Library now contains the MaterialButton.

You can add this button to our layout file with:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="YOUR TEXT"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

By default this class will use the accent colour of your theme for the buttons filled background colour along with white for the buttons text colour.

You can customize the button with these attributes:

app:rippleColor: The colour to be used for the button ripple effect
app:backgroundTint: Used to apply a tint to the background of the button. If you wish to change the background color of the button, use this attribute instead of background.
app:strokeColor: The color to be used for the button stroke
app:strokeWidth: The width to be used for the button stroke
app:cornerRadius: Used to define the radius used for the corners of the button

User · Answer

If I understand you correctly  you want to do something like this      In such case  it should be just enough to use    lt item name  android colorButtonNormal  gt  2196f3 lt  item gt    Or for API less than 21    lt item name  colorButtonNormal  gt  2196f3 lt  item gt    In addition to Using Material Theme Tutorial   Animated variant is here

User · Answer

Simplest Solution    Step 1  Use the latest support library  compile  com android support appcompat-v7 25 2 0      Step 2  Use AppCompatActivity as your parent Activity class  public class MainActivity extends AppCompatActivity     Step 3  Use app namespace in your layout XML file   lt RelativeLayout     xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      android layout width  match parent      android layout height  match parent  gt      Step 4  Use AppCompatButton instead of Button   lt android support v7 widget AppCompatButton     android id    id buttonAwesome      android layout width  wrap content      android layout height  wrap content      android text  Awesome Button      android textColor   color whatever text color you want      app backgroundTint   color whatever background color you want   gt

User · Answer

I tried a lot of answer  amp  third party libs  but none was keeping the border and raised effect on pre-lollipop while having the ripple effect on lollipop without drawback  Here is my final solution combining several answers  border raised are not well rendered on gifs due to grayscale color depth     Lollipop    Pre-lollipop    build gradle  compile  com android support cardview-v7 23 1 1    layout xml   lt android support v7 widget CardView     xmlns android  http   schemas android com apk res android      xmlns card view  http   schemas android com apk res-auto      android id    id card      card view cardElevation  2dp      android layout width  match parent      android layout height  wrap content      card view cardMaxElevation  8dp      android layout margin  6dp       gt       lt Button         android id    id button          android layout width  match parent          android layout height  match parent          android layout margin  0dp          android background   drawable btn bg          android text  My button   gt   lt  android support v7 widget CardView gt    drawable-v21 btn bg xml   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    drawable btn bg xml   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 colorPrimaryDark  android state pressed  true   gt       lt item android drawable   color colorPrimaryDark  android state focused  true   gt       lt item android drawable   color colorPrimary   gt   lt  selector gt    Activity s onCreate      final CardView cardView    CardView  findViewById R id card       final Button button    Button  findViewById R id button       button setOnTouchListener new View OnTouchListener             ObjectAnimator o1   ObjectAnimator ofFloat cardView   cardElevation   2  8                   setDuration                          80           ObjectAnimator o2   ObjectAnimator ofFloat cardView   cardElevation   8  2                   setDuration                          80             Override         public boolean onTouch View v  MotionEvent event                 switch  event getAction                      case MotionEvent ACTION DOWN                      o1 start                        break                  case MotionEvent ACTION CANCEL                  case MotionEvent ACTION UP                      o2 start                        break                            return false

User · Answer

I will add my answer since I don t use any of the other answers provided   With the Support Library v7  all the styles are actually already defined and ready to use  for the standard buttons  all of these styles are available   style   style Widget AppCompat Button  style   style Widget AppCompat Button Colored  style   style Widget AppCompat Button Borderless  style   style Widget AppCompat Button Borderless Colored    Widget AppCompat Button    Widget AppCompat Button Colored    Widget AppCompat Button Borderless   Widget AppCompat Button Borderless Colored      To answer the question  the style to use is therefore    lt Button style   style Widget AppCompat Button Colored                          android text  Button   gt      How to change the color  For the whole app   The color of all the UI controls  not only buttons  but also floating action buttons  checkboxes etc   is managed by the attribute colorAccent as explained here   You can modify this style and apply your own color in your theme definition    lt style name  AppTheme  parent  Theme AppCompat Light NoActionBar  gt               lt item name  colorAccent  gt  color Orange lt  item gt   lt  style gt    For a specific button   If you need to change the style of a specific button  you can define a new style  inheriting one of the parent styles described above  In the example below I just changed the background and font colors    lt style name  AppTheme Button  parent  Widget AppCompat Button Colored  gt       lt item name  colorButtonNormal  gt  color Red lt  item gt       lt item name  android textColor  gt  color White lt  item gt   lt  style gt    Then you just need to apply this new style on the button with   android theme   style AppTheme Button    To set a default button design in a layout  add this line to the styles xml theme    lt item name  buttonStyle  gt  style btn lt  item gt    where  style btn is your button theme  This sets the button style for all the buttons in a layout with a specific theme

User · Answer

you can give aviation to the view by adding z axis to it and can have default shadow to it  this feature was provided in L preview and will be available after it release  For now you can simply add a image the gives this look for button background

User · Answer

I ve just created an android library  that allows you to easily modify the button color and the ripple color  https   github com xgc1986 RippleButton   lt com xgc1986 ripplebutton widget RippleButton     android layout width  wrap content      android layout height  wrap content      android id    id btn      android text  Android button modified in layout      android textColor   android color white      app buttonColor   android color black      app rippleColor   android color white   gt    You don t need to create an style for every button you want wit a different color  allowing you to customize the colors randomly

User · Answer

Here is a sample that will help in applying button style consistently across your app   Here is a sample Theme I used with the specific styles     lt style name  MyTheme  parent   style Theme AppCompat Light  gt      lt item name  colorPrimary  gt  color primary lt  item gt       lt item name  colorPrimaryDark  gt  color primary dark lt  item gt       lt item name  colorAccent  gt  color accent lt  item gt       lt item name  android buttonStyle  gt  style ButtonAppTheme lt  item gt   lt  style gt   lt style name  ButtonAppTheme  parent  android Widget Material Button  gt   lt item name  android background  gt  drawable material button lt  item gt   lt  style gt    This is how I defined the button shape  amp  effects inside res drawable-v21 folder      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 gt       lt shape xmlns android  http   schemas android com apk res android  gt         lt corners android radius  2dp    gt          lt solid android color   color primary    gt       lt  shape gt     lt  item gt   lt  ripple gt    2dp corners are to keep it consistent with Material theme

User · Answer

Beside android support design button MaterialButton  which mentioned by Gabriele Mariotti     There is also another Button widget called com google android material button MaterialButton which has different styles and extends from AppCompatButton   style   style Widget MaterialComponents Button  style   style Widget MaterialComponents Button UnelevatedButton  style   style Widget MaterialComponents Button TextButton  style   style Widget MaterialComponents Button Icon  style   style Widget MaterialComponents Button TextButton Icon    Filled  elevated Button  default     style   style Widget MaterialComponents Button    Filled  unelevated Button    style   style Widget MaterialComponents Button UnelevatedButton    Text Button      style   style Widget MaterialComponents Button TextButton    Icon Button     style   style Widget MaterialComponents Button Icon  app icon   drawable icon 24px     Icons can be added from this   A text Button with an icon       Read  https   material io develop android components material-button      A convenience class for creating a new Material button       This class supplies updated Material styles for the button in the   constructor  The widget will display the correct default Material   styles without the use of the style flag

User · Answer

1  You can create rounded corner button by defining xml drawable and you can increase or decrease radius to increase or decrease roundness of button corner  Set this xml drawable as background of button    lt  xml version  1 0  encoding  utf-8   gt   lt inset xmlns android  http   schemas android com apk res android      android insetLeft  4dp      android insetTop  6dp      android insetRight  4dp      android insetBottom  6dp  gt       lt ripple android color   attr colorControlHighlight  gt           lt item gt               lt shape android shape  rectangle                  android tint   0091ea  gt                   lt corners android radius  10dp    gt                   lt solid android color   1a237e    gt                   lt padding android bottom  6dp    gt               lt  shape gt           lt  item gt       lt  ripple gt   lt  inset gt      2  To change default shadow and shadow transition animation between button states  you need to define selector and apply it to button using android stateListAnimator property  For complete button customization reference   http   www zoftino com android-button

User · Answer

Here is how I got what I wanted   First  made a button  in styles xml     lt style name  Button  gt       lt item name  android textColor  gt  color white lt  item gt       lt item name  android padding  gt 0dp lt  item gt       lt item name  android minWidth  gt 88dp lt  item gt       lt item name  android minHeight  gt 36dp lt  item gt       lt item name  android layout margin  gt 3dp lt  item gt       lt item name  android elevation  gt 1dp lt  item gt       lt item name  android translationZ  gt 1dp lt  item gt       lt item name  android background  gt  drawable primary round lt  item gt   lt  style gt    The ripple and background for the button  as a drawable primary round xml    lt ripple xmlns android  http   schemas android com apk res android  android color   color primary 600  gt     lt item gt       lt shape xmlns android  http   schemas android com apk res android  gt           lt corners android radius  1dp    gt           lt solid android color   color primary    gt       lt  shape gt     lt  item gt   lt  ripple gt    This added the ripple effect I was looking for

[android] Android Material Design Button Styles

Examples related to android

Examples related to material-design

Examples related to android-button