Làm thế nào để tạo một nút hành động nổi (FAB) trong Android bằng AppCompat v21?

Tôi muốn tạo một nút hành động nổi (để thêm các mục vào chế độ xem danh sách), như lịch google, duy trì khả năng tương thích với các phiên bản Android tiền lollipop (trước 5.0).

Tôi đã tạo bố cục này:

Hoạt động main_activity.xml:

<LinearLayout ... >

     <include
         layout="@layout/toolbar"/>

     <RelativeLayout ... >

     <!-- My rest of the layout -->

          <!-- Floating action button -->
          <ImageButton style="@style/AppTheme"
                     android:layout_width="60dp"
                     android:layout_height="60dp"
                     android:text="New Button"
                     android:id="@+id/button"
                     android:src="@drawable/ic_fab"
                     android:background="@drawable/fab"
                     android:layout_alignParentBottom="true"
                     android:layout_alignParentRight="true"
                     android:layout_marginBottom="24dp"
                     android:layout_marginRight="24dp"/>

     </RelativeLayout>

 </LinearLayout>

Có thể vẽ fab.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="#ffa48bc0"/>
</shape>

Tạo kiểu styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#ff1d79b1</item>
        <item name="colorPrimaryDark">#ff084d95</item>
    </style>
</resources>

Kết quả là tương tự, nhưng không có bóng mờ, một đặc điểm của thiết kế material design:

Nút tác vụ nổi của lịch:

Nút tác vụ nổi của ứng dụng của tôi:

Làm cách nào để thêm bóng vào nút của tôi?

Tôi đã sử dụng độ cao thuộc tính, nhưng không hoạt động

Không còn cần thiết phải tạo FAB của riêng bạn cũng như sử dụng thư viện của bên thứ ba, nó đã được đưa vào AppCompat 22.

https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

Chỉ cần thêm thư viện hỗ trợ mới được gọi là thiết kế trong tệp gradle của bạn:

compile 'com.android.support:design:22.2.0'

... và bạn tốt để đi:

<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_happy_image" />

Tôi thường sử dụng các bảng có thể kéo xml để tạo bóng / độ cao trên một widget tiền kẹo mút. Ví dụ ở đây là một tệp có thể vẽ xml có thể được sử dụng trên các thiết bị tiền kẹo mút để mô phỏng độ cao của nút tác vụ nổi.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8px">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#08000000"/>
                <padding
                    android:bottom="3px"
                    android:left="3px"
                    android:right="3px"
                    android:top="3px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#09000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#10000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#11000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#12000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#13000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#16000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#17000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
    </layer-list>
</item>
<item>
    <shape android:shape="oval">
        <solid android:color="?attr/colorPrimary"/>
    </shape>
</item>
</layer-list>

Thay vào đó ?attr/colorPrimarybạn có thể chọn bất kỳ màu nào. Đây là ảnh chụp màn hình kết quả:

Có rất nhiều thư viện có thêm FAB (Nút hành động nổi) trong ứng dụng của bạn, Dưới đây là một số thư viện mà tôi biết.

makovkastar's FAB

FAB tổng hợp của futuersimple

Thư viện Material Design bao gồm cả FAB

Tất cả các thư viện này đều được hỗ trợ trên các thiết bị pre-lollipop, tối thiểu là api 8

Đây là một thư viện Nút hành động nổi miễn phí có bổ sung cho Android Nó có nhiều tùy chỉnh và yêu cầu SDK phiên bản 9 trở lên

Video Demo đầy đủ

@Justin Pollard mã xml hoạt động thực sự tốt. Ngoài ra, bạn có thể thêm hiệu ứng gợn sóng với các dòng xml sau.

    <item>
    <ripple
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:colorControlHighlight" >
        <item android:id="@android:id/mask">
            <shape android:shape="oval" >
                <solid android:color="#FFBB00" />
            </shape>
        </item>
        <item>
            <shape android:shape="oval" >
                <solid android:color="@color/ColorPrimary" />
            </shape>
        </item>
    </ripple>
</item>

Hãy thử thư viện này , nó hỗ trợ bóng, có minSdkVersion=7và cũng hỗ trợ android:elevationthuộc tính API-21ngầm.

Bài gốc ở đây .

Thêm phần đệm và độ cao:

 android:elevation="10dp"
 android:padding="10dp"