ภาพรวม
ตัวอย่างนี้สาธิตวิธีการเพิ่มเงา (Shadow) ให้ข้อความใน TextView โดยใช้เมธอด setShadowLayer() ซึ่งรองรับการกำหนดรัศมีความเบลอ ตำแหน่ง Offset และสีของเงา
ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่
สร้างโปรเจกต์ Android ใหม่ใน Android Studio
ขั้นตอนที่ 2: ออกแบบ Layout (res/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"
tools:context=".MainActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Hello World!"
android:layout_centerInParent="true"
android:textSize="128sp"
android:textStyle="bold|italic" />
</RelativeLayout>
ขั้นตอนที่ 3: เขียนโค้ด MainActivity (src/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 {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView textView = findViewById(R.id.textView);
textView.setTextColor(Color.MAGENTA);
// 🔑 setShadowLayer(radius, dx, dy, shadowColor)
// radius: รัศมีความเบลอของเงา (px)
// dx: ระยะเลื่อนแนวนอน (+ = ขวา, - = ซ้าย)
// dy: ระยะเลื่อนแนวตั้ง (+ = ล่าง, - = บน)
// shadowColor: สีของเงา
textView.setShadowLayer(16, 8, 8, Color.BLUE);
}
}
ขั้นตอนที่ 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>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
การกำหนด Shadow ผ่าน XML (Alternative)
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Shadow"
android:textSize="48sp"
android:textColor="#FFFFFF"
android:shadowColor="#000000"
android:shadowDx="4"
android:shadowDy="4"
android:shadowRadius="8" />
ตัวอย่าง Shadow Styles ต่างๆ
| Style | Code | ผลลัพธ์ |
|---|---|---|
| Drop Shadow แบบคลาสสิก | setShadowLayer(4, 2, 2, Color.BLACK) | เงาเล็กน้อยมุมขวาล่าง |
| Glow Effect | setShadowLayer(20, 0, 0, Color.CYAN) | แสงส่องรอบตัวอักษร |
| Long Shadow | setShadowLayer(2, 10, 10, Color.GRAY) | เงายาวโค้ง |
| Inner Shadow (ปลอม) | setShadowLayer(4, -2, -2, Color.WHITE) + textColor Dark | ดูเหมือนกดเข้าไป |
| Multi-layer Shadow | ใช้ SpannableString หลาย Layer | เงาหลายชั้น |
Multi-Shadow ด้วย SpannableString (ขั้นสูง)
TextView textView = findViewById(R.id.textView);
textView.setTextColor(Color.WHITE);
// Layer 1: Outer glow
textView.setShadowLayer(20, 0, 0, Color.parseColor("#FF6B6B"));
// สำหรับ Multi-shadow จริง ต้องใช้ Custom View หรือ Canvas
// หรือใช้ TextView หลายตัวทับกัน (Layer List)
การทดสอบ
รันแอป จะเห็นข้อความ "Hello World!" สีมัเจนต้า พร้อมเงาสีน้ำเงิน รัศมี 16px เลื่อน 8px ทั้ง X และ Y
