Changing color of drawable icon programmatically

In this tutorial, we are going to change the colors of drawable icons programmatically by reusing a single icon with different colors.

Pros:

It increases the app performance by reusing a single icon.

Reduces the apk size.

Easy to transform the color of the image through the hex code of your choice.

Note:

This code works only with plain white drawable icons. Icons with other colors cannot be transformed.

IconChangerActivity.java

package com.takeoffandroid.iconcolorchanger;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;

public class IconChangerActivity extends ActionBarActivity {

private EditText edtColorCode;
private Button btnChange;
private ImageView imgIcon;
private Bitmap mFinalBitmap;
private int mColorCode;

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

btnChange.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String strColorCode = edtColorCode.getText().toString();
        if (strColorCode != null && strColorCode.length() > 0 &&
            strColorCode.length()==7 ) {
        mColorCode = Color.parseColor(strColorCode);
        //Get the image to be changed from the drawable, drawable-xhdpi, drawable-hdpi,etc folder.
        Drawable sourceDrawable = getResources().getDrawable(R.drawable.android);
        //Convert drawable in to bitmap
        Bitmap sourceBitmap =     Util.convertDrawableToBitmap(sourceDrawable);
        //Pass the bitmap and color code to change the icon color dynamically.
        mFinalBitmap = Util.changeImageColor(sourceBitmap, mColorCode);
        imgIcon.setImageBitmap(mFinalBitmap);
    }
}});
}

private void findViews() {
     edtColorCode = (EditText) findViewById(R.id.edt_color_code);
     btnChange = (Button) findViewById(R.id.btn_change);
     imgIcon = (ImageView) findViewById(R.id.img_icon);
}}

Util.java

package com.takeoffandroid.iconcolorchanger;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.LightingColorFilter;
import android.graphics.Paint;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;

/**
* Created by chandru on 31-03-2015.
*/
public class Util {

public static Bitmap changeImageColor(Bitmap sourceBitmap, int color) {
    Bitmap resultBitmap = Bitmap.createBitmap(sourceBitmap, 0, 0,
        sourceBitmap.getWidth() - 1, sourceBitmap.getHeight() - 1);
    Paint p = new Paint();
    ColorFilter filter = new LightingColorFilter(color, 1);
    p.setColorFilter(filter);
    Canvas canvas = new Canvas(resultBitmap);
    canvas.drawBitmap(resultBitmap, 0, 0, p);
    return resultBitmap;
}

public static Drawable covertBitmapToDrawable(Context context, 
        Bitmap bitmap) {
    Drawable d = new BitmapDrawable(context.getResources(), bitmap);
    return d;
}

public static Bitmap convertDrawableToBitmap(Drawable drawable) {
    if (drawable instanceof BitmapDrawable) {
        return ((BitmapDrawable) drawable).getBitmap();
}
    Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
        drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
    drawable.draw(canvas);
    return bitmap;
}
}

activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="35dp"
    android:paddingRight="35dp"
    android:paddingTop="50dp"
    android:paddingBottom="50dp"
    android:orientation="vertical">

       <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:orientation="vertical">

      <EditText
            android:id="@+id/edt_color_code"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:maxLength="7"
            android:inputType="textCapCharacters"
            android:hint="Type your color code"/>

      <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:gravity="center"
            android:textColor="#3F51B5"
            android:text="Example: #3F51B5"/>

      <ImageView
            android:id="@+id/img_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            android:background="@drawable/android"/>

     <Button
            android:id="@+id/btn_change"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#3F51B5"
            android:text="Change"
            android:textColor="#FFFFFF"
            android:layout_below="@+id/img_icon"
            android:layout_marginTop="10dp"
            android:textAppearance="?    android:attr/textAppearanceMedium"
            android:textStyle="bold"/>

Download code