วิธีซ่อนหรือลบปุ่ม (Button) ใน Android ด้วย Kotlin

ตัวอย่างนี้สาธิตวิธี ซ่อน (Invisible/Gone) หรือลบปุ่ม ออกจาก Layout แบบไดนามิกใน Android

ขั้นตอนที่ 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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Button Visibility Demo"
        android:textAlignment="center"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="24sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/btnToggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@android:color/white"
        android:padding="12dp"
        android:text="Click to Hide Me"
        android:textColor="@android:color/holo_red_dark"
        android:textSize="18sp"
        android:textStyle="bold" />

</RelativeLayout>

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

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

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "Button Visibility"

        val btnToggle = findViewById(R.id.btnToggle)
        btnToggle.setOnClickListener {
            // 🔑 สลับระหว่าง VISIBLE / INVISIBLE / GONE
            when (btnToggle.visibility) {
                View.VISIBLE -> {
                    btnToggle.visibility = View.INVISIBLE
                    Toast.makeText(this, "INVISIBLE: Hidden but keeps space", Toast.LENGTH_SHORT).show()
                }
                View.INVISIBLE -> {
                    btnToggle.visibility = View.GONE
                    Toast.makeText(this, "GONE: Hidden and removes space", Toast.LENGTH_SHORT).show()
                }
                View.GONE -> {
                    btnToggle.visibility = View.VISIBLE
                    Toast.makeText(this, "VISIBLE: Shown again", Toast.LENGTH_SHORT).show()
                }
            }
        }
    }
}

🔍 ความแตกต่าง: INVISIBLE vs GONE

🗑️ วิธี "ลบ" View จริงๆ (Remove from Parent)

val parent = btnToggle.parent as? ViewGroup
parent?.removeView(btnToggle)
// ⚠️ View นี้จะไม่สามารถ addView กลับเข้าไปได้อีก (ถ้าไม่ new Instance)

🎭 Animation การซ่อน/แสดง (แนะนำ)

// Fade Out แล้ว GONE
btnToggle.animate()
    .alpha(0f)
    .setDuration(300)
    .withEndAction { btnToggle.visibility = View.GONE }
    .start()

// Fade In จาก GONE
btnToggle.visibility = View.VISIBLE
btnToggle.alpha = 0f
btnToggle.animate()
    .alpha(1f)
    .setDuration(300)
    .start()

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

Manifest มาตรฐาน

ทดสอบ

1. รันแอป → ปุ่มแสดงอยู่กลางหน้าจอ
2. กดครั้งที่ 1 → หาย (INVISIBLE) แต่พื้นที่ยังคงว่าง
3. กดครั้งที่ 2 → หาย (GONE) พื้นที่หายไป Layout บีบอัด
4. กดครั้งที่ 3 → กลับมาแสดงปกติ (VISIBLE)