Android change vector drawable color programmatically

In the xml-file you can set custom color with the attribute android:fillColor but to change the color of vector drawable in runtime/dynamically. Tere is need to Change fillColor of a vector drawable in android programmatically, you can edit fill Color of a vector-file in Android programmatically using DrawableCompat.setTint() method which change tint color of whole vector drawable.

Here, ImageView is set with drawable vector icon of black color. This example changes android ImageView srcCompat vector drawable tint color to colorAccent as defined in the colors.xml.

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:padding="10dp"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:textAllCaps="false"
        android:text="Click to Change Image Vector Drawable Color"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:srcCompat="@drawable/ic_settings_black_24dp"
        android:scaleType="fitCenter" />
    <!--android:tint="@color/colorPrimary"-->
</LinearLayout>


MainActivity.java:
package com.example.espl.changedrawablecolor;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffColorFilter;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.support.v4.graphics.drawable.DrawableCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    ImageView imageView;
    Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button=findViewById(R.id.button);
        imageView=findViewById(R.id.imageView);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                DrawableCompat.setTint(imageView.getDrawable(),ContextCompat.getColor(getApplicationContext(), R.color.colorAccent));
            }
        });
    }
}

How to change color of vector drawable on button click android imageview
Default Color of the ImageView Drawable is black color before button click

Android Change Image Vector Drawable Color programmatically
Changed Color of the ImageView Drawable on button click


build.gradle (Module:app)
apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.espl.changedrawablecolor"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        vectorDrawables.useSupportLibrary = true
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}


No comments:

Post a Comment

Popular Posts