Cách thiết lập drawableLeft cho Button theo chương trình trên Android bằng Kotlin

Giới thiệu

Ví dụ minh họa cách gán icon (drawable) về bên trái chữ của Button theo chương trình (programmatically) thay vì trong XML, sử dụng Kotlin.

Các bước thực hiện

Bước 1: Tạo dự án mới

Android Studio > File > New Project.

Bước 2: Layout (activity_main.xml)

Button chưa có drawableLeft trong 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:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:background="#008080"
        android:padding="5dp"
        android:text="TutorialsPoint"
        android:textColor="#fff"
        android:textSize="24sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text"
        android:layout_centerInParent="true"
        android:layout_marginTop="20dp"
        android:text="DrawableLeft trên Button Android"
        android:textColor="@android:color/holo_purple"
        android:textSize="16sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="4dp"
        android:background="@android:color/holo_blue_light"
        android:padding="4dp"
        android:text=" Alarm"
        android:textSize="24sp"
        android:textStyle="bold" />

</RelativeLayout>

Bước 3: MainActivity.kt

import android.graphics.drawable.Drawable
import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity

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

        val button: Button = findViewById(R.id.button)
        // Lấy Drawable từ resources (R.drawable.ic_baseline_alarm_24 là icon hệ thống hoặc custom)
        val img: Drawable = button.context.resources.getDrawable(R.drawable.ic_baseline_alarm_24, theme)
        // Thiết lập drawableLeft (top, right, bottom = null)
        button.setCompoundDrawablesWithIntrinsicBounds(img, null, null, null)
    }
}

Bước 4: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.buttonicon">

    <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>

Chạy ứng dụng

Chạy app, Button sẽ hiển thị icon báo thức (alarm) bên trái chữ "Alarm".

Các phương thức liên quan

Cách làm trong XML (Tĩnh)

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_baseline_alarm_24"
    android:drawablePadding="8dp"
    android:text="Alarm" />

• android:drawablePadding: Khoảng cách giữa icon và text.
• android:drawableStart: RTL-aware (API 17+).

Cách hiện đại: MaterialButton (Material Components)

<com.google.android.material.button.MaterialButton
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:icon="@drawable/ic_baseline_alarm_24"
    app:iconGravity="start"
    app:iconPadding="8dp"
    android:text="Alarm" />

• Hỗ trợ icon vector (XML), tint tự động theo theme.
• Code: button.icon = ContextCompat.getDrawable(context, R.drawable.ic_alarm).