Android Floating Action sử dụng thư viện Speed Dial

Tính năng:

  • MinSdk 14
  • Khả năng tùy biến cao (label, icon, ripple, fab và label background colors, themes support)
  • Animation tương tự Inbox của Gmail
  • Tùy chọn các icon khác nhau cho trạng thái mở/đóng
  • Tùy chọn overlay
  • Hỗ trợ mở rộng menu dưới, trái và phải
  • Hỗ trợ vượt trội cho Snackbar
  • Hỗ trợ tùy chọn cho hành vi trong RecyclerView và NestedScrollView
  • Hỗ trợ cho VectorDrawable
  • Và quan trọng nhất là dễ sử dụng

Cách dùng

Thư viện này có sẵn trên Jcenter. Bạn chỉ cần thêm dòng dưới đây vào Dependencies

implementation "com.leinardi.android:speed-dial:2.0.0"

Thêm JitPack repository vào build file

maven { url 'https://jitpack.io' }

Thêm dependency

implementation 'com.github.leinardi:FloatingActionButtonSpeedDial:master-SNAPSHOT'

Sử dụng bằng cách thêm SpeedDialView vào file layout của bạn

<com.leinardi.android.speeddial.SpeedDialView
    android:id="@+id/speedDial"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:sdMainFabClosedSrc="@drawable/ic_add_white_24dp"/>

Thêm item cho SpeedDialView

SpeedDialView speedDialView = findViewById(R.id.speedDial);
speedDialView.addActionItem(
        new SpeedDialActionItem.Builder(R.id.fab_link, R.drawable.ic_link_white_24dp)
                .create()
);

Handle click listener

speedDialView.setOnActionSelectedListener(new SpeedDialView.OnActionSelectedListener() {
    @Override
    public boolean onActionSelected(SpeedDialActionItem speedDialActionItem) {
        switch (speedDialActionItem.getId()) {
            case R.id.fab_link:
                showToast("Link action clicked!");
                return false; // true to keep the Speed Dial open
            default:
                return false;
        }
    }
});

Một số tùy chỉnh bạn có thể sử dụng

Handle onChangeListener

speedDialView.setOnChangeListener(new SpeedDialView.OnChangeListener() {
    @Override
    public void onMainActionSelected() {
        // Call your main action here
        return false; // true to keep the Speed Dial open
    }
 
    @Override
    public void onToggleChanged(boolean isOpen) {
        Log.d(TAG, "Speed dial toggle state changed. Open = " + isOpen);
    }
});

Tùy chỉnh cho các item. SpeedDialActionItem.Builder cung cấp một số setters để tùy chỉnh những thuộc tính của các item

mSpeedDialView.addActionItem(
        new SpeedDialActionItem.Builder(R.id.fab_custom_color, R.drawable.ic_custom_color)
                .setFabBackgroundColor(ResourcesCompat.getColor(getResources(), R.color.material_white_1000, getTheme()))
                .setFabImageTintColor(ResourcesCompat.getColor(getResources(), R.color.inbox_primary, getTheme()))
                .setLabel(getString(R.string.label_custom_color))
                .setLabelColor(Color.WHITE)
                .setLabelBackgroundColor(ResourcesCompat.getColor(getResources(), R.color.inbox_primary, getTheme()))
                .setLabelClickable(false)
                .create()
);

Bạn cũng có thể thay đổi background và hiệu ứng đổi màu khi click

mSpeedDialView.addActionItem(
        new SpeedDialActionItem.Builder(R.id.fab_custom_theme, R.drawable.ic_theme_white_24dp)
                .setLabel(getString(R.string.label_custom_theme))
                .setTheme(R.style.AppTheme_Purple)
                .create());
<style name="AppTheme.Purple" parent="AppTheme">
    <item name="colorPrimary">@color/material_purple_500</item>
    <item name="colorPrimaryDark">@color/material_purple_700</item>
    <item name="colorAccent">@color/material_purple_a700</item>
    <item name="colorControlHighlight">@color/material_purple_200</item>
</style>

Thêm lớp overlay/touch guard khi menu đang mở Bạn chỉ cần thêm SpeedDialOverlayLayout vào layout

<com.leinardi.android.speeddial.SpeedDialOverlayLayout
    android:id="@+id/overlay"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Sau đó thêm vào SpeedDialView bằng 1 trong 2 cách sau:

<com.leinardi.android.speeddial.SpeedDialView
    android:id="@+id/speedDial"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:sdMainFabClosedSrc="@drawable/ic_add_white_24dp"
    app:sdOverlayLayout="@id/overlay" />

hoặc

SpeedDialOverlayLayout overlayLayout = findViewById(R.id.overlay);
mSpeedDialView.setSpeedDialOverlayLayout(overlayLayout);

Trên đây là cách dùng đơn giản của Floating Button sử dụng thư viện Speed Dial. Cảm ơn các bạn đã theo dõi!