Android Kotlin: Drawable color programmatically

Applying Color Filters to Drawables in Android with Kotlin

This code demonstrates applying a color filter to a Drawable programmatically in an Android app written with Kotlin. It achieves this by fetching a drawable resource from the application's resources and then manipulating its color using the setColorFilter method.

Code Breakdown

The code is divided into two parts:

MainActivity.kt: This file contains the logic for the activity.
- It defines an AppCompatActivity subclass named MainActivity.
- In the onCreate method, it:
  - Sets the layout for the activity using setContentView(R.layout.activity_main).
  - Retrieves the drawable resource ic_spa twice using ContextCompat.getDrawable(this, R.drawable.ic_spa).
  - Sets the first drawable to the imageView directly.
  - Applies a color filter to the second drawable based on the Android version:
    - For Android 10 (API level 29) and above, it uses BlendModeColorFilter(Color.BLUE, BlendMode.SRC_IN).
    - For older versions, it uses setColorFilter(Color.BLUE, PorterDuff.Mode.SRC_IN).
  - Sets the colored drawable to the imageView2.
activity_main.xml: This file defines the layout for the activity.
- It uses a ConstraintLayout as the root element.
- It defines two ImageView elements with IDs imageView and imageView2. These ImageViews will display the drawables with and without the color filter, respectively.

Summary

This code showcases a common technique for applying color filters to drawables in Android using Kotlin. By checking the Android version, the code ensures compatibility with both new and older APIs. It demonstrates applying the filter programmatically, allowing for dynamic control over the color and filtering effect.

MainActivity.kt


package com.example.jetpack

import android.graphics.*
import android.os.Build
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.ContextCompat
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        ContextCompat.getDrawable(this,R.drawable.ic_spa)?.apply {
            // set original drawable to first image view
            imageView.setImageDrawable(this)
        }


        ContextCompat.getDrawable(this,R.drawable.ic_spa)?.apply {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                colorFilter = BlendModeColorFilter(Color.BLUE,BlendMode.SRC_IN)
            }else{
                setColorFilter(Color.BLUE,PorterDuff.Mode.SRC_IN)
            }
            // set colored drawable to second image view
            imageView2.setImageDrawable(this)
        }
    }
}

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="250dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintBottom_toTopOf="@+id/imageView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread"
        tools:srcCompat="@tools:sample/avatars" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="250dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        tools:srcCompat="@tools:sample/avatars" />

</androidx.constraintlayout.widget.ConstraintLayout>