Como criar um botão de ação flutuante ( FAB) no android, usando AppCompat v21 ?

? Salvuccio96 @ | Original: StackOverFlow
---

Gostaria de criar um botão de ação flutuante ( para adicionar itens a uma listview ), como o Google Calendar, mantendo a compatibilidade com pré- pirulito versões do Android (antes 5,0).

Eu criei este esquema :

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

Fab.xml Drawable :

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

estilo styles.xml

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

O resultado é semelhante, mas não é o sombreamento, uma característica do material de concepção :

Botão de ação flutuante do Calendário:

Como criar um botão de ação flutuante ( FAB) no android, usando AppCompat v21 ?

Botão de ação flutuante do meu app:

Como criar um botão de ação flutuante ( FAB) no android, usando AppCompat v21 ?

Como posso adicionar o sombreamento para meu botão ?

Eu já usei a elevação atributo, mas não funciona

---

Top 5 Responder

1user3249477 @

Adicionar estofamento e elevação :

 android:elevation="10dp"
 android:padding="10dp"
2Oleksii Kropachov @

Tente https://github.com/shamanland/floating-action-button, ele suporta sombra, há minSdkVersion=7 e também suporta android:elevation atributo para API-21 implicitamente .

Original post é http://stackoverflow.com/a/25739038/1891118 .

3QAMAR @

Há um grupo de bibliotecas lá fora, adicione um (Button Ação Flutuante ) FAB em seu aplicativo, Aqui estão alguns deles eu sei.

https://github.com/makovkastar/FloatingActionButton

https://github.com/futuresimple/android-floating-action-button

https://github.com/navasmdc/MaterialDesignLibrary

Todas essas bibliotecas são suportados em dispositivos de pré- pirulito, mínimo a api 8

4Justin Pollard @

Eu geralmente usado drawables XML para criar sombra / elevação em um widget pré- pirulito. Aqui, por exemplo, susceptível de ser estirado é um xml que pode ser usado em dispositivos de pré - pirulito para simular a elevação do botão de acção flutuante .

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

Em lugar de ?attr/colorPrimary você pode escolher qualquer cor. Aqui está uma imagem do resultado:

Como criar um botão de ação flutuante ( FAB) no android, usando AppCompat v21 ?

5Shell Software @

Aqui é um adicional livre https://github.com/shell-software/fab Tem muitas personalizações e requer SDK versão 9 e superior

Como criar um botão de ação flutuante ( FAB) no android, usando AppCompat v21 ?

https://www.youtube.com/watch?v=skSApXvi4xM