Android how to set background color on a Button
Asked Answered
S

6

6

I am trying to change the background color of a Button. I'm in Kotlin on SDK 21 on emulator.

A View and a Button are declared in the layout XML file

<View
    android:id="@+id/myview"
    android:layout_width="64dp"
    android:layout_height="32dp"
    />
<Button
    android:id="@+id/showButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="12dp"
    android:text="test"
    />

The API to set the color doesn't seem to work:

    showButton.setBackgroundColor(0xff60a0e0.toInt()) <-- doesnt work

What works is:

    myview.setBackgroundColor(0xff60a0e0.toInt()) <-- works, exact background color
    showButton.setTextColor(0xff000050.toInt()) <-- works, exact text color

After trying further it seems that I can only set the alpha channel of the button, not the color:

    setBackgroundColor( 0xff000000.toInt())  <-- works, opaque
    setBackgroundColor( 0x00000000.toInt())  <-- works, transparent

Also same thing with:

        showButton.setBackgroundColor(Color.GREEN) <-- doesnt work, button is opaque but not green
        showButton.setBackgroundColor(Color.TRANSPARENT) <-- works, button is transparent

Any idea? Did I miss something in the other answers or the documentation?

Here is complete layout, it used to inflate a fragment, if that matters:



    <?xml version="1.0" encoding="utf-8"?>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
           <View
               android:id="@+id/myview"
               android:layout_width="64dp"
               android:layout_height="32dp"
              />
           <Button
               android:id="@+id/showButton"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="12dp"
               android:text="test"
               />
        </LinearLayout>
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/dictionaryEntryRecyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"
            app:layoutManager="LinearLayoutManager"
            />
       </LinearLayout>

Seifert answered 25/9, 2019 at 2:32 Comment(7)
paste complete xml layout and style (if you are using)Mothering
I pasted the layout, thanx!Seifert
Some of the method calls to set a color in Android actually take a 'resource' id (int) and not the actual int representing the colorPompano
What I am seeing is I can set opacity : setBackgroundColor( 0xff000000.toInt()) but not color: setBackgroundColor( 0xff00ff00.toInt()) <-- doesnt change color (to green)Seifert
Are you using a Material Theme and Material Components?Septime
@GabrieleMariotti Oh yes, although I wasn't aware of it (I started the App from a Android Studio import example) In my styles.xml there is: <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar"> And the Button colors are taken from the "colorAccent" in colors.xml So my problem now is I can't make the Button using some other color than "colorAccent" Thank this helps alot!Seifert
@user3144772 just added an answer with the Material ComponentsSeptime
S
1

Since you are using a Theme.MaterialComponents.Light.DarkActionBar theme, check the doc and just use the MaterialButton with app:backgroundTint attribute:

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/color_selector"
    android:textColor="#FFF"
    android:text="BUTTON"
    />

where color_selector can be a color or a selector. Something like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/..." android:state_enabled="true"/>
  <item android:alpha="0.12" android:color="@color/..."/>
</selector>

Screenshot of two buttons - one pink, one blue

Septime answered 26/9, 2019 at 5:25 Comment(1)
yes this works. Thanx. The typical answer (setBackgroudColor) doesnt work with Material Themes...Seifert
C
3

mButton.setBackgroundColor(ContextCompat.getColor(mContext, R.color.xxx));

Coltun answered 25/9, 2019 at 3:46 Comment(0)
M
1

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 add this attribute to set background color android:background="#000"

 <Button
            android:id="@+id/showButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="fgkdjgdjsf"
            android:background="#000"
            />

Coding:

showButton.setBackgroundColor(resources.getColor(R.color.colorPrimary))
        showButton.setBackgroundColor(Color.BLACK)
Motherland answered 25/9, 2019 at 3:54 Comment(0)
S
1

In your layout, you are using

 <Button
           android:id="@+id/showButton"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="12dp"
           android:text="test"
           />

if you want to set textSize in Button, you should use

android:textSize="12dp" 

and for background set in button your layout should be like :-

 <Button
    android:id="@+id/showButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="12dp"
    android:text="test"
    android:background="#ff60a0e0"/>

OR You can also set color in colors.xml as :-

<color name="button_background">#ff60a0e0</color>

and then your button tag in your layout will be as

 <Button
           android:id="@+id/showButton"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textSize="12dp"
           android:text="test"
           android:background="@color/button_background"/>

Dynamic you can set color as

showButton.setBackgroundColor(ContextCompat.getColor(context!!, R.color.button_background))
Sniffy answered 25/9, 2019 at 5:38 Comment(2)
Thank you for detailed answer. But as I noted in the question, this doesn't work. And as @Gabriele Mariotti pointed out, this doesn't work because I was using a Material theme.Seifert
For me, the colors are stored in SQL (and sent to the phone by internet). Therefore, the colors can only be set dynamic as integer/string. There must be a way to set the colors.Egocentric
S
1

Since you are using a Theme.MaterialComponents.Light.DarkActionBar theme, check the doc and just use the MaterialButton with app:backgroundTint attribute:

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/color_selector"
    android:textColor="#FFF"
    android:text="BUTTON"
    />

where color_selector can be a color or a selector. Something like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/..." android:state_enabled="true"/>
  <item android:alpha="0.12" android:color="@color/..."/>
</selector>

Screenshot of two buttons - one pink, one blue

Septime answered 26/9, 2019 at 5:25 Comment(1)
yes this works. Thanx. The typical answer (setBackgroudColor) doesnt work with Material Themes...Seifert
P
0

now in kotlin(androidx) you can use this,

<androidx.appcompat.widget.AppCompatButton
    android:id="@+id/buttonExploreAll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAllCaps="false"
    android:background="@drawable/select_yellow"
    android:text="button"
    android:textColor="@color/white"
    />

and select_yellow is your style xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:color="@color/colorYellow"
        android:width="@dimen/_1sdp"/>

    <corners
        android:radius="@dimen/_200sdp" />

    <solid android:color="@color/colorYellow" />

</shape>

This look like

Praseodymium answered 15/12, 2020 at 14:16 Comment(0)
C
0

I used the "backgroundTint" to change the color, which did not allow the color to change after clicking. The problem was solved when I changed the color by "background" the button.

Caligula answered 4/1, 2022 at 19:56 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.