20

Take a look at this small android app:

MainActivity.java:

package io.github.gsaga.toucheventtest;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

activity_main:

<ImageView android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@drawable/ic_launcher_background"
    xmlns:android="http://schemas.android.com/apk/res/android" />

The image pointed to by android:foreground isn't displayed, but it appears if I change foreground to src or background in activity_main.xml. This code seems to follow the instructions described here:

https://developer.android.com/reference/android/view/View.html#attr_android:foreground

Why doesn't the android:foreground tag work in above code?

NOTE:

minSdkVersion is 19, I'm running this app on Android 5.1 (API level 22)

4
  • In Which API version you are running the app? Commented Sep 14, 2018 at 9:52
  • @HarishJose minSdkVersion is 19, I'm running this app on android 5.1
    – saga
    Commented Sep 14, 2018 at 9:53
  • @saga Hi, can you please specify the actual intention of the post? Are you are trying to set an overlay to an ImageView or to figure out why android:foreground attribute isn't working for ImageViews out of curiosity ? Commented Sep 16, 2018 at 16:41
  • Hello, @saga. you should use the android:foreground at FrameLayout, please.
    – Eric
    Commented Sep 17, 2018 at 0:41

5 Answers 5

54
+100

Short answer

This is due to a bug which existing in Android since API level 23.


More details on the behavior

Here is the list of all the XML attributes and corresponding methods related to setting foreground drawables to views with the API level they are introduced through FrameLayout. However, these are later moved into View in API level 23.

╔════════════════════════════╦═════════════════════════════════════════════════╦═════════════╗
║       XML attribute        ║                     Method                      ║   Added in  ║
║                            ║                                                 ║ (API level) ║
╠════════════════════════════╬═════════════════════════════════════════════════╬═════════════╣
║ android:foreground         ║ setForeground(Drawable)                         ║ 1           ║
╠════════════════════════════╬═════════════════════════════════════════════════╬═════════════╣
║ android:foregroundGravity  ║ setForegroundGravity(int gravity)               ║ 1           ║
╠════════════════════════════╬═════════════════════════════════════════════════╬═════════════╣
║ android:foregroundTint     ║ setForegroundTintMode(PorterDuff.Mode tintMode) ║ 21          ║
╠════════════════════════════╬═════════════════════════════════════════════════╬═════════════╣
║ android:foregroundTintMode ║ setForegroundTintMode(PorterDuff.Mode tintMode) ║ 21          ║
╚════════════════════════════╩═════════════════════════════════════════════════╩═════════════╝
  • Android doc says setForeground(Drawable) is added in API 1 and setForegroundTintList (ColorStateList tint) and setForegroundTintMode (PorterDuff.Mode tintMode) are added in API level 21 to View. Actually they were there in FrameLayout until it moved in API 23.

  • In API level < 23, you will get a warning even though it is not required. You can just suppress it. See this.


Now take a look at how these properties work on different versions.

╔═══════════╦══════════════════╦══════════════════╗
║ API level ║      By code     ║     Using XML    ║
╠═══════════╬══════════════════╬══════════════════╣
║ <23       ║ FrameLayout only ║ FrameLayout only ║
╠═══════════╬══════════════════╬══════════════════╣
║ >=23      ║ FrameLayout only ║ All views        ║
╚═══════════╩══════════════════╩══════════════════╝


The cause of the bug

When these properties moved to View in API level 23, they did some strange modifications on it which can be called a bug. While loading properties from XML, it checks whether the View is a FrameLayout which is not present inside the methods we can use for the same purpose.

View constructor, API level 23:

case R.styleable.View_foreground:
    if (targetSdkVersion >= Build.VERSION_CODES.M || this instanceof FrameLayout) {
        setForeground(a.getDrawable(attr));
    }
    break;
0
12

To use android:foreground on Android 5.1 i.e. API level 22, you are not using android:foreground correctly.

As it's name clearly indicating that you can set drawable on the top/foreground of any content like overlay i.e you can put some view in FrameLayout in that you can use android:foreground. Inside this FrameLayout add your ImageView.

Documentation:

Defines the drawable to draw over the content. This can be used as an overlay. The foreground drawable participates in the padding of the content if the gravity is set to fill.

Below is usage example:

<FrameLayout
    android:id="@+id/share"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:foreground="@drawable/ic_launcher_background>

    // your ImageView here
    <ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

</FrameLayout>

Note: For API level > 23 it will work without FrameLayout.

I hope this will help you.

2
  • 1
    The documentation states the android:foreground defines the drawable to draw over the content, it doesn't state anywhere that the content has to be a ViewGroup. And the tag is defined for the View class. If what you're saying is correct then the tag should've been defined for the ViewGroup class.
    – saga
    Commented Sep 16, 2018 at 13:27
  • 1
    @saga I agree that documentation is not clear enough but my solution is for Android 5.1 i.e. API level 22 (where you are facing the issue). Yes you are right that documentation is not clear enough for usage of android:foreground property. For API level > 23 it will work without FrameLayout. Commented Sep 17, 2018 at 5:36
3

It looks like at one time (API <23) that android:foreground would work with only FrameLayout as VicJordan suggests. However, for API 23+ it appears that android:foreground will work for any view type. See this selection from the View.java source:

case R.styleable.View_foreground:
    if (targetSdkVersion >= Build.VERSION_CODES.M || this instanceof FrameLayout) {
        setForeground(a.getDrawable(attr));
}

Here is an example of android:foreground working on API 28 with the following layout:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:foreground="@drawable/ic_launcher_foreground"
        android:src="@android:drawable/ic_delete"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

enter image description here

Yet, on API 22, we see this:

enter image description here

No foreground image. So, android:foreground works only when the API level is 23+. I agree that this is not really documented, but that is just the way it is.

Update: API 23 seems to have an issue with android:foreground, so let's say android:foreground works on API 24+ for general views.

Second update: Came across a couple of other posts addressing this same issue regarding setForeground() here and here. In the accepted answer to the second question, CommonsWare identifies this as a "documentation bug."

2

Another solution is to wrap your image with a <ripple>, set it as your ImageView's background, and use tint and tintMode to "hide" the src image so the background image that has the ripple over it is visible.

<!-- In your layout file -->

<ImageView
    android:adjustViewBounds="true"
    android:background="@drawable/image_with_ripple"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/image"
    android:tint="@android:color/transparent"
    android:tintMode="src_in" />
<!-- drawable/image_with_ripple.xml -->

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?colorControlHighlight">

    <item android:drawable="@drawable/image" />

</ripple>

Not only this works on API 21+ but if your image has rounded corners – or is another type of non-rectangle shape, like a star or a heart icon – the ripple will remain in its bounds instead of filling the view's rectangle bounds, which gives a better look in some cases.

See this Medium article for an animated GIF to see how this technique compares to using a <FrameLayout> or the foreground attribute.

0

Use a constraint layout and items are drawn top to bottom of the layout.xml hence the elements at the end of the file are drawn last and appear on top I kept the gravity properties in the file in case it starts working in a future version.

enter image description here

    <TextView
        android:id="@+id/textView2"
        android:layout_width="184dp"
        android:layout_height="65dp"
        android:foregroundGravity="bottom"
        android:gravity="center"
        android:text = "Sample Color"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:background="@color/cardview_light_background" />

    <androidx.appcompat.widget.AppCompatEditText
        android:background="@android:color/transparent"
        android:foregroundGravity="top"
        android:gravity="top"
        android:id="@+id/textView"
        style="@style/word_title"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:enabled="false"
        android:fontFamily="sans-serif-black"
        android:text="Hello Word what do you think is happening here"
        android:textSize="24sp"
        android:textColor="@drawable/edit_text_selector"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.