Wie erstelle ich mit AppCompat v21 eine schwebende Aktionsschaltfläche (FAB) in Android?

78

Ich möchte eine schwebende Aktionsschaltfläche (um Elemente zu einer Listenansicht hinzuzufügen) wie Google Kalender erstellen, um die Kompatibilität mit Android-Versionen vor Lollipop (vor 5.0) zu gewährleisten.

Ich habe dieses Layout erstellt:

Aktivität 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>

Style styles.xml

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

Das Ergebnis ist ähnlich, aber es gibt keine Schattierung, ein Merkmal des Materialdesigns:

Die schwebende Aktionstaste des Kalenders:

Die schwebende Aktionstaste des Kalenders

Die schwebende Aktionstaste meiner App:

Die schwebende Aktionstaste meiner App

Wie kann ich die Schattierung zu meiner Schaltfläche hinzufügen?

Ich habe das Attribut Elevation bereits verwendet, funktioniert aber nicht

android xml firespacexyz
quelle
1
Die Höhen-API ist nur für Lollipop verfügbar. Haben Sie ein Lollipop-Gerät ausprobiert?
Marc Plano-Lesay
2
Es ist wahrscheinlich Zeit, dass Sie eine der gegebenen Antworten akzeptieren.
Phantômaxx
Auf meinem 4.4.2 Samsung Galaxy S III ist der Schatten dank AppCompat tatsächlich da.
FractalBob

Antworten:

100

Es ist nicht mehr erforderlich, ein eigenes FAB zu erstellen oder eine Bibliothek eines Drittanbieters zu verwenden. Es wurde in AppCompat 22 aufgenommen.

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

Fügen Sie einfach die neue Unterstützungsbibliothek namens design in Ihre gradle-Datei ein:

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

... und du kannst loslegen:

<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" />
user1354603
quelle
1
Wie änderst du die Hintergrundfarbe?
Jjang
2
Standardmäßig ist die Hintergrundfarbe "colorAccent" aus Ihrem Thema. Sie können jedoch auch floatActionButton.setRippleColor (Farbe) verwenden. Lassen Sie sich vom Namen "Ripple" nicht abschrecken, er funktioniert auch auf Pre-Lollipop-Geräten.
user1354603
Ich habe keine FarbeAccent, und wenn ich eine hinzufüge und die Farbe auf etwas anderes setze, funktioniert es nicht - Farbe bleibt bei Grün / Türkis.
Jjang
Ich habe dafür einen Dritten benutzt. Hat mir sehr geholfen. Vielen Dank. Ein Problem dabei ist, dass es sich immer noch so anfühlt, als wäre es nicht vollständig entwickelt.
V_J
1
@Jjang @ user1354603 von docsThe background color of this view defaults to the your theme's colorAccent. If you wish to change this at runtime then you can do so via setBackgroundTintList(ColorStateList).
Muhammad Babar
43

Ich habe im Allgemeinen XML-Drawables verwendet, um Schatten / Höhen in einem Pre-Lollipop-Widget zu erstellen. Hier ist zum Beispiel eine XML-Zeichnung, die auf Pre-Lollipop-Geräten verwendet werden kann, um die Höhe der schwebenden Aktionstaste zu simulieren.

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

Anstelle von können ?attr/colorPrimarySie eine beliebige Farbe wählen. Hier ist ein Screenshot des Ergebnisses:

Geben Sie hier die Bildbeschreibung ein

Justin Pollard
quelle
1
Vielen Dank für das Teilen. Ich hatte Angst, den XML-Code erneut auszugraben, um ihn neu zu erstellen.
Cookster
Ich habe gerade implementiert und es ist großartig, es gibt nur eine seltsame Sache. Es scheint, dass beim Drehen des Telefons der Schatten / die Höhe verloren geht. Irgendwelche Gedanken dazu? Vielen Dank im Voraus Justin
Amilcar Andrade
@AmilcarAndrade das ist eine gute Frage. Ich habe ähnliche Dinge mit anderen XML-Drawables erlebt, aber ich habe tatsächlich eine Bitmap aus dem Drawable selbst extrahiert. Um das zu lösen, habe ich das Drawable im Wesentlichen als Singleton verwendet. einmal einstellen, damit es nicht wieder gezeichnet wird. Vielleicht können Sie das Drawable als statische Variable abrufen und in onCreate als Hintergrund festlegen?
Justin Pollard
Außerdem habe ich eine Erweiterung hinzugefügt, mit der Sie ganz einfach einen Dreifacheffekt hinzufügen können. Unten ist der Code.
Amilcar Andrade
2
Für zukünftige Referenzen, ist dies ein großartiges Beispiel für die Schatten und Erhebungen zu vermeiden -> curious-creature.com/2008/12/18/avoid-memory-leaks-on-android/...
Amilcar Andrade
4

@ Justin Pollard XML-Code funktioniert wirklich gut. Als Randnotiz können Sie mit den folgenden XML-Zeilen einen Ripple-Effekt hinzufügen.

    <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>
Amilcar Andrade
quelle
2

Probieren Sie diese Bibliothek aus , sie unterstützt Schatten, es gibt minSdkVersion=7und unterstützt auch android:elevationAttribute für API-21implizit.

Der ursprüngliche Beitrag ist hier .

Oleksii K.
quelle
0

Polsterung und Höhe hinzufügen:

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