Tùy chỉnh Button Android: đặt text và màu sắc

Tùy chỉnh Button Android: đặt text và màu sắc

Hướng dẫn này minh họa cách tùy chỉnh Button (văn bản, màu chữ) bằng code Java trong Android.

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:background="#c0c0c0"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/customBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="4dp"
        android:textStyle="bold"
        android:textSize="24sp"/>
</RelativeLayout>

Bước 3: Code MainActivity.java

import android.graphics.Color;
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.customBtn);
        button.setText("Red Color Button");
        button.setTextColor(Color.parseColor("#ff0000")); // Màu đỏ
        
        // Các cách đặt màu khác:
        // button.setTextColor(Color.RED); // Hằng số Color
        // button.setTextColor(0xFFFF0000); // ARGB hex
        // button.setTextColor(ContextCompat.getColor(this, R.color.my_color)); // Từ resource
    }
}

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ị chữ "Red Color Button" với màu đỏ (#ff0000), chữ đậm, cỡ 24sp, nằm giữa màn hình nền xám.

Button button = findViewById(R.id.customBtn);

// Text
button.setText("Custom Button");
button.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18);
button.setTypeface(Typeface.DEFAULT_BOLD);
button.setAllCaps(false); // Tắt tự động viết hoa

// Màu
button.setTextColor(Color.WHITE);
button.setBackgroundColor(Color.BLUE);

// Background drawable (bo góc, gradient, v.v.)
button.setBackgroundResource(R.drawable.custom_button_background);

// Padding & Margin
button.setPadding(32, 16, 32, 16); // left, top, right, bottom (px)

// Drawable (icon)
Drawable icon = ContextCompat.getDrawable(this, R.drawable.ic_star);
icon.setBounds(0, 0, 48, 48); // width, height
button.setCompoundDrawables(icon, null, null, null); // left, top, right, bottom
button.setCompoundDrawablePadding(16); // Khoảng cách icon-text

// Trạng thái
button.setEnabled(true);
button.setPressed(false);
button.setSelected(false);

// Click listener
button.setOnClickListener(v -> Toast.makeText(this, "Clicked!", Toast.LENGTH_SHORT).show());

Tùy chỉnh qua XML (Khuyến khích)

Tạo res/drawable/custom_button.xml:

<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#0056b3"/>
            <corners android:radius="8dp"/>
        </shape>
    </item>
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <solid android:color="#cccccc"/>
            <corners android:radius="8dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#007bff"/>
            <corners android:radius="8dp"/>
        </shape>
    </item>
</selector>

Áp dụng: android:background="@drawable/custom_button" trong XML layout.