Cách tạo nút bấm (Button) bo góc trong Android

Giới thiệu

Bài viết này hướng dẫn cách tùy chỉnh giao diện Button trong Android để có góc bo tròn (rounded corners) bằng cách sử dụng drawable resource XML.

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

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

Mở Android Studio, chọn File → New Project và hoàn tất thiết lập.

Bước 2: Layout chính (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textColor="#ffffff"
        android:background="@drawable/mybutton"
        android:text="Buttons"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Bước 3: Code Java đơn giản (src/MainActivity.java)

package com.app.sample;

import androidx.appcompat.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);
    }
}

Bước 4: Tạo drawable tùy chỉnh (res/drawable/mybutton.xml)

Đây là phần quan trọng nhất - sử dụng <selector> để định nghĩa giao diện cho các trạng thái khác nhau của button (nhấn, focus, mặc định):

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

    <!-- Trạng thái khi đang nhấn -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <stroke android:width="1dp" android:color="#5e7974" />
            <gradient
                android:angle="-90"
                android:startColor="#345953"
                android:endColor="#689a92" />
        </shape>
    </item>

    <!-- Trạng thái khi có focus -->
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <stroke android:width="1dp" android:color="#5e7974" />
            <solid android:color="#58857e" />
        </shape>
    </item>

    <!-- Trạng thái mặc định -->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <stroke android:width="1dp" android:color="#5e7974" />
            <gradient
                android:angle="-90"
                android:startColor="#8dbab3"
                android:endColor="#58857e" />
        </shape>
    </item>

</selector>

Giải thích các thuộc tính quan trọng:

• <corners android:radius="3dp">: Bo góc với bán kính 3dp
• <stroke>: Viền bao quanh
• <gradient>: Gradient màu nền
• <solid>: Màu nền đơn sắc

Bước 5: Cấu hình Manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.app.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ị và chạy ứng dụng. Button sẽ hiển thị với góc bo tròn và thay đổi màu sắc khi nhấn/focus.

Mẹo mở rộng

Bạn có thể điều chỉnh độ bo góc bằng cách thay đổi giá trị android:radius. Để bo góc riêng cho từng góc, sử dụng:

<corners
    android:topLeftRadius="8dp"
    android:topRightRadius="8dp"
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp" />