Как создать кнопку плавающего действия (FAB) в android, используя AppCompat v21?

Я хотел бы создать кнопку плавающего действия (для добавления элементов в список), например, календарь Google, поддерживая совместимость с версиями Android до версии lollipop (до 5.0).

Я создал этот макет:

Активность 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>

Drawable 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>

Стиль styles.xml

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

Результат схож, но нет затенения, характерного для материального дизайна:

Кнопка плавающего действия в календаре:

Мое приложение с плавающей кнопкой:

Как добавить штриховку к моей кнопке?

Я уже использовал возвышение атрибута, но не работает

Ответ 1

Больше нет необходимости создавать свой собственный FAB или использовать стороннюю библиотеку, он был включен в AppCompat 22.

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

Просто добавьте новую библиотеку поддержки, называемую design, в ваш gradle -file:

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

... и вам хорошо идти:

<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" />

Ответ 2

Я обычно использовал xml drawables для создания тени/возвышения на виджетах перед леденцом. Здесь, например, является xml drawable, который можно использовать на устройствах с предварительным лепестком для имитации повышения высоты плавающего действия.

<?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>

Вместо ?attr/colorPrimary вы можете выбрать любой цвет. Вот скриншот результата:

Ответ 3

Есть множество библиотек, которые добавили в ваше приложение FAB (Floating Action Button). Вот несколько из них, которые я знаю.

makovkastar FAB

futuersimple Composite FAB

Библиотека материалов, которая включает в себя также FAB

Все эти библиотеки поддерживаются на предустановленных устройствах, минимум до api 8

Ответ 4

Вот одна бесплатная бесплатная Библиотека кнопок с плавающей запятой для Android Он имеет множество настроек и требует SDK версии 9 и выше

Полное демо-видео

Ответ 5

@Justin Pollard xml code работает очень хорошо. В качестве дополнительной заметки вы можете добавить эффект пульсации со следующими строками xml.

    <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>

Ответ 6

Попробуйте эту библиотеку, она поддерживает тень, есть minSdkVersion=7, а также поддерживает android:elevation атрибут для API-21 неявно.

Оригинальное сообщение здесь.

Ответ 7

Добавить добавление и высоту:

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