Android Kotlin: EditText change underline color programmatically

The code consists of two parts: the first part is the definition of an extension function setUnderlineColor that can be used to change the underline color of an EditText, and the second part is the implementation of a simple activity that demonstrates how to use the setUnderlineColor function.

The setUnderlineColor function takes an integer parameter color that represents the color of the underline. The function first calls the mutate method on the EditText's background drawable. This is necessary because the setColorFilter method modifies the drawable, and we don't want to modify the original drawable that's defined in the XML layout.

Next, the function checks the API level using Build.VERSION.SDK_INT. If the API level is greater than or equal to Build.VERSION_CODES.Q (Android 10), then the function sets a BlendModeColorFilter on the background drawable. Otherwise, it sets a PorterDuff color filter.

The BlendModeColorFilter and PorterDuff color filter both achieve the same effect of changing the color of the underline. However, the BlendModeColorFilter is the preferred way to do this on API level 29 (Android 10) and higher, because it offers better performance and compatibility.

The onCreate method of the MainActivity class first gets references to the two EditText widgets that are defined in the activity's XML layout file. Then, it calls the setUnderlineColor function to change the underline color of the first EditText to blue and the underline color of the second EditText to red.

Summary

This is a simple example of how to change the underline color of an EditText in Android using Kotlin. The code demonstrates how to use an extension function to encapsulate the logic for changing the underline color, and it also shows how to check the API level to use the appropriate color filter method.

Here is a table summarizing the code:

Part	Description
`setUnderlineColor` function	This function takes an integer parameter `color` that represents the color of the underline.
`onCreate` method	This method gets references to the two EditText widgets and calls the `setUnderlineColor` function to change the underline color.

MainActivity.kt


package com.cfsuman.kotlintutorials

import android.app.Activity
import android.graphics.BlendMode
import android.graphics.BlendModeColorFilter
import android.graphics.Color
import android.graphics.PorterDuff
import android.os.Build
import android.os.Bundle
import android.widget.EditText


class MainActivity : Activity() {
    private lateinit var editText:EditText
    private lateinit var editText2:EditText

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

        // get the widgets reference from XML layout
        editText = findViewById(R.id.editText)
        editText2 = findViewById(R.id.editText2)

        // change edit text underline color programmatically
        editText.setUnderlineColor(Color.BLUE)
        editText2.setUnderlineColor(Color.RED)
    }
}


// extension function to set/change edit text underline color
fun EditText.setUnderlineColor(color: Int){
    background.mutate().apply {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q){
            colorFilter = BlendModeColorFilter(color, BlendMode.SRC_IN)
        }else{
            setColorFilter(color,PorterDuff.Mode.SRC_IN)
        }
    }
}

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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="#DCDCDC"
    android:padding="32dp">

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:inputType="text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.12" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="8dp"
        android:inputType="text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText" />

</androidx.constraintlayout.widget.ConstraintLayout>

android kotlin - EditText change underline color programmatically

android kotlin - EditText change underline color programmatically 2