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

ภาพรวม

ตัวอย่างนี้สาธิตวิธีการแสดงข้อความบนรูปภาพ (ImageView) โดยการวาง TextView ทับ ImageView ใน Layout (Overlay) ซึ่งเป็นวิธีง่ายที่สุด ไม่ต้องใช้ Canvas วาดจริง

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

Android Studio → File → New Project → Empty Activity

ขั้นตอนที่ 2: จัดรูปแบบหน้าจอ (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:scaleType="centerCrop"
        android:src="@drawable/your_image" />

    <!-- ข้อความทับรูปภาพ -->
    <TextView
        android:id="@+id/textOverlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"
        android:padding="12dp"
        android:text="This is text on image"
        android:textColor="#FFFFFF"
        android:textSize="24sp"
        android:textStyle="bold|italic"
        android:background="#80000000" />

</RelativeLayout>

ขั้นตอนที่ 3: เขียนโค้ด MainActivity.java

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView textOverlay;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        textOverlay = findViewById(R.id.textOverlay);
        
        // ตั้งค่าข้อความและสีแบบไดนามิก
        textOverlay.setText("This is the place where I want to live");
        textOverlay.setTextColor(Color.WHITE);
        
        // เพิ่มเอฟเฟกต์เงาให้อ่านง่ายขึ้น
        textOverlay.setShadowLayer(4, 2, 2, Color.BLACK);
    }
}

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

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                
                
            </intent-filter>
        </activity>

    </application>
</manifest>

การทดสอบ

เตรียมรูปภาพชื่อ your_image.jpg ใน res/drawable/ → รันแอป → จะเห็นข้อความแสดงทับรูปภาพ

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

หากต้องการ บันทึกรูปภาพที่มีข้อความแล้ว (Save to gallery) ต้องใช้ Canvas:

public Bitmap drawTextOnBitmap(Bitmap source, String text, int x, int y, 
                               int textColor, float textSize) {
    // สร้าง Bitmap ใหม่ที่แก้ไขได้
    Bitmap result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), 
                                        source.getConfig());
    
    Canvas canvas = new Canvas(result);
    canvas.drawBitmap(source, 0, 0, null);
    
    Paint paint = new Paint();
    paint.setColor(textColor);
    paint.setTextSize(textSize);
    paint.setAntiAlias(true);
    paint.setFakeBoldText(true);
    paint.setShadowLayer(4, 2, 2, Color.BLACK);
    
    // วาดข้อความ
    canvas.drawText(text, x, y, paint);
    
    return result;
}

// การใช้งาน
Bitmap original = BitmapFactory.decodeResource(getResources(), R.drawable.your_image);
Bitmap withText = drawTextOnBitmap(original, "Hello World", 100, 200, Color.WHITE, 48);
// บันทึกหรือแสดงใน ImageView
imageView.setImageBitmap(withText);

Library แนะนำสำหรับงานรูปภาพ

• Glide / Picasso / Coil: โหลด/แสดงรูปภาพ (Coil สำหรับ Kotlin Coroutines)
• Canvas API: วาด 2D ขั้นสูง
• RenderScript (Deprecated) / OpenGL ES: ประมวลผลภาพประสิทธิภาพสูง
• Jetpack Compose: Canvas composable, drawText ทำง่ายมาก