CODEWITHSUNDEEP
androidandroid-layoutandroid-button
hahoanghai.ueh
hahoanghai.ueh

Reputation: 908

How to change the color of a button?

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"/>

Upvotes: 88

Views: 509893

Answers (25)

Gon&#231;alo Garrido
Gon&#231;alo Garrido

Reputation: 118

I usually use this when I have a Shape to just change the background

btn.setBackgroundTintList(getResources().getColorStateList(R.color.yourcolor));

For me it works really well :)

Upvotes: 0

Meet
Meet

Reputation: 950

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>

Upvotes: 0

Osagui Aghedo
Osagui Aghedo

Reputation: 350

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.

Upvotes: 0

Tomblarom
Tomblarom

Reputation: 1458

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

Upvotes: 34

Payel Senapati
Payel Senapati

Reputation: 1376

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

Upvotes: 0

CraigTheWorst
CraigTheWorst

Reputation: 21

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

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

Upvotes: 2

Aicha Hezit
Aicha Hezit

Reputation: 590

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);

Upvotes: 54

Anshul Nema
Anshul Nema

Reputation: 319

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>

Upvotes: 1

mohamed hesen
mohamed hesen

Reputation: 43

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

Upvotes: 2

Adeeksha Sathsara
Adeeksha Sathsara

Reputation: 183

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!

Upvotes: 0

Sumed
Sumed

Reputation: 337

  1. 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" />

Upvotes: 1

tintin
tintin

Reputation: 385

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

Upvotes: 0

Abbas Faraji
Abbas Faraji

Reputation: 21

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

It worked for me after many search

Upvotes: 2

Anshu kumar
Anshu kumar

Reputation: 11

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.

Upvotes: 0

sachin pathak
sachin pathak

Reputation: 87

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>

Upvotes: 4

bzgd
bzgd

Reputation: 49

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"

Upvotes: 4

Gmgm
Gmgm

Reputation: 26

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"/>

Upvotes: 0

Nurul
Nurul

Reputation: 109

see the image and easy understand

image use

Upvotes: 1

zFreeindeed
zFreeindeed

Reputation: 81

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.

Upvotes: 8

Pedro Molina
Pedro Molina

Reputation: 1484

If the first solution doesn't work try this:

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

I hope this work. Happy coding.

Upvotes: 7

Akanshi Srivastava
Akanshi Srivastava

Reputation: 1500

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!

Upvotes: 1

Pranav Prakasan
Pranav Prakasan

Reputation: 21

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.

Upvotes: 0

Nechemia Hoffmann
Nechemia Hoffmann

Reputation: 2507

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.

Upvotes: 114

Mikhael Lauda
Mikhael Lauda

Reputation: 71

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

  1. Go to res
  2. Expand it, right click on drawable
  3. New -> Drawable Resource File
  4. 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

  1. Expand values
  2. Double click on colors.xml
  3. 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

enter image description here XML Coding enter image description here Design Preview

Upvotes: 5

Manika Agrawal
Manika Agrawal

Reputation: 69

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);

Upvotes: -2

Related Questions