Đặt drawableLeft cho Button Android bằng code

Đặt drawableLeft cho Button Android bằng code

Hướng dẫn này minh họa cách thiết lập icon bên trái (drawableStart/drawableLeft) cho Button lập trình trong Java.

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

Mở Android Studio, chọn File → New Project và điền thông tin cần thiết.

Bước 2: Thiết kế giao diện (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:text="Button/DrawableLeft"
        android:layout_centerInParent="true"
        android:drawableStart="@drawable/ic_brush"
        android:textSize="24sp"
        android:textStyle="bold"/>
</RelativeLayout>

Bước 3: Code 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);
        
        // Lấy Drawable từ resources
        Drawable img = getResources().getDrawable(R.drawable.ic_brush);
        
        // Thiết lập drawableLeft (start), top, right, bottom
        // Tham số: left, top, right, bottom
        button.setCompoundDrawablesWithIntrinsicBounds(img, null, null, null);
        
        // Hoặc dùng setCompoundDrawablesRelativeWithIntrinsicBounds cho RTL support
        // button.setCompoundDrawablesRelativeWithIntrinsicBounds(img, null, null, null);
    }
}

Bước 4: Cấu hình 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>

Chạy ứng dụng

Kết nối thiết bị, chạy app. Button hiển thị icon brush bên trái văn bản "Button/DrawableLeft".

// 1. Với intrinsic bounds (tự động lấy size của drawable) - KHUYẾN NGHỊ
button.setCompoundDrawablesWithIntrinsicBounds(left, top, right, bottom);
button.setCompoundDrawablesRelativeWithIntrinsicBounds(start, top, end, bottom); // RTL support

// 2. Với bounds tùy chỉnh (cần setBounds trước)
Drawable img = getResources().getDrawable(R.drawable.ic_brush);
img.setBounds(0, 0, 48, 48); // width=48, height=48
button.setCompoundDrawables(img, null, null, null);

// 3. Chỉ đổi một bên, giữ nguyên các bên khác
button.setCompoundDrawablesRelativeWithIntrinsicBounds(R.drawable.ic_new, 0, 0, 0); // Resource ID

// 4. Xóa tất cả drawables
button.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
button.setCompoundDrawables(null, null, null, null);

Khoảng cách giữa icon và text

// XML
android:drawablePadding="16dp"

// Java
button.setCompoundDrawablePadding(16); // pixel
// Hoặc convert dp to px:
int paddingPx = (int) (16 * getResources().getDisplayMetrics().density);
button.setCompoundDrawablePadding(paddingPx);

DrawableStart vs DrawableLeft (RTL Support)

• drawableLeft/setCompoundDrawables: Cố định bên trái (LTR)
• drawableStart/setCompoundDrawablesRelative: Thích ứng RTL (bên phải cho tiếng Ả Rập/Hebrew)
• Khuyến khích dùng Relative (Start/End) cho đa ngôn ngữ

Tùy chỉnh kích thước Drawable

Drawable img = getResources().getDrawable(R.drawable.ic_brush);
// Scale drawable
img.setBounds(0, 0, 100, 100); // Ép size 100x100 pixel
// Hoặc dùng LayerDrawable để scale giữ tỷ lệ
button.setCompoundDrawables(img, null, null, null);