Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Android

วิธีสร้าง Activity โปร่งใส (Transparent) ใน Android

ภาพรวม

ตัวอย่างนี้แสดงวิธีทำให้ Activity โปร่งใส (Transparent) ทั้งพื้นหลังและ Title Bar เหมาะสำหรับ Dialog-like Activity, Overlay, หรือ Floating UI

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

Android Studio → File → New Project

ขั้นตอนที่ 2: สร้าง Theme โปร่งใส (res/values/styles.xml)

<resources>
    <!-- Base theme -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
    </style>

    <!-- Transparent Theme สำหรับ Activity -->
    <style name="Theme.Transparent" parent="Theme.AppCompat.NoActionBar">
        <!-- พื้นหลังโปร่งใส -->
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:colorBackgroundCacheHint">@null</item>

        <!-- ทำให้ Window โปร่งใส -->
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowNoTitle">true</item>

        <!-- อนิเมชันมาตรฐาน -->
        <item name="android:windowAnimationStyle">@android:style/Animation.Activity</item>

        <!-- ตัวเลือก: พื้นหลัง Dim สีดำครึ่งโปร่งใส -->
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:backgroundDimAmount">0.5</item>
    </style>
</resources>

ขั้นตอนที่ 3: Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- เนื้อหา Activity โปร่งใส - วางตรงกลาง -->
    <androidx.cardview.widget.CardView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:cardCornerRadius="16dp"
        app:cardElevation="8dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="24dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Transparent Activity"
                android:textSize="24sp"
                android:textStyle="bold"
                android:gravity="center"
                android:layout_gravity="center_horizontal"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="This activity has transparent background. The previous activity is visible behind."
                android:textSize="16sp"
                android:gravity="center"/>

            <Button
                android:id="@+id/btnClose"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="24dp"
                android:text="Close"/>

        </LinearLayout>
    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

ขั้นตอนที่ 4: MainActivity.java

package com.example.transparentactivity;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

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

        Button btnClose = findViewById(R.id.btnClose);
        btnClose.setOnClickListener(v -> finish());
    }
}

ขั้นตอนที่ 5: Manifest (สำคัญ - ใช้ Theme โปร่งใส)

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

    <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">

        <!-- Main Activity ใช้ Theme ปกติ -->
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <!-- Transparent Activity -->
        <activity
            android:name=".TransparentActivity"
            android:theme="@style/Theme.Transparent"
            android:exported="false"/>

    </application>
</manifest>

การทดสอบ

  1. สร้าง Activity ที่ 2 (TransparentActivity) ใช้ Theme.Transparent
  2. ใน MainActivity ใส่ปุ่มเปิด TransparentActivity
  3. รันแอป กดปุ่ม - จะเห็น Activity ใหม่โผล่ขึ้นบน Activity เดิม พร้อมพื้นหลังมองเห็นได้

โค้ดเปิด Transparent Activity

// ใน MainActivity
findViewById(R.id.btnOpenTransparent).setOnClickListener(v -> {
    Intent intent = new Intent(this, TransparentActivity.class);
    startActivity(intent);
});

กรณีใช้งานจริง (Use Cases)

  • Custom Dialog/Bottom Sheet - ควบคุม Layout ได้เต็มที่
  • Overlay Permission Screen - ขอสิทธิ์ Draw Over Apps
  • Onboarding/Tutorial Overlay - Highlight Feature บนหน้าจอหลัก
  • Camera/AR Overlay - UI บน Camera Preview

ทางเลือกทันสมัย: DialogFragment / BottomSheetDialogFragment

สำหรับ Dialog แบบโมดัล แนะนำใช้:

  • DialogFragment - จัดการ Lifecycle ให้อัตโนมัติ
  • BottomSheetDialogFragment - Material Design Bottom Sheet
  • MaterialAlertDialogBuilder - Alert Dialog มาตรฐาน

เหล่านี้จัดการ Back Press, Rotation, Lifecycle ให้ดีกว่า Transparent Activity

ข้อควรระวัง

  • android:windowIsTranslucent=true ทำให้ Activity ไม่ได้รับ Touch Event นอกพื้นที่ View (ยกเว้นจะ set FLAG_NOT_TOUCH_MODAL)
  • Memory: Activity โปร่งใสยังคงอยู่ใน Back Stack
  • Theme ต้องไม่มี Action Bar (NoActionBar)