How to programmatically display text over image in Kotlin

In this android kotlin source code example, we are going to dynamically display text over the ImageView in Android Kotlin.

You can copy and adopt this source code example to your Kotlin android project without reinventing the wheel.

Below is a step by step source code to dynamically display text over the ImageView in Android Kotlin.

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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".imageView.ImageViewActivity9">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.bluapp.kotlinview.R
import android.graphics.drawable.BitmapDrawable
import android.graphics.Paint.Align
import android.graphics.*
import android.widget.ImageView


class ImageViewActivity9 : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_image_view9)
        val imageView = findViewById<ImageView>(R.id.imageView) as ImageView
        imageView.setImageDrawable(textOnImage(R.drawable.profilepic, "Hello World"))
    }

    private fun textOnImage(drawableId: Int, text: String): BitmapDrawable {
        val bm = BitmapFactory.decodeResource(resources, drawableId).copy(Bitmap.Config.ARGB_8888, true)
        val tf = Typeface.create("Helvetica", Typeface.BOLD)
        val paint = Paint()
        paint.setStyle(Paint.Style.FILL)
        paint.setColor(Color.WHITE)
        paint.setTypeface(tf)
        paint.setTextAlign(Align.CENTER)
        paint.setTextSize(30.0f)
        val textRect = Rect()
        paint.getTextBounds(text, 0, text.length, textRect)
        val canvas = Canvas(bm)
        if (textRect.width() >= canvas.getWidth() - 4)
            paint.setTextSize(20.0f)
        val xPos = canvas.getWidth() / 2 - 2
        val yPos = (canvas.getHeight() / 2 - (paint.descent() + paint.ascent()) / 2)
        canvas.drawText(text, xPos.toFloat(), yPos, paint)
        return BitmapDrawable(resources, bm)
    }
}

If you have any question or suggestions kindly use the comment box or you can contact us directly through our contact page below.

Add a Comment