Search code examples
androidkotlinandroid-buttonmaterial-componentsmaterial-components-android

Android how to set background color on a Button


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>


Solution

  • 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