to change color of each element in SVG image

Question

I have an Android SVG image. I want to change colors at different parts like, Heads, Right arm and Left arm, Eyes and the Body, according to the input given.

For example, when the input is "<=30", any part of the SVG image should turn to Red. If the input is "<=60", any part of the SVG image should turn Black.when the input is ">60",any part of the SVG image should turn to Magenta. I saved the SVG image in XML format under, "Drawable/android_pic". So how can i change the color of different parts/elements in the SVG image?

The problem is, i couldn't change the color at different parts of the SVG image.
Here is my coding.

 public class MainActivity extends Activity {

        EditText et,et2,et3;
        ImageView img1,img2,img3;


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

            final ImageView img1 = (ImageView) findViewById(R.id.android1);//change color of android logo
            final ImageView img2 = (ImageView) findViewById(R.id.arms);//change color of arms
            final ImageView img3 = (ImageView) findViewById(R.id.head_eyes);//change color of head and eyes parts


            final EditText et = (EditText) findViewById(R.id.editText);
            final EditText et2 = (EditText) findViewById(R.id.editText2);
            final EditText et3 = (EditText) findViewById(R.id.editText3);

            et.setInputType(InputType.TYPE_NUMBER_FLAG_SIGNED);
            et.addTextChangedListener(new TextWatcher() {

                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {
                    // TODO Auto-generated method stub

                }

                @Override
                public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                    // TODO Auto-generated method stub

                }

                @Override
                public void afterTextChanged(Editable s) {

                    int i = Integer.parseInt(s.toString());
                    if (i <= 30) {
                        //img1.setBackgroundColor(Color.BLUE);
                        img1.getDrawable().setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY);
                    } else if (i <= 60) {
                        img1.getDrawable().setColorFilter(Color.BLACK, PorterDuff.Mode.MULTIPLY);

                    } else if (i > 60) {

                        img1.getDrawable().setColorFilter(Color.MAGENTA, PorterDuff.Mode.MULTIPLY);
                    }
                }
            });

            //change color of arms
            et2.setInputType(InputType.TYPE_NUMBER_FLAG_SIGNED);
            et2.addTextChangedListener(new TextWatcher() {

                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {
                    // TODO Auto-generated method stub

                }

                @Override
                public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                    // TODO Auto-generated method stub

                }

                @Override
                public void afterTextChanged(Editable s) {

                    int i = Integer.parseInt(s.toString());
                    if (i <= 30)
                    {
                        img2.getDrawable().setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY);
                    }
                    else if (i <= 60)
                    {
                        img2.getDrawable().setColorFilter(Color.BLACK, PorterDuff.Mode.MULTIPLY);
                       }
                    else if (i > 60) {

                        img2.getDrawable().setColorFilter(Color.MAGENTA, PorterDuff.Mode.MULTIPLY);

                    }
                }
            });

                    //change color of head and eyes parts

            et3.setInputType(InputType.TYPE_NUMBER_FLAG_SIGNED);
            et3.addTextChangedListener(new TextWatcher() {

                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {
                    // TODO Auto-generated method stub

                }

                @Override
                public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                    // TODO Auto-generated method stub

                }

                @Override
                public void afterTextChanged(Editable s) {

                    int i = Integer.parseInt(s.toString());
                    if (i <= 30)
                    {
                        img3.getDrawable().setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY);
                    }
                    else if (i <= 60)
                    {
                        img3.getDrawable().setColorFilter(Color.BLACK, PorterDuff.Mode.MULTIPLY);
                    }
                    else if (i > 60) {

                        img3.getDrawable().setColorFilter(Color.MAGENTA, PorterDuff.Mode.MULTIPLY);

                    }
                }
            });


        }
        }`

I saved the image in XML format.Here is the XML coding for Android image.

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="500"
    android:viewportHeight="500"
    android:width="500px"
    android:height="500px">

    <group android:name="android1">
        <group android:name="head_eyes">
            <path
                android:name="head"
                android:fillColor="#9FBF3B"
                android:pathData="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298" />
            <path
                android:name="left_eye"
                android:fillColor="#FFFFFF"
                android:pathData="M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438" />
            <path
                android:name="right_eye"
                android:fillColor="#FFFFFF"
                android:pathData="M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438" />
        </group>
        <group android:name="arms">
            <path
                android:name="left_arm"
                android:fillColor="#9FBF3B"
                android:pathData="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z" />
            <path
                android:name="right_arm"
                android:fillColor="#9FBF3B"
                android:pathData="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z" />
        </group>
        <path
            android:name="body"
            android:fillColor="#9FBF3B"
            android:pathData="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489H140.396z" />
    </group>
</vector>

`

Answer 1

You can do what you want. Follow the link https://medium.com/@emmaguy/dynamically-changing-svg-colours-on-android-b026a99137ad#.7m1nxdfcb. As mentioned create themes with different colors and change theme

    final ContextThemeWrapper wrapper1 = new ContextThemeWrapper(this, R.style.Theme1);
    final Drawable drawable = ResourcesCompat.getDrawable(getResources(), R.drawable.analytics, wrapper1.getTheme());
    ImageView imageView = (ImageView) findViewById(R.id.my_image);
    imageView.setImageDrawable(drawable);