What is the best way to apply a color filter to your hair using a specific hair style image template?

Question

I am developing an Android application for a hair salon. I have two images. One is a hairstyle (hair), and the other is a hair pattern. I can change the color of the hair style based on a specific rgb value.

My code is as follows:

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 solution am I looking for, suppose I have an image of a color pattern, then it is impossible to get the rgb value from a gradient image.

how

I want to apply the above image to a hair image. If anyone has an idea, answer.

Answer 1

Just for fun and curiosity, I tried to realize my own idea. After preparing the next two xxhdpi images (480 dpi so that they scale well), I put them in the /res/drawable-xxhdpi )

Of course, I had to carefully split the images so that they fit perfectly and overlap.

and white hair (your copy is made "whitish" - discolor + play with brightness / contrast)

I made this layout in which the image of the hair is superimposed on 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 is 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 that I got:

Even if this composition seems to be a picture of Andy Warol, it is not. It's mine.:)
This is similar to the result you are looking for.

[EDIT]

I have not tried this new idea, but (with some extra work) you can even change other colors:

• Eyes
• skin
• lipstick
• Eye makeup (this will require some patience).