วิธีตั้งค่า DrawableLeft ให้ Button ด้วยโค้ดใน Android

บทความนี้สาธิตวิธีตั้งค่า Drawable (Icon) ด้านซ้าย ของ Button โดยโปรแกรม (Programmatically) ด้วย setCompoundDrawablesWithIntrinsicBounds()

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

Android Studio → File → New Project

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

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button/DrawableLeft"
        android:textSize="24sp"
        android:textStyle="bold" />

</RelativeLayout>

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

import android.graphics.drawable.Drawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    Button button;

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

        button = findViewById(R.id.button);

        // ดึง Drawable จาก Resources
        Drawable icon = getResources().getDrawable(R.drawable.ic_brush, getTheme());

        // ตั้งค่า Drawable ด้านซ้าย (Left/Start)
        // พารามิเตอร์: left, top, right, bottom
        button.setCompoundDrawablesWithIntrinsicBounds(icon, null, null, null);

        // หรือใช้แบบระบุขนาดเอง (API 17+)
        // button.setCompoundDrawablesRelativeWithIntrinsicBounds(icon, null, null, null);
    }
}

เมธอดหลัก: setCompoundDrawablesWithIntrinsicBounds

// ใช้ Intrinsic bounds (ขนาดต้นฉบับของ drawable)
button.setCompoundDrawablesWithIntrinsicBounds(left, top, right, bottom);

// ระบุขนาดเอง (API 17+)
button.setCompoundDrawablesRelativeWithIntrinsicBounds(start, top, end, bottom);

// ระบุขนาดพิกเซลแน่นอน
Drawable icon = getResources().getDrawable(R.drawable.ic_brush);
icon.setBounds(0, 0, 48, 48); // width=48, height=48
button.setCompoundDrawables(icon, null, null, null);

XML Alternative (ไม่ต้องเขียนโค้ด)

ใน Layout XML โดยตรง:

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button with Icon"
    android:drawableStart="@drawable/ic_brush" <!-- API 17+ RTL support -->
    android:drawableLeft="@drawable/ic_brush"   <!-- Legacy -->
    android:drawablePadding="8dp"
    android:paddingStart="16dp"
    android:paddingEnd="16dp" />

ความแตกต่าง: drawableLeft vs drawableStart

การปรับแต่งเพิ่มเติม

Tint สี Icon (API 21+)

button.setCompoundDrawableTintList(ColorStateList.valueOf(Color.WHITE));

ใน XML

<Button
    ...
    android:drawableTint="@color/white" />

MaterialButton (แนะนำใหม่)

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Icon Button"
    app:icon="@drawable/ic_brush"
    app:iconGravity="textStart"
    app:iconPadding="8dp"
    app:iconTint="@color/white" />