ความแตกต่างระหว่าง match_parent และ wrap_content ใน Android

ภาพรวม

ตัวอย่างนี้สาธิตความแตกต่างระหว่าง match_parent (เดิมชื่อ fill_parent) และ wrap_content ในการกำหนดขนาด View

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

เปิด Android Studio → File → New Project และกรอกข้อมูลที่จำเป็น

ขั้นตอนที่ 2: เลย์เอาต์สาธิต (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 ที่ 1: match_parent ทั้งสองมิติ -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="A wiki is run using wiki software, otherwise known as a wiki engine. A wiki engine is a type of content management system, but it differs from most other such systems, including blog software, in that the content is created without any defined owner or leader, and wikis have little inherent structure, allowing structure to emerge according to the needs of the users."
        android:background="#E0E0E0"
        android:padding="16dp" />

    <!-- TextView ที่ 2: wrap_content ทั้งสองมิติ -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="This is a Wrap text"
        android:background="#FFEB3B"
        android:padding="16dp"
        android:textSize="18sp"
        android:textStyle="bold" />

</RelativeLayout>

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

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

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

ขั้นตอนที่ 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>

การทดสอบ

รันแอป จะเห็น TextView สีเทาเต็มหน้าจอ (match_parent) และ TextView สีเหลืองกึ่งกลาง (wrap_content)

ความแตกต่างสรุป

match_parent / fill_parent

• fill_parent - ชื่อเก่า ใช้ใน API Level < 8 (Android 2.2)
• match_parent - ชื่อใหม่ ตั้งแต่ API Level 8 (Android 2.2) เป็นต้นมา
• ทำให้ View ขยายเต็มพื้นที่ของ Parent ViewGroup
• เหมือน width: 100% ใน CSS

wrap_content

• ทำให้ View มีขนาดพอดีกับเนื้อหา (Content) รวม Padding
• เหมือน width: auto หรือ fit-content ใน CSS
• ขนาดจะเปลี่ยนตามเนื้อหาที่แสดง

ตัวอย่างการใช้งานจริง

ใช้ match_parent เมื่อ:

• Root Layout ของหน้าจอ
• Background Image ให้เต็มหน้าจอ
• RecyclerView/ListView ที่ต้องการเต็มพื้นที่
• Container ที่จะใส่ Child หลายตัว

ใช้ wrap_content เมื่อ:

• Button, TextView, ImageView ที่ขนาดขึ้นกับเนื้อหา
• Item ใน RecyclerView (Height)
• Dialog, Popup, Tooltip
• View ที่มีขนาดไม่คงที่

การผสมผสาน (Best Practice)

<!-- Parent: match_parent, Child: wrap_content -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Title" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Action" />

</LinearLayout>