สร้าง Custom ActionBar/Toolbar ใน Android

ActionBar vs Toolbar

• ActionBar: Legacy API (API 11+) ติดอยู่บน Window Decor ไม่ยืดหยุ่น
• Toolbar: Widget ทั่วไป (androidx.appcompat.widget.Toolbar) วางไว้ใน Layout ได้ กำหนดเองทั้งหมด (แนะนำ)

วิธีสร้าง Custom Toolbar

1. Theme: ปิด Default ActionBar

2. Layout: วาง Toolbar ใน XML

แบบ A: Toolbar แยกไฟล์ (แนะนำ - ใช้ร่วมได้)

แบบ B: ใช้ app:title และ Menu (Simple)

3. MainActivity.java - Setup Toolbar

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private TextView toolbarTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); // Layout ที่ include toolbar_custom.xml

        // หา Toolbar (ถ้า include แยก)
        toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar); // ตั้งเป็น Support ActionBar

        // เข้าถึง Custom View ภายใน Toolbar
        toolbarTitle = toolbar.findViewById(R.id.toolbar_title);
        ImageView btnSearch = toolbar.findViewById(R.id.btn_search);
        ImageView btnNotification = toolbar.findViewById(R.id.btn_notification);

        // Event Listeners
        toolbarTitle.setOnClickListener(v -> 
            Toast.makeText(this, "Clicked Title", Toast.LENGTH_SHORT).show()
        );
        btnSearch.setOnClickListener(v -> 
            Toast.makeText(this, "Search Clicked", Toast.LENGTH_SHORT).show()
        );
        btnNotification.setOnClickListener(v -> 
            Toast.makeText(this, "Notifications", Toast.LENGTH_SHORT).show()
        );

        // Navigation Icon (Back/Menu)
        toolbar.setNavigationOnClickListener(v -> {
            // onBackPressed() หรือ open Drawer
            finish(); // หรือ drawerLayout.openDrawer(GravityCompat.START);
        });

        // ข้อความ Title/Subtitle ผ่าน ActionBar (Optional)
        if (getSupportActionBar() != null) {
            getSupportActionBar().setDisplayShowTitleEnabled(false); // ซ่อน Title เริ่มต้น
            // getSupportActionBar().setElevation(0); // ลบเงา (Deprecated 在 Material 3)
        }
    }

    // ถ้าใช้ Menu (แบบ B)
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_menu, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_search) {
            // Handle Search
            return true;
        } else if (id == R.id.action_settings) {
            // Handle Settings
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

4. Activity Layout ที่ Include Toolbar

Material 3: Top App Bar (แทน Toolbar)

Material 3 ใช้ MaterialToolbar หรือ CenterAlignedTopAppBar

เคล็ดลับและ Best Practices

• NoActionBar Theme: บังคับใช้ Theme.NoActionBar เพื่อควบคุม Toolbar เอง
• Content Inset: ตั้ง app:contentInsetStart="0dp" เพื่อชิดขอบซ้าย
• Elevation/Shadow: Material 3 ใช้ Surface Container แทน Elevation
• Back Navigation: ใช้ OnBackPressedDispatcher แทน onBackPressed()
• Window Insets: ใช้ WindowInsetsCompat จัดการ Notch/Status Bar

สรุป

1. ใช้ Theme NoActionBar
2. สร้าง Toolbar / MaterialToolbar ใน Layout
3. เรียก setSupportActionBar(toolbar)
4. ปิด Default Title: getSupportActionBar().setDisplayShowTitleEnabled(false)
5. เข้าถึง Custom View ผ่าน toolbar.findViewById()
6. จัดการ Menu ผ่าน onCreateOptionsMenu / onOptionsItemSelected