How can I change the color of my text based on the color of the ImageView it overlays?

Question

So I've got transparant buttons with white text labels set up over a user uploaded ImageView. If the user uploads an image that is mostly white, then the buttons are hard to see if not completely invisible.

Does anyone know of a way to get the average color of a ImageView's source picture/drawable? If I can do this, I can compare it to a certain threshold I can trial and error for... If I can get this, then I can change the color of the text on my buttons to the inverted version of this color...or something??

Just idea spitting here..

And of course, if someone knows a better way, more info would be much appreciated, thanks!!

Check this one : http://stackoverflow.com/questions/12408431/how-can-i-get-the-average-colour-of-an-image — Vickyexpert, Jul 06 '16 at 04:24
*...a better way...* - you could use a transparent gradient background to protect the buttons against the image like it is explained in the material design guidelines https://material.google.com/style/imagery.html#imagery-ui-integration (text-protection). As one of the answer mentions you could extract the colors with the Palette library but you still don't get 100% protection as you could end up in the image with a piece of white background right below the buttons — user, Jul 06 '16 at 04:31
@Luksprog yes, I thought about that but I figured this could be a temp fix. Adding a gradient overlay is a good idea, I'll consider doing this instead. thanks! — Riptyde4, Jul 06 '16 at 04:33

earthw0rmjim · Answer 1 · 2018-08-15T12:43:17.407

You could use the Palette class.

From the developers guide:

You can retrieve the prominent colors from the image using the getter methods in the Palette class, such as Palette.getVibrantColor().

Palette.from() expects a Bitmap param, so you'll have to get it from your ImageView.

Something like this should work:

Bitmap bitmap = ((BitmapDrawable) imageView.getDrawable()).getBitmap();
Palette colorPalette = Palette.from(bitmap).generate();

And then you can call the appropriate methods on this Palette instance to get the prominent colors, for example:

int darkVibrantColor = colorPalette.getDarkVibrantColor(someDefaultColor);

Check out this example screenshot on how the Palette class recognizes colors:

Very nice, thanks! I'll see if I can get this in tomorrow. I'll get back to ya — Riptyde4, Jul 06 '16 at 04:30

score 1 · Answer 2 · answered Jul 06 '16 at 04:34

You can use Palette to get color of bitmap in an imageview

    bitmap = BitmapFactory
                    .decodeResource(getResources(), R.drawable.header);

            Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
                @Override
                public void onGenerated(Palette palette) {

                     //Set normal shade to textview
                    int vibrantColor = palette.getVibrantColor(R.color.primary_500);

                     //Set darkershade to textview
                    int vibrantDarkColor = palette
                            .getDarkVibrantColor(R.color.primary_700);


                }
            });

Yes it is working fine , where you think is the problem – Hitesh Sahu Jul 06 '16 at 04:44 — Hitesh Sahu, Jul 06 '16 at 04:44

score -1 · Answer 3 · edited Jul 06 '16 at 06:37

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent">

    <FrameLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="110dp"
            android:layout_height="110dp"
            android:layout_gravity="top|center"
            android:background="@drawable/noimage"
            android:scaleType="fitXY" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center"
            android:text="Upload image"
            android:textColor="#fff"
            android:background="#34000000" />

    </FrameLayout>
</LinearLayout>

You can set transparent color to button view . So button text is visible even if image is in white color. If its okay dont forget to thumb up answer!!

I think you misunderstood. The button background is transparent, but the button text is visible. The problem is that the button text is white, so when the imageview that my button is on top of has a white background, you can't see the button. My goal is to change the button's text from white to black or something else whenever the background color is white (or whitish) — Riptyde4, Jul 06 '16 at 04:28
okay, then you should extract color from image and based on that you have to change text color, you can refer this sample "https://chris.banes.me/2014/07/04/palette-preview/" @Ripyde4 — Anantha Babu, Jul 06 '16 at 04:35

How can I change the color of my text based on the color of the ImageView it overlays?

3 Answers3

Linked