Coloring Buttons in Android with Material Design and Appcompat

Coloring Buttons in Android with Material Design and AppCompat

Officially fixed in Support Library rev.22 (Fri March 13, 2015). See relevant google code issue:

https://issuetracker.google.com/issues/37008632

Usage example

theme.xml:

<item name="colorButtonNormal">@color/button_color</item>

v21/theme.xml

<item name="android:colorButtonNormal">@color/button_color</item>

android - Material button color

Just using AppCompatButton by setting the attribute "app:backgroundTint="@color/wildberries" and make sure your activity extends AppCompatActivity.
I just use it in my project. It works like a charm in both 5.X and pre-5.X.

Material design button with border

You can also use the Material Components for Android.

Add the dependency to your build.gradle:

dependencies { implementation 'com.google.android.material:material:1.3.0' }

In this case you can use the MaterialButton in your layout file:

<com.google.android.material.button.MaterialButton
   ....
   style="@style/Widget.MaterialComponents.Button.OutlinedButton"
   app:cornerRadius=".."
   app:strokeColor="@color/colorPrimary"/>

Apply the style @style/Widget.MaterialComponents.Button.OutlinedButton.

In your case use the app:cornerRadius attribute to change the size of corner radius. This will round off the corners with specified dimensions.

Use te attribute app:strokeColor and app:strokeWidth to change the color and the width of the border.

You can also customize the corners using ShapeApperance (it requires version 1.1.0)

<style name="MyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="shapeAppearanceOverlay">@style/MyShapeAppearance</item>
</style>
<style name="MyShapeAppearance" parent="">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSize">8dp</item>
</style>

The official doc is here and all the android specs here.

---

With jetpack compose you can use the OutlinedButton and the border attribute:

    OutlinedButton(
        onClick = { },
        border = BorderStroke(1.dp, Color.Blue),
        shape = RoundedCornerShape(8.dp) 
    ) {
        Text(text = "Save")
    }

---

OLD (support library)

With the new Support Library 28.0.0, the Design Library now contains the Material Button.

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="XXXX"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

You can customize the button with these attributes:

• 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

Also

How to apply Material Theme to all buttons in application (activity)?

Figured it out. If you're testing on your phisical device and it is set on dark mode, you should make the changes in your values-night/themes.xml file, otherwise, working on your values/themes.xml should be enough

How to change android button text color globally in theme

 <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
   <item name="android:textColor">#yourcolor</item>
    <item name="android:buttonStyle">@style/ButtonColor</item>
    <item name="colorButtonNormal">@color/buttonColor</item>
</style>



<style name="ButtonColor" parent="@android:style/Widget.Button">
   <item name="android:textColor">@color/yourcolor</item>
</style> 

android:textColor This should help you change the text color globally.

Android Material Design Button Styles

You can use the
Material Component library.

Add the dependency to your build.gradle:

dependencies { implementation ‘com.google.android.material:material:1.3.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.

1. Using the backgroundTint attribute.

Something like:

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

2. 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 at least the version 1.1.0.

You can use one of these styles:

• Filled Button (default): style="@style/Widget.MaterialComponents.Button
• Text Button: style="@style/Widget.MaterialComponents.Button.TextButton"
• OutlinedButton: style="@style/Widget.MaterialComponents.Button.OutlinedButton"

---

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

Coloring Buttons in Android with AppCompat

There's a way to set the BackgroundTint in pre-lollipop devices. Try this:
button.setSupportBackgroundTintList(getResources().getColorStateList(R.color.accentColor));
Refer to this Answer: Lollipop's backgroundTint has no effect on a Button

Material effect on button with background color

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

<Button
  ...
  style="@style/Widget.AppCompat.Button.Colored" />

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:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

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:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/primaryPressed" android:state_pressed="true"/>
    <item android:drawable="@color/primaryFocused" android:state_focused="true"/>
    <item android:drawable="@color/primary"/>
</selector>

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.

Material Button won't cast white elevation shadow on Android 11

As Mike M. has mentioned in the comment, those attributes don't really change the color, they just add a little 'tint'.

If you wanna use material buttons with more features, you should take a look at this library :

Github Repo: Carbon by ZieIony

It should fulfill the required objective (casting white shadows) successfully and without issues on all Android APIs.

---

Related Topics