Android Kotlin: EditText rounded corners programmatically

The code demonstrates how to programmatically create rounded corners for EditText elements in an Android app. It achieves this by defining a custom extension function named roundedCornersDrawable. This function takes four optional parameters:

  • borderWidth: This defines the width of the border around the EditText in pixels. Defaults to 10 pixels if not specified.
  • borderColor: This sets the color of the border. Defaults to black if not specified.
  • cornerRadius: This determines the radius of the rounded corners in pixels. Defaults to 25 pixels if not specified.
  • bgColor: This specifies the background color of the EditText. Defaults to transparent if not specified.

The roundedCornersDrawable function creates a GradientDrawable object and configures its properties based on the provided parameters. The shape of the drawable is set to a rectangle, and the stroke width, stroke color, corner radius, and background color are set accordingly.

In the onCreate method of the activity class, the code retrieves references to two EditText elements from the layout using the findViewById method. It then calls the roundedCornersDrawable function to create a drawable with rounded corners for each EditText element. Finally, it sets the background of each EditText to the created drawable.

Here's a breakdown of the code:

  • MainActivity.kt: This file contains the main Activity class for the Android application.
  • roundedCornersDrawable function: This extension function creates a drawable with rounded corners.
  • activity_main.xml: This file defines the layout for the activity, which includes two EditText elements.

Overall, this code snippet provides a reusable way to create EditTexts with rounded corners in an Android app. It leverages the GradientDrawable class and extension functions to achieve this customization.


MainActivity.kt

package com.cfsuman.kotlintutorials

import android.app.Activity
import android.content.Context
import android.graphics.Color
import android.graphics.drawable.Drawable
import android.graphics.drawable.GradientDrawable
import android.os.Bundle
import android.util.TypedValue
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)

        // add specified color rounded corners border programmatically
        editText.background = roundedCornersDrawable(
            2.dpToPixels(applicationContext), // border width in pixels
            Color.parseColor("#58111A"), // border color
            10.dpToPixels(applicationContext).toFloat() // corners radius
        )

        // edit text rounded corners border with background color
        editText2.background = roundedCornersDrawable(
            borderWidth = 2.dpToPixels(applicationContext),
            borderColor = Color.parseColor("#E30022"),
            cornerRadius = 10.dpToPixels(applicationContext).toFloat(),
            bgColor = Color.parseColor("#EFDFBB")
        )
    }
}


// extension function to get rounded corners border
fun roundedCornersDrawable(
    borderWidth: Int = 10, // border width in pixels
    borderColor: Int = Color.BLACK, // border color
    cornerRadius: Float = 25F, // corner radius in pixels
    bgColor: Int = Color.TRANSPARENT // view background color
): Drawable {
    return GradientDrawable().apply {
        shape = GradientDrawable.RECTANGLE
        setStroke(borderWidth, borderColor)
        setColor(bgColor)
        // make it rounded corners
        this.cornerRadius = cornerRadius
    }
}


// extension function to convert dp to equivalent pixels
fun Int.dpToPixels(context: Context):Int = TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP, this.toFloat(),
    context.resources.displayMetrics
).toInt()
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="12dp"
        android:layout_marginEnd="12dp"
        android:inputType="text|textVisiblePassword"
        android:padding="12dp"
        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="12dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="12dp"
        android:inputType="text|textVisiblePassword"
        android:padding="12dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText" />

</androidx.constraintlayout.widget.ConstraintLayout>
android kotlin - EditText rounded corners programmatically
More android kotlin tutorials