Bottom Sheet là component được mở bằng cách trượt lên từ phía dưới màn hình thiết bị để hiển thị thêm nhiều nội dung. Trong bài viết này chúng ta sẽ cùng tìm hiểu cách sử dụng và cài đặt Bottom Sheet trong Android.

Sau đây mình sẽ hướng dẫn các bạn các bước để tạo một Bottom Sheet.

Bước 1: Thêm thư viện phụ thuộc

Thêm các thư viện dưới đây vào file build.gradle (Module: app)

dependencies {
    //Thay X.X.X với version mới nhất
    implementation 'com.android.support:appcompat-v7:X.X.X'
    implementation 'com.android.support:design:X.X.X'
}

Thừa kế AppCompatActivity trong activity của bạn.

public class MainActivity extends AppCompatActivity {
...
}

Bước 2: Tạo layout nội dung Bottom Sheet

bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="340dp"
    android:background="@android:color/darker_gray"
    android:orientation="vertical"
    app:behavior_hideable="true"
    app:behavior_peekHeight="80dp"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="@string/bottom_sheet_peek"
        android:textColor="@android:color/white" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="@string/bottom_sheet_content"
        android:textColor="@android:color/white" />

</LinearLayout>

behavior_peekHeight: Xác định chiều cao của phần có thể nhìn thấy.

behavior_hideable: Xác định xem Bottom Sheet có thể ẩn bằng cách kéo xuống hay không.

Bước 3: Thêm Bottom Sheet vào giao diện chính

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidsample.BottomSheetActivity">

    <!-- include app bar -->
    <include layout="@layout/app_bar" />

    <!-- include main content -->
    <include layout="@layout/activity_bottom_sheet_content" />

    <!-- include bottom sheet -->
    <include layout="@layout/bottom_sheet" />
</android.support.design.widget.CoordinatorLayout>

Chú ý: app_bar và activity_bottom_sheet_content layout là một số view không liên quan tới Bottom Sheet. Bạn hoàn toàn có thể thay thế hoặc bỏ đi cũng được.

Chạy thử ứng dụng:

Bước 4: Xử lý các sự kiện

Behavior và các attributes (thuôc tính) có thể được kiểm soát "động" thông qua code trong quá trình runtime.

MainActivity.java

// get the bottom sheet view
LinearLayout llBottomSheet = (LinearLayout) findViewById(R.id.bottom_sheet);

// init the bottom sheet behavior
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(llBottomSheet);

// change the state of the bottom sheet
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);

// set the peek height
bottomSheetBehavior.setPeekHeight(340);

// set hideable or not
bottomSheetBehavior.setHideable(false);

// set callback for changes
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {

    }
});

Thật đơn giản phải không? Như vậy là bạn đã biết cách sử dụng một trong component rất hay trong Google Material Design. Mình hi vọng nó sẽ hữu ích trong quá trình phát triển ứng dụng của các bạn.

Cảm ơn các bạn đã đọc bài viết.

Chào thân ái và quyết thắng!