android - What is the best way to apply color filter on hair style with some specified hair style image pattern?

Question

I am developing an android application for hair style salon.I am having two images. One is hairstyle (hair) and another is hair color pattern. I am able to change the color of hair style based on specific rgb value.

My code is as below:

int color = Color.rgb(182,132, 84); // getting rgb value 
Paint paint = new Paint();
paint.setColorFilter(new LightingColorFilter(color, 1));

transform.reset();
transform.postTranslate(-width / 2.0f, -height / 2.0f);
transform.postRotate(getDegreesFromRadians(angle));
transform.postScale(scale, scale);
transform.postTranslate(position.getX(), position.getY());

canvas.drawBitmap(bitmap, transform, paint); 

But what the solution i am searching that suppose i have color pattern image then its not possible to get rgb value from gradient image.

Like:

I want to apply the above pattern on hair image. If anyone have idea please reply.

Answer 1

Just for fun, and curiosity, I tried to make my own implementation of your idea.
After preparing the two following xxhdpi images (480 dpi, so to make them scale well - then I put them in the /res/drawable-xxhdpi folder)

Of course, I had to carefully size the images to fit and overlap perfectly.

and a white hair (a copy of yours, made "whitish" - desaturate + play with brightness/contrast)

I made this layout, in which the hair image overlaps the head:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f000"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/head_xxh"
    />
    <ImageView
        android:id="@+id/imgHair"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/hair_wht_xxh"
    />
    <Button
        android:id="@+id/btnColor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Random hair color"
        android:onClick="clickHandler"
    />
</RelativeLayout>

Here's the code I used:

package com.dergolem.abc_2;

import java.util.Random;

import android.app.Activity;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.ImageView;

public class Generic
extends Activity
{
    Random rnd = new Random();

    Button btn = null;
    ImageView img = null;

    @Override
    public void onCreate(final Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.hair);

        img = (ImageView) findViewById(R.id.imgHair);
        btn = (Button) findViewById(R.id.btnColor);
    }

    public void clickHandler(final View v)
    {
        colorize(rnd.nextInt(7));
    }

    private void colorize(final int num)
    {
        int clr = Color.WHITE;
        switch (num)
        {
            case 0:
            {
                clr = Color.RED;
                break;
            }
            case 1:
            {
                clr = Color.GREEN;
                break;
            }
            case 2:
            {
                clr = Color.BLUE;
                break;
            }
            case 3:
            {
                clr = Color.BLACK;
                break;
            }
            case 4:
            {
                clr = Color.CYAN;
                break;
            }
            case 5:
            {
                clr = Color.YELLOW;
                break;
            }
            case 6:
            {
                clr = Color.parseColor("#ff888800");
                break;
            }
        }

        img.setColorFilter(clr, PorterDuff.Mode.MULTIPLY);
    }
}

And some of the results I got:

Even if this composition seems like an Andy Wharol's picture, it isn't. It's mine. :)
It seems like the result you are looking for.

[EDIT]

I didn't try this new idea, but (with some extra work) you can even change other colors:

• Eyes
• Skin
• Lipstick
• Eye makeup (this would require some patience)