Bottom Sheets trong Android

Bottom Sheet là 1 thành phần được thiết kế theo phong cách material design, được thêm vào thư viện design support library trong phiên bản 23.2. Bottom sheet là 1 cửa sổ đơn giản hiển thị từ dưới đáy của màn hình và có thể được sử dụng để hiện ra nhiều thông tin hơn cho người dùng. Ví dụ của bottom sheet có thể đựoc thấy trong 1 số ứng dụng của Google, như Place Picker của Places API.

Trong bài viết này, mình sẽ giới thiệu cách tạo bottom sheets trong ứng dụng của bạn.

Bottom sheet có thể là 1 phần của giao diện hoặc là 1 hộp hội thoại tạm thời. Để làm được các chức năng này, thư viện design support cung cấp:

• BottomSheetBehavior được sử dụng với CoordinatorLayout
• BottomSheetDialog là 1 hộp hội thoại với các thao tác như bottom sheet
• BottomSheetDialogFragment mở rộng từ DialogFragment, từ đó tạo 1 BottomSheetDialog thay cho 1 dialog thông thường.

Để bắt đầu bạn phải thêm thư viện vào ứng dụng:

 compile 'com.android.support:design:<latest-library-version>'

Tạo bottom sheet cố định

Để tạo 1 bottom sheet là 1 phần của giao diện:

• Tạo 1 layout với CoordinatorLayout là gốc, sau đó thêm view hoặc layout cho bottom sheet, là 1 thành phần con trực tiếp của CoordinatorLayout. Bottom sheet layout phải có thuộc tính app:layout_behavior, với giá trị là android.support.design.widget.BottomSheetBehavior

Ví dụ:

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

   <!-- main content layout-->
   <RelativeLayout
       android:layout_awidth="match_parent"
       android:layout_height="match_parent"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin">
       ......
   </RelativeLayout>

   <!-- bottom sheet layout -->
   <RelativeLayout
       android:id="@+id/linear_layout_bottom_sheet"
       android:layout_awidth="match_parent"
       android:layout_height="220dp"
       app:behavior_peekHeight="80dp"
       app:behavior_hideable="true"
       app:layout_behavior="@string/string_bottom_sheet_behavior"
       android:elevation="@dimen/z_bottom_sheet"
       android:background="@color/color_bottom_sheet">
       <TextView
           android:id="@+id/text_view_sheet_title"
           android:layout_awidth="match_parent"
           android:layout_height="wrap_content"
           android:text="@string/text_pull_to_show_more"
           android:textSize="@dimen/text_size_medium"
           android:padding="@dimen/activity_vertical_margin"/>

       <TextView
           android:id="@+id/text_view_more_content"
           android:text="@string/text_more_contet_to_user"
           android:textSize="@dimen/text_size_big"
           android:textStyle="bold"
           android:layout_awidth="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@+id/text_view_sheet_title"
           android:paddingLeft="@dimen/activity_vertical_margin"
           android:paddingRight="@dimen/activity_vertical_margin"/>

       <Button
           android:text="@string/text_click_me"
           android:layout_awidth="match_parent"
           android:layout_height="wrap_content"
           android:layout_alignParentLeft="true"
           android:layout_marginLeft="@dimen/activity_vertical_margin"
           android:layout_marginRight="@dimen/activity_vertical_margin"

           android:layout_marginTop="@dimen/activity_vertical_margin" android:layout_below="@+id/text_view_more_content"/>

   </RelativeLayout>

</android.support.design.widget.CoordinatorLayout>

• Để bottom sheet có thể hiển thị, ta cần tạo 1 BottomSheetBehavior bằng cách gọi BottomSheetBehavior.from(), truyền vào 1 tham số đến view với thuộc tính bottom behavior đối với lời gọi.

LinearLayout bottomSheetLayout
    = (LinearLayout) findViewById(R.id.layout_bottom_sheet);

//get bottom sheet behavior from bottom sheet view
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(mLayoutBottomSheet);
With a reference to the BottomSheetBehavior object, we can call the setState

Vơí tham chiếu tới đối tượng BottomSheetBehavior, ta có thể gọi phuơng thức setState, truyền các hành động khác nhau:

• BottomSheetBehavior.STATE_EXPANDED: Mở rộng tối đa bottom sheet.
• BottomSheetBehavior.STATE_HIDE: ẩn đi bottom sheet.
• BottomSheetBehavior.STATE_COLLAPSED: đặt chiều cao cho bottom sheet với giá trị cho thuộc tính peekHeight.

//to expand the bottom sheet
mbottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

//to collapse the bottom sheet
mbottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

peekHeight có thể được sử dụng để hiển thị 1 phần nhỏ của bottom sheet trên màn hình. Có thể đặt trong xml bằng thuộc tính app:behavior_peekHeight, hoặc trong code, bằng cách gọi setPeekHeight trên đối tượng BottomSheetBehavior. mbottomSheetBehavior.setPeekHeight(320);

Tạo bottom sheet dạng modal

Bottom sheet modal là bottom sheet dạng hội thoại, không phải là 1 phần của giao diện, có thể được dùng thay thế cho menu hay các dialog đơn giản:

• Tạo 1 lớp mở rộng của BottomSheetDialogFragment, tạo giao diện với layout được sử dụng làm nội dung của modal dialog. layout_custom_bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_awidth="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_vertical_margin"
    android:paddingRight="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <ImageView
        android:id="@+id/ic_image"
        android:src="@mipmap/ic_launcher"
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="@dimen/margin_normal"
        android:layout_marginTop="@dimen/activity_vertical_margin"/>

    <TextView
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello bottom sheet"
        android:textSize="@dimen/text_size_medium"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:layout_toRightOf="@+id/ic_image"
        android:layout_alignTop="@+id/ic_image"/>

    <TextView
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:layout_below="@+id/ic_image"
        android:layout_awidth="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_lorem_ipsum"
        android:lineSpacingExtra="@dimen/margin_small"
        android:layout_marginBottom="@dimen/margin_normal"/>

</RelativeLayout>

• Tạo 1 instance của modal bottom sheet và hiển thị nó với phuơng thức show(), truyền vào FragmentManager và 1 chuỗi tag.

CustomBottomSheetDialog bottomSheetDialog = CustomBottomSheetDialog.getInstance();
bottomSheetDialog.show(getSupportFragmentManager(), "Custom Bottom Sheet");

Như vậy ta đã tạo xong bottom sheet cho ứng dụng. Hi vọng bài viết này sẽ có ích cho các bạn