Search code examples
androiduser-interfacebuttontint

ForegroundTint "overrides" backgroundTint on button?


I'm working on android app and I need a button with both background and foreground, which are some icons.

I want to set backgroundTint and foregroundTint to different colors, because it will be needed when I write the selectors for colors.

The problem is that when I set foregroundTint:

  1. foregroundTintMode=multiply - background tint is ok, but foreground icon is not changing it's color
  2. foregroundTintMode!=multiply - foreground tint is ok, but background icon is changing it's color to foregroundTint, not backgroundTint

I've tried all of the combinations for foregroundTintMode and backgroundTintMode, but got no results.

Here is my test file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="euroicc.testfb.MainActivity"
    android:background="@color/colorPrimary">

    <Button
        android:id="@+id/button"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@drawable/icon_background"
        android:backgroundTint="@android:color/holo_blue_dark"
        android:foreground="@drawable/icon_settings"
        android:foregroundTint="@android:color/white"
        tools:layout_editor_absoluteX="105dp"
        tools:layout_editor_absoluteY="141dp" />

</RelativeLayout>

Note: I was initially working with API lvl 17, but changed to 21. I would like for this app to support as many devices as possible.


Solution

  • Not sure why you are using a normal Button and foreground, use an ImageButton instead:

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_settings"
        android:tint="@android:color/red"
        android:background="@drawable/icon_background"
        android:backgroundTint="@android:color/black"
        />