How to change the color of a button?

Question

I'm new to android programming. How do I change the color of a button?

<Button
    android:id="@+id/btn"
    android:layout_width="55dp"
    android:layout_height="50dp"
    android:layout_gravity="center"
    android:text="Button Text"
    android:paddingBottom="20dp"/>

@theapache64 Maybe I don't research properly. But, I think subtle changes of UI for Android SDK and Material Design are documented not so straightly or even poorly. It's like sometimes you should rely on IDE hints, sometimes on documentation, sometimes on some stuff from forums like Stack Overflow. I came here after seeking in Material Design documentation. — Daniel Galion, Oct 23 '20 at 11:40

Nechemia Hoffmann · Answer 1 · 2019-05-21T17:02:37.387

103

The RIGHT way...

The following methods actually work.

if you wish - using a theme
By default a buttons color is android:colorAccent. So, if you create a style like this...

<style name="Button.White" parent="ThemeOverlay.AppCompat">
    <item name="colorAccent">@android:color/white</item>
</style>

You can use it like this...

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/Button.White"
    />

alternatively - using a tint
You can simply add android:backgroundTint for API Level 21 and higher, or app:backgroundTint for API Level 7 and higher.

For more information, see this blog.

The problem with the accepted answer...

If you replace the background with a color you will loose the effect of the button, and the color will be applied to the entire area of the button. It will not respect the padding, shadow, and corner radius.

edited May 21 '19 at 17:02

answered May 02 '19 at 14:27

Nechemia Hoffmann

2,118
2
12
21

8

The backgroundTint is the way to go. – Cory Roy May 20 '19 at 15:36
7

For some reason, both methods do not work for me. Although I can see it from the Design tab, when I run the app, it still shows me the default color. (I also tried `android:background` but did not work either.) – David Lee Aug 08 '20 at 19:33
`theme` doesn't work, only `backgroundTint` works – Payel Senapati Aug 06 '22 at 10:43
1

@DavidLee did you found out what was the issue? – ricardopereira Jan 23 '23 at 13:19
@CoryRoy Why do you believe backgroundTint is superior? – LabGecko Aug 02 '23 at 12:28
1

@LabGecko backgroundTint multiplies rather than replaces, so shadows etc won't be removed but still work with the new colour. – Cory Roy Aug 15 '23 at 19:27

score 51 · Accepted Answer · edited Oct 01 '22 at 18:15

51

You can change the colour two ways; through XML or through coding. I would recommend XML since it's easier to follow for beginners.

XML:

<Button
    android:background="@android:color/white"
    android:textColor="@android:color/black"
/>

You can also use hex values ex.

android:background="#FFFFFF"

Coding:

//btn represents your button object

btn.setBackgroundColor(Color.WHITE);
btn.setTextColor(Color.BLACK);

edited Oct 01 '22 at 18:15

DevineDecrypter

151
1
16

answered Sep 20 '15 at 04:25

Aicha Hezit

560
4
5

2

Would like to point out that its a good idea to use layout XML for this regardless of your experience level, especially if the color doesn't need to change. Hell even if it does change I would use layout binding. – BillHaggerty Jun 26 '17 at 18:47
11

don't use this - you'll lose the button animation (lift and ripple) – Someone Somewhere Mar 14 '19 at 12:22
@SomeoneSomewhere that's right. See [the correct answer](https://stackoverflow.com/a/55954610/7711481). – Nechemia Hoffmann May 02 '19 at 14:29

score 33 · Answer 3 · edited Jan 22 '23 at 16:22

33

For the text color add:

android:textColor="<hex color>"

For the background color add:

android:background="<hex color>"

From API 21 you can use:

android:backgroundTint="<hex color>"
android:backgroundTintMode="<mode>"

How to customize different buttons in Android

edited Jan 22 '23 at 16:22

max pleaner

26,189
9
66
118

answered Sep 19 '15 at 17:29

Tomblarom

1,429
1
15
38

1

@PayelSenapati kinda stocked my answer is still reputable eventhough it's from 2015 haha – Tomblarom Aug 07 '22 at 11:32
I think this is the good answer self explaining when to use backgound and when to use backgroundTint. – Noman Shaikh Aug 13 '22 at 18:34
3

broken link.... – asdjfiasd Oct 25 '22 at 14:24
Not just a broken link, but hackable, putting those who click it at risk – LabGecko Aug 02 '23 at 12:31
Tried to edit the answer to fix the link, but got "Too many edits pending. Try again later." So, here's a (probably) useful link on buttons. Don't forget to look at the Material and Compose suggestions. https://developer.android.com/develop/ui/views/components/button – LabGecko Aug 02 '23 at 12:39

score 8 · Answer 4 · answered May 25 '21 at 03:46

Many great methods presented above - One newer note

It appears that there was a bug in earlier versions of Material that prevented certain types of overriding the button color.

See: [Button] android:background not working #889

I am using today Material 1.3.0. I just followed the direction of KavinduDissanayake in the linked post and used this format:

app:backgroundTint="@color/purple_700"

(I changed the chosen color to my own theme of course.) This solution worked very simply for me.

score 7 · Answer 5 · answered Apr 20 '21 at 08:15

7

If the first solution doesn't work try this:

android:backgroundTint="@android:color/white"

I hope this work. Happy coding.

answered Apr 20 '21 at 08:15

Pedro Molina

1,101
12
12

This didn't work for me today. using app: instead of android: as suggested by @zFreeindeed fixed it – Pete Baron Sep 06 '22 at 23:47
this code worked for me, its changes the background color of the button – lulitha Jun 13 '23 at 15:31

score 5 · Answer 6 · answered Jul 29 '18 at 04:55

Here is my code, to make different colors on button, and Linear, Constraint and Scroll Layout

First, you need to make a custom_button.xml on your drawable

Go to res
Expand it, right click on drawable
New -> Drawable Resource File
File Name : custom_button, Click OK

Custom_Button.xml Code

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/red"/> <!-- pressed -->
    <item android:state_focused="true" android:drawable="@color/blue"/> <!-- focused -->
    <item android:drawable="@color/black"/> <!-- default -->
</selector>

Second, go to res

Expand values
Double click on colors.xml
Copy the code below

Colors.xml Code

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="black">#000</color>
    <color name="violet">#9400D3</color>
    <color name="indigo">#4B0082</color>
    <color name="blue">#0000FF</color>
    <color name="green">#00FF00</color>
    <color name="yellow">#FFFF00</color>
    <color name="orange">#FF7F00</color>
    <color name="red">#FF0000</color>
</resources>

Screenshots below

XML Coding Design Preview

score 4 · Answer 7 · edited Aug 29 '21 at 10:44

4

Starting with API 23, you can do:

btn.setBackgroundColor(getResources().getColor(R.color.colorOffWhite));

and your colors.xml must contain:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorOffWhite">#80ffffff</color>
</resources>

edited Aug 29 '21 at 10:44

Zoe

27,060
21
118
148

answered Jan 12 '19 at 21:01

sachin pathak

77
5

score 4 · Answer 8 · answered Aug 07 '21 at 00:44

4

Best way to change button color without losing button ghosting and other features.

Try it and you will see it is the best

app:backgroundTint="@color/color_name"

answered Aug 07 '21 at 00:44

bzgd

49
3

This is the best answer! – Pisumathu Jun 10 '23 at 02:25

score 2 · Answer 9 · answered Jan 10 '22 at 21:27

2

in theme change this: parent="Theme.MaterialComponents.DayNight.DarkActionBar" to that: parent="Theme.AppCompat.Light.NoActionBar"

It worked for me after many search

answered Jan 10 '22 at 21:27

Abbas Faraji

21
4

score 2 · Answer 10 · answered May 29 '22 at 20:00

2

usually with API 21 and above : just PUT this attribute : android:backgroundTint=" your color "

answered May 29 '22 at 20:00

mohamed hesen

43
7

CraigTheWorst · Answer 11 · 2022-10-30T15:40:54.783

2

i'm using api 32 and I had to do it this way in the xml code:

android:backgroundTint="@android:color/white"

edited Oct 30 '22 at 15:40

answered Oct 30 '22 at 15:39

CraigTheWorst

21
2

score 1 · Answer 12 · answered Jun 24 '20 at 10:51

You can change the value in the XML like this:

<Button
    android:background="#FFFFFF"
     ../>

Here, you can add any other color, from the resources or hex.

Similarly, you can also change these values form the code like this:

demoButton.setBackgroundColor(Color.WHITE);

Another easy way is to make a drawable, customize the corners and shape according to your preference and set the background color and stroke of the drawable. For eg.

button_background.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="2dp" android:color="#ff207d94" />
    <corners android:radius="5dp" />
    <solid android:color="#FFFFFF" />
</shape>

And then set this shape as the background of your button.

<Button
    android:background="@drawable/button_background.xml"
     ../>

Hope this helps, good luck!

score 1 · Answer 13 · edited Jul 18 '21 at 04:36

1

see the image and easy understand

edited Jul 18 '21 at 04:36

STA

30,729
8
45
59

answered Jul 18 '21 at 04:17

Nurul

89
1
1

2

Welcome to SO. It is better to code instead of sending a screenshot – Foroogh Varmazyar Jul 18 '21 at 05:50
https://meta.stackoverflow.com/questions/285551/why-not-upload-images-of-code-on-so-when-asking-a-question/285557#285557 – Yunnosch Aug 01 '21 at 20:48

score 1 · Answer 14 · answered Feb 10 '22 at 11:19

in new update of android studio you have to change the

button -> androidx.appcompat.widget.AppCompatButton

then only the button color will changed

res/drawable/button_color_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#FFDA8200" />

    <stroke
        android:width="3dp"
        android:color="#FFFF4917" />

</shape>

And add button to your XML activity layout and set background android:background="@drawable/button_color_border".

<androidx.appcompat.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_border"
    android:text="Button" />

score 1 · Answer 15 · answered Aug 08 '22 at 05:15

Use below code for button background color

btn.setBackgroundResource(R.drawable.btn_rounded);

here is drawable xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/gray_scale_color"/>
            <corners android:radius="@dimen/_12sdp"/>

            <stroke android:width="0.5dp"
                android:color="?attr/appbackgroundColor"/>
        </shape>
    </item>
</layer-list>

score 0 · Answer 16 · answered Jun 24 '20 at 10:34

If you are trying to set the background as some other resource file in your drawable folder, say, a custom-button.xml, then try this:

button_name.setBackgroundResource(R.drawable.custom_button_file_name);

eg. Say, you have a custom-button.xml file. Then,

button_name.setBackgroundResource(R.drawable.custom_button);

Will set the button background as the custom-button.xml file.

Gmgm · Answer 17 · 2021-07-21T23:30:23.923

0

I have the same problem the solution for me was the background color was colorPrimary of my theme you can use custom theme as one answer say above and set the colorPrimary to what you want

1- add this to your "value/themes/themes.xml" inside resources

<resources>
   <style name="Button.color" parent="ThemeOverlay.AppCompat">
       <item name="colorPrimary">@color/purple_500</item>
   </style>
</resources>

2- add this line to the button you want to have the color

    <Button
  
      android:theme="@style/Button.color"/>

edited Jul 21 '21 at 23:30

answered Jul 20 '21 at 13:24

Gmgm

1
1

Please attach a code snippet or example so others can better understand your solution. Thanks! – Simon Pham Jul 21 '21 at 04:59

score 0 · Answer 18 · edited Oct 03 '21 at 00:28

0

Go to res > values > themes > theme.xml/themes.xml. Then change:

<style name="Theme.BirthdayGreet" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

To:

<style name="Theme.MemeShare" parent="Theme.AppCompat.Light.NoActionBar">)>

Watch this video for more information.

edited Oct 03 '21 at 00:28

Jeremy Caney

7,102
69
48
77

answered Oct 02 '21 at 22:20

Anshu kumar

11

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/29979636) – Boken Oct 02 '21 at 22:36
@Boken: This is clearly more than just a _link_ to an answer. It also includes specific guidance. – Jeremy Caney Oct 03 '21 at 00:26

score 0 · Answer 19 · answered Jan 28 '22 at 09:40

0

backgroundTint above API21 background has no effect it takes colorPrimary of the theme by default

answered Jan 28 '22 at 09:40

tintin

335
2
8

score 0 · Answer 20 · answered Feb 11 '22 at 14:53

Button background color in xml

<Button
    android:id="@+id/button"
    android:background="#0000FF"
    android:textColor="#FFFFFF"/>

Change button background color programmatically

Button button = findViewById(R.id.button);
button.setBackgroundColor(Color.BLUE);

Custom button background

shape.xml [res --> drawble]

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="5dp" />
    <gradient
        android:angle="0"
        android:endColor="#0000FF"
        android:startColor="#00FFFF" />
    <stroke
        android:width="1dp"
        android:color="#000000" />
</shape>

Add this line

android:background="@drawable/shape"

full code

<Button
    android:id="@+id/button"
    android:background="@drawable/shape"
    android:textColor="#FFFFFF"/>

Material Design Button

Change button background color

app:backgroundTint="#0000FF"

Button Stroke color

app:strokeColor="#000000"

Button Stroke width

app:strokeWidth="2dp"

Full code

<Button
    android:id="@+id/button"
    android:textColor="#FFFFFF"
    app:backgroundTint="#0000FF"
    app:strokeColor="#000000"
    app:strokeWidth="2dp"/>

Hope you helpful!

score 0 · Answer 21 · answered Dec 04 '22 at 14:14

Go to themes.xml file under res -> values -> themes

Go to the line -

<style name="Theme.YourProjectName" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

and change it to -

<style name="Theme.YourProjectName" parent="Theme.AppCompat.DayNight.DarkActionBar">

Then proceed with changing

android:backgroundTint to desired color

Osagui Aghedo · Answer 22 · 2023-02-23T12:32:04.983

0

Buttons use colorPrimary attribute by default.

If you are styling using Theme:

<item name="colorPrimary">@color/yourColor</item>

Note that other widgets also use this attribute.

Drop any other widgets, that you know use this attribute, in the comments.

edited Feb 23 '23 at 12:32

answered Feb 23 '23 at 10:10

Osagui Aghedo

330
4
12

score 0 · Answer 23 · answered May 07 '23 at 12:34

btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape  android:shape="rectangle" >
            <corners android:radius="10dp" />
        </shape>
    </item>
</selector>

btn_color_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--    state pressed-->
    <item android:color="#94E4A2" android:state_pressed="true"/>
    <!--    state Disabled-->
    <item android:color="#c5c5c5"  android:state_enabled="false"/>
    <!--    state default-->
    <item android:color="#36df54" />
</selector>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:gravity="center"
    android:orientation="vertical"
    android:weightSum="2"
    tools:context=".MainActivity">


    <Button
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:text="Hello World"
        android:background="@drawable/btn_bg"
        app:backgroundTint="@color/btn_color_state"
        android:layout_margin="8dp" />

    <Button
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:text="Hello World"
        android:enabled="false"
        android:background="@drawable/btn_bg"
        app:backgroundTint="@color/btn_color_state"
        android:layout_margin="8dp" />
</LinearLayout>

score -2 · Answer 24 · edited Jun 30 '18 at 11:40

-2

To change the color of button programmatically

Here it is :

Button b1;
//colorAccent is the resource made in the color.xml file , you can change it.
b1.setBackgroundResource(R.color.colorAccent);

edited Jun 30 '18 at 11:40

SHS

1,414
4
26
43

answered Jun 30 '18 at 10:14

Manika Agrawal

69
1
1

How to change the color of a button?

24 Answers24

The RIGHT way...

The problem with the accepted answer...

Many great methods presented above - One newer note

Here it is :

Linked