Cách tạo hiệu ứng bóng (Shadow) cho Button Android

Giới thiệu

Ví dụ này minh họa cách tạo nút bấm (Button) có hiệu ứng bóng đổ (shadow) bằng LayerList drawable, không cần thư viện bên ngoài.

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

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

Android Studio → File → New Project → Empty Activity.

Bước 2: Giao diện 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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:width="200dp"
        android:layout_gravity="center"
        android:text="Shadow Button"
        android:background="@drawable/shadow_button_layer_list"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Bước 3: Code MainActivity (src/MainActivity.java)

package com.medkart.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 Shadow (res/drawable/shadow_button_layer_list.xml)

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

    <!-- Bóng mờ (dưới, phải) -->
    <item android:left="3dp" android:top="5dp">
        <shape>
            <solid android:color="@android:color/darker_gray" />
            <corners android:radius="15dp" />
        </shape>
    </item>

    <!-- Nền nút chính (trên, trái) -->
    <item android:bottom="5dp" android:right="3dp">
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="15dp" />
        </shape>
    </item>

</layer-list>

Bước 5: Manifest (Manifests/AndroidManifest.xml)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.medkart.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ị, nhấn Run. Button sẽ hiển thị với hiệu ứng bóng đổ 3D tự nhiên.

Giải thích kỹ thuật

• LayerList: Cho phép vẽ nhiều layer hình học chồng lên nhau.
• Item 1 (Shadow): Dịch chuyển left=3dp, top=5dp → tạo bóng ở góc dưới-phải.
• Item 2 (Foreground): Dịch chuyển bottom=5dp, right=3dp → nút chính nằm trên bóng.
• Corners radius: 15dp làm bo góc mềm mại cho cả bóng và nút.

Mở rộng

Bạn có thể tùy chỉnh:

• Màu bóng: android:color="#44000000" (đen bán trong suốt).
• Độ lệch: Tăng left/top và bottom/right để bóng dày/hở hơn.
• Thêm <stroke> cho viền nút.
• Sử dụng MaterialButton (Material Components) có sẵn app:strokeWidth, app:backgroundTint và elevation.