Hướng dẫn tạo Material Dialog Bottom Sheet Android

Bottom sheet 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ị bằng cách vuốt từ dưới màn hình lên 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.

Material Dialog Bottom Sheet Android

Material Dialog Bottom Sheet là hộp thoại tùy chỉnh để sử dụng tính năng Bottom Sheet Material View trong các phiên bản Lollipop trước.

Nó có thể được sử dụng với một cách dễ dàng bằng cách cho phép hộp thoại như một Bottom Sheet mà không sử dụng bất kỳ thư viện nào.

Bây giờ chúng ta hãy tạo custom dialog của riêng bạn như sau:

Tạo project với một Activity or fragment với một Dialog và một bottom sheet custom layout và setContentView cho dialog.

 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:layout_centerInParent="true"
        android:background="@color/colorPrimaryDark"
        android:text="Click to open"
        android:textColor="@android:color/white" />

</RelativeLayout>

Tạo một custom layout cho dialog

bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/popup_window"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center"
    android:background="@android:color/white"
    android:padding="10dp"
    android:orientation="vertical">


    <TextView
        android:id="@+id/txt_backup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/export"
        android:drawablePadding="15dp"
        android:gravity="center_vertical"
        android:padding="15dp"
        android:text="Backup"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/txt_detail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/details"
        android:drawablePadding="15dp"
        android:gravity="center_vertical"
        android:padding="15dp"
        android:text="Detail"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/txt_open"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/open"
        android:drawablePadding="15dp"
        android:gravity="center_vertical"
        android:padding="15dp"
        android:text="Open"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/txt_uninstall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/uninstall"
        android:drawablePadding="15dp"
        android:gravity="center_vertical"
        android:padding="15dp"
        android:text="Uninstall"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

Thêm style vào file styles.xml

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!--Style Material Dialog Bottom Sheet-->
    <style name="MaterialDialogSheet" parent="@android:style/Theme.Dialog">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:windowAnimationStyle">@style/MaterialDialogSheetAnimation</item>
    </style>

    <style name="MaterialDialogSheetAnimation">
        <item name="android:windowEnterAnimation">@anim/popup_show</item>
        <item name="android:windowExitAnimation">@anim/popup_hide</item>
    </style>

</resources>

Tạo animation cho Material Dialog Sheet Animation

popup_show.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromYDelta="100%p"
        android:toYDelta="0"
        android:duration="300"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</set>

popup_hide.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromYDelta="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toYDelta="100%p" />
</set>

Tạo function trong MainActivity.java

MainActivity.java

package ntc.dev4u.com.bottomsheetdialog;

import android.app.Dialog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btnBottomSheet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        btnBottomSheet = (Button) findViewById(R.id.btnBottomSheet);

        btnBottomSheet.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btnBottomSheet:
                eventClick();
                break;
        }
    }

    private void eventClick() {
        View view = getLayoutInflater().inflate(R.layout.bottom_sheet, null);
        TextView txtBackup = (TextView) view.findViewById(R.id.txt_backup);
        TextView txtDetail = (TextView) view.findViewById(R.id.txt_detail);
        TextView txtOpen = (TextView) view.findViewById(R.id.txt_open);
        final TextView txtUninstall = (TextView) view.findViewById(R.id.txt_uninstall);

        final Dialog mBottomSheetDialog = new Dialog(MainActivity.this, R.style.MaterialDialogSheet);
        mBottomSheetDialog.setContentView(view);
        mBottomSheetDialog.setCancelable(true);
        mBottomSheetDialog.getWindow().setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        mBottomSheetDialog.getWindow().setGravity(Gravity.BOTTOM);
        mBottomSheetDialog.show();

        txtBackup.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Clicked Backup", Toast.LENGTH_SHORT).show();
                mBottomSheetDialog.dismiss();
            }
        });

        txtDetail.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Clicked Detail", Toast.LENGTH_SHORT).show();
                mBottomSheetDialog.dismiss();
            }
        });

        txtOpen.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Clicked Open", Toast.LENGTH_SHORT).show();
                mBottomSheetDialog.dismiss();
            }
        });

        txtUninstall.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Clicked Uninstall", Toast.LENGTH_SHORT).show();
                mBottomSheetDialog.dismiss();
            }
        });
    }
}

Project on github: https://github.com/trongcong/BottomSheetDialog