วิธีวาดข้อความบนรูปภาพใน Android ด้วย Kotlin

ตัวอย่างนี้สาธิตวิธี วาด/ซ้อนข้อความ (Text) บนรูปภาพ (Image) ใน Android โดยใช้ TextView วางเหนือ ImageView ใน Layout แบบ RelativeLayout

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

Android Studio → New Project → Empty Activity

ขั้นตอนที่ 2: Layout (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/backgroundImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/your_background_image"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/tvOverlayText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="32dp"
        android:padding="12dp"
        android:text="Your Text Here"
        android:textColor="#FFFFFF"
        android:textSize="28sp"
        android:textStyle="bold|italic"
        android:background="#80000000" />

</RelativeLayout>

ขั้นตอนที่ 3: โค้ดหลัก (MainActivity.kt)

import android.graphics.Color
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "Text on Image Demo"

        val tvText = findViewById(R.id.tvOverlayText)
        tvText.text = "Into the wild!"
        tvText.setTextColor(Color.WHITE)
    }
}

🔧 วิธีขั้นสูง: วาดจริงบน Bitmap (Canvas)

หากต้องการ รวมข้อความเข้าไปในไฟล์รูปภาพจริง (เพื่อ Share/Save) ให้ใช้ Canvas:

fun drawTextOnBitmap(
    context: Context,
    @DrawableRes drawableRes: Int,
    text: String,
    textSize: Float = 48f,
    textColor: Int = Color.WHITE
): Bitmap {
    val srcBitmap = BitmapFactory.decodeResource(context.resources, drawableRes)
        .copy(Bitmap.Config.ARGB_8888, true)

    val canvas = Canvas(srcBitmap)
    val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = textColor
        textSize = textSize
        typeface = Typeface.DEFAULT_BOLD
        textAlign = Paint.Align.CENTER
    }

    // คำนวณตำแหน่งกึ่งกลาง
    val x = srcBitmap.width / 2f
    val y = srcBitmap.height / 2f - (paint.descent() + paint.ascent()) / 2f

    canvas.drawText(text, x, y, paint)
    return srcBitmap
}

ขั้นตอนที่ 4: AndroidManifest.xml

Manifest มาตรฐาน

ทดสอบ

1. วางรูปภาพใน res/drawable/your_background_image.jpg
2. รันแอป → จะเห็นข้อความ "Into the wild!" อยู่บนรูปภาพด้านล่าง

💡 เคล็ดลับ

• ใช้ android:background="#80000000" ใน TextView เพื่อให้พื้นหลังข้อความโปร่งแสง สว่างขึ้น
• ใช้ ConstraintLayout แทน RelativeLayout สำหรับ Layout ที่ซับซ้อนกว่า
• สำหรับการ Export รูป ใช้วิธี Canvas ข้างต้น