Tạo Button tùy chỉnh (Custom Button) trong Android dùng XML Styles
Hướng dẫn này minh họa cách tạo các Button tùy chỉnh đẹp mắt sử dụng Shape Drawable XML (không cần hình ảnh).
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/customButton"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/custom_button"
android:text="My Custom button"
android:textColor="#FFFFFF"/>
<Button
android:id="@+id/customButton2"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_below="@id/customButton"
android:layout_marginTop="24sp"
android:background="@drawable/custom_button2"
android:text="My Custom button"
android:textColor="#FFFFFF"/>
<Button
android:id="@+id/customButton3"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:layout_above="@id/customButton"
android:layout_marginBottom="24sp"
android:background="@drawable/custom_button3"
android:text="My Custom button"
android:textColor="#FFFFFF"/>
</RelativeLayout>
Bước 3: Tạo custom_button.xml (Viền bo tròn, stroke)
Chuột phải res/drawable → New → Drawable resource file → Tên: custom_button:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:color="#66F9B9" android:width="4dp"/>
<corners android:radius="16sp"/>
</shape>
Bước 4: Tạo custom_button2.xml (Gradient + bo tròn)
Tạo file custom_button2.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#2AF598"
android:centerColor="#ff1493"
android:endColor="@color/colorPrimary"/>
<corners android:radius="50dp"/>
</shape>
Bước 5: Tạo custom_button3.xml (Tròn tròn - Circle Button)
Tạo file custom_button3.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#80121a" />
<corners android:radius="999dp"/>
</shape>
Bước 6: Code MainActivity.java
package app.com.sample;
import android.support.v7.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 7: 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. Sẽ hiển thị 3 button tùy chỉnh:
- Button 1: Viền xanh mint, bo góc 16sp
- Button 2: Gradient xanh → hồng → primary, bo góc 50dp (hình chữ nhật tròn)
- Button 3: Màu đỏ đậm, bo tròn hoàn toàn (radius 999dp) - hình tròn
Các phần tử Shape Drawable chính:
<shape android:shape="rectangle|oval|line|ring">
<!-- Màu nền rắn -->
<solid android:color="#FF0000" />
<!-- Gradient -->
<gradient
android:startColor="#FF0000"
android:centerColor="#00FF00"
android:endColor="#0000FF"
android:angle="45"
android:type="linear|radial|sweep"
android:gradientRadius="100dp" />
<!-- Viền -->
<stroke android:width="2dp" android:color="#000000" android:dashWidth="5dp" android:dashGap="3dp" />
<!-- Bo góc -->
<corners
android:radius="16dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp" />
<!-- Padding nội bộ -->
<padding android:left="8dp" android:top="4dp" android:right="8dp" android:bottom="4dp" />
<!-- Kích thước (cho ring) -->
<size android:width="100dp" android:height="100dp" />
</shape>
Button với trạng thái (State List Drawable)
Tạo res/drawable/button_selector.xml:
<selector xmlns:android="https://schemas.android.com/apk/res/android">
<!-- Đang nhấn -->
<item android:state_pressed="true">
<shape>
<solid android:color="#0056b3"/>
<corners android:radius="8dp"/>
</shape>
</item>
<!-- Focused (điều hướng bàn phím) -->
<item android:state_focused="true">
<shape>
<solid android:color="#0069d9"/>
<corners android:radius="8dp"/>
<stroke android:width="2dp" android:color="#004085"/>
</shape>
</item>
<!-- Disabled -->
<item android:state_enabled="false">
<shape>
<solid android:color="#cccccc"/>
<corners android:radius="8dp"/>
</shape>
</item>
<!-- Mặc định -->
<item>
<shape>
<solid android:color="#007bff"/>
<corners android:radius="8dp"/>
</shape>
</item>
</selector>
Áp dụng: android:background="@drawable/button_selector"
Material Button (Khuyến khích hiện nay)
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Material Button"
app:cornerRadius="16dp"
app:backgroundTint="@color/colorPrimary"
app:strokeColor="@color/white"
app:strokeWidth="2dp"
app:icon="@drawable/ic_star"
app:iconGravity="textStart"
app:iconPadding="8dp"/>
Cần dependency: implementation 'com.google.android.material:material:1.11.0'