วิธีจัดกึ่งกลางหัวข้อ Action Bar ใน Android

ภาพรวม

ตัวอย่างนี้สาธิตวิธีจัดตำแหน่ง Title ให้อยู่กึ่งกลางของ Action Bar/Toolbar โดยใช้ Custom View

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

Android Studio → File → New Project → Empty Activity (Theme: NoActionBar หรือ MaterialComponents)

ขั้นตอนที่ 2: ใช้ Toolbar แทน ActionBar (แนะนำ)

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:titleTextColor="@android:color/white"
            app:title="My Centered Title"
            app:titleTextAppearance="@style/Toolbar.Title.Center" />

    </com.google.android.material.appbar.AppBarLayout>

    <!-- เนื้อหาหลัก -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="Content goes here..."
            android:textSize="16sp" />

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

res/values/styles.xml

<style name="Toolbar.Title.Center" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textAlignment">center</item>
    <item name="android:gravity">center</item>
    <item name="android:layout_gravity">center</item>
</style>

<!-- Theme ไม่มี ActionBar เดิม -->
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

MainActivity.java

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        
        // ตั้งค่า Title (Optional - ถ้าตั้งใน XML แล้วไม่ต้องตั้งซ้ำ)
        // getSupportActionBar().setTitle("My Centered Title");
        
        // แสดงปุ่ม Back (ถ้าต้องการ)
        // getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
}

วิธีเก่า: Custom View กับ ActionBar (Deprecated)

// activity_main.xml (Custom View)
<TextView xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="My Action Bar"
    android:textSize="18sp"
    android:textStyle="bold"
    android:textColor="@android:color/white"
    android:padding="16dp" />

// MainActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main); // Layout หลัก
    
    // ใช้ Custom View แทน Title
    getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
    getSupportActionBar().setCustomView(R.layout.custom_actionbar_title); // Layout TextView ข้างบน
}

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>

การทดสอบ

รันแอป → จะเห็น Toolbar พร้อม Title อยู่กึ่งกลาง

สำหรับ Jetpack Compose

@Composable
fun TopAppBarExample() {
    TopAppBar(
        title = { Text("Centered Title", textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth()) },
        colors = TopAppBarDefaults.topAppBarColors(containerColor = MaterialTheme.colorScheme.primaryContainer)
    )
}

เคล็ดลับ Toolbar

• ใช้ app:titleTextAppearance ควบคุม Font, Size, Color
• ใช้ app:contentInsetStart="0dp" และ app:contentInsetEnd="0dp" หาก Title ไม่กึ่งกลางสมบูรณ์
• เพิ่ม Logo/Navigation Icon: app:navigationIcon="@drawable/ic_menu"
• Collapsing Toolbar: ใช้ CollapsingToolbarLayout สำหรับ Effect Parallax