What is the difference between background, backgroundTint, backgroundTintMode attributes in android layout xml?
AndroidAndroid LayoutAndroid Problem Overview
While working with the android layout xml I came across backgroundTint
attribute . I don't understand what is for.
Also what is backgroundTintMode
??
Android Solutions
Solution 1 - Android
I tested various combinations of android:background
, android:backgroundTint
and android:backgroundTintMode
.
android:backgroundTint
applies the color filter to the resource of android:background
when used together with android:backgroundTintMode
.
Here are the results:
Here's the code if you want to experiment further:
<?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:orientation="vertical"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:textSize="45sp"
android:background="#37AEE4"
android:text="Background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:textSize="45sp"
android:backgroundTint="#FEFBDE"
android:text="Background tint" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:textSize="45sp"
android:background="#37AEE4"
android:backgroundTint="#FEFBDE"
android:text="Both together" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:textSize="45sp"
android:background="#37AEE4"
android:backgroundTint="#FEFBDE"
android:backgroundTintMode="multiply"
android:text="With tint mode" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:textSize="45sp"
android:text="Without any" />
</LinearLayout>
Solution 2 - Android
I won't stress much on the difference as it is already covered, but notice the below:
android:backgroundTint
android:backgroundTintMode
are only available at API 21- If you have a widget that has a png/vector drawable background set by
android:background
, and you want to change its default color, then you can useandroid:backgroundTint
to add a shade to it.
example
<Button
android:layout_width="50dp"
android:layout_height="wrap_content"
android:background="@android:drawable/ic_dialog_email" />
<Button
android:layout_width="50dp"
android:layout_height="wrap_content"
android:background="@android:drawable/ic_dialog_email"
android:backgroundTint="@color/colorAccent" />
Another example
If you try to change the accent color of the FloatingActionButton
using android:background
you won't notice a change, that is because it's already utilizes app:srcCompat
, so in order to do that you can use android:backgroundTint
instead
Solution 3 - Android
The backgroundTint
attribute will help you to add a tint(shade) to the background. You can provide a color value for the same in the form of - "#rgb", "#argb", "#rrggbb", or "#aarrggbb".
The backgroundTintMode
on the other hand will help you to apply the background tint. It must have constant values like src_over, src_in, src_atop,
etc.
Refer this to get a clear idea of the the constant values that can be used. Search for the backgroundTint
attribute and the description along with various attributes will be available.
Solution 4 - Android
BackgroundTint works as color filter.
FEFBDE as tint
37AEE4 as background
Try seeing the difference by comment tint/background and check the output when both are set.
Solution 5 - Android
> Blending mode used to apply the background tint.
> Tint to apply to the background. Must be a color value, in the form of #rgb
, #argb
, #rrggbb
, or #aarrggbb
.
>
> This may also be a reference to a resource (in the form
> "@[package:]type:name") or theme attribute (in the form
> "?[package:][type:]name") containing a value of this type.