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

Я хотел бы создать плавающую кнопку действия (для добавления элементов в listview), например календарь 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>


стили стиль.xml



<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">#ff1d79b1</item>

        <item name="colorPrimaryDark">#ff084d95</item>

    </style>

</resources>


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



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



Calendar's floating action button



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



My app's floating action button



как я могу добавить затенение к моей кнопке?



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

714   7  

7 ответов:

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

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

просто добавьте новую библиотеку поддержки под названием design в свой gradle-файл:

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" />
98  
2015-06-16 11:28:12

Я обычно использовал XML-чертежи для создания тени/высоты на виджете pre-lollipop. Вот, например, XML-чертеж, который можно использовать на устройствах pre-lollipop для имитации высоты кнопки плавающего действия.

<?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 вы можете выбрать любой цвет. Вот скриншот результата:

enter image description here

43  
2014-12-16 05:11:40

есть куча библиотек там добавить FAB (плавающая кнопка действия) в вашем приложении, вот несколько из них я знаю.

makovkastar по ВСБ

композитный FAB futuersimple

библиотека дизайна материалов, которая включает в себя FAB too

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

20  
2014-12-05 16:19:38

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

enter image description here

Полное Демо-Видео

8  
2016-10-30 23:24:57

@ Justin Pollard xml-код работает очень хорошо. В качестве примечания вы можете добавить эффект пульсации со следующими строками 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>
4  
2015-04-12 07:50:29

попробовать библиотека, он поддерживает тень, то есть minSdkVersion=7 и на API-21 неявно.

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

2  
2017-05-23 15:26:27

добавить отступ и высоту:

 android:elevation="10dp"
 android:padding="10dp"
0  
2014-11-17 01:22:42

Comments

    Ничего не найдено.
Click here to cancel reply.