Der Schattenbeschnitt der schwebenden Aktionsknöpfe bei Ansichtsrändern

Question

Ich habe eine schwebende Aktionsschaltfläche, die unten rechts in einem Koordinatorlayout verankert ist. Es ist 16dp von den Rändern der Ansicht entfernt (die Ränder sind standardmäßig enthalten und in der Datei dimens.xml angegeben), aber sein Schatten ist Clipping und hat ein quadratisches Aussehen (siehe unten). Wenn ich die Floating-Aktion-Schaltfläche von den Rändern der Ansicht auf 32 dpi verschiebe, wird ihr Schatten ordnungsgemäß angezeigt. Ich möchte, dass der Floating-Action-Button 16dp vom Rand entfernt ist und seinen Schatten richtig anzeigt.

Ich habe versucht, seine Höhe Attribut (android:elevation="5dp"), aber das scheint keine Wirkung haben. Ich habe auch versucht, das Attribut borderWidth auf 0 (app:borderWidth="0dp") zu setzen, aber das hatte auch keine Wirkung.

Gibt es einen Grund, warum sich der Floating-Action-Button so verhält?

XML

<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/coordinator_layout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context=".MainActivity"> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/create_floating_action_button" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="@drawable/ic_create_white_48dp" 
     app:layout_anchor="@id/coordinator_layout" 
     app:layout_anchorGravity="bottom|right" /> 

</android.support.design.widget.CoordinatorLayout> 

Bilder

Answer 1

Das Problem ist ein Elternteil Clipping den Schatten. Suchen Sie nach dem Elternelement, das den Schatten beschneidet (ist nicht notwendigerweise der nächste in der Hierarchie), und fügen Sie dies der Ansicht in der XML-Datei hinzu.

Ich habe dies gerade getestet und entfernen und fügen Sie diese Zeile zu den Eltern, die die Ansicht abgeschnitten und funktioniert gut.

Das Hinzufügen eines anderen Containers oder das Ändern der Ränder ist ein Workaround, den ich nicht empfehle. Es ist zu lückenhaft. Die Minifabs haben unterschiedliche Behältergrößen und benötigen je nach API-Level unterschiedliche Größen (< 21 oder> = 21).

Answer 2

Hatte ähnliches Problem. Machen Sie 2 Dinge:

1. In android.support.design.widget.CoordinatorLayout entfernen android:paddingRight="@dimen/activity_horizontal_margin" und android:paddingBottom="@dimen/activity_vertical_margin"

2. In android.support.design.widget.FloatingActionButton hinzufügen android:layout_marginRight="@dimen/activity_horizontal_margin" und android:layout_marginBottom="@dimen/activity_horizontal_margin"

Als Erklärung = FAB ddidn't Platz haben Schatten angezeigt werden, und durch dazu hast du es nicht vollständig gesehen.

Answer 3

Ich hatte auch das gleiche Problem. Aber ich konnte nicht einfach meine Margin-Werte wegen der FAB wegwerfen. Also habe ich eine weitere Ebene in der Hierarchie hinzugefügt und das hat mir geholfen, die FAB genau dorthin zu bringen, wo ich wollte, ohne die Eltern zu stören. So, jetzt habe ich eine CoordinatorLayout innerhalb einer CoordinatorLayout wegen der FAB. Das Folgende ist meine modifizierte Layout-Datei.

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/ddd" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:background="@drawable/tile" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.CoordinatorLayout 
     android:id="@+id/fff" 
     android:padding="10dp" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <ScrollView 
      android:id="@+id/scroll_container" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

      <!-- All my views under a LinearLayout parent --> 

     </ScrollView> 

    </android.support.design.widget.CoordinatorLayout> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fabAdd" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:contentDescription="Add Text" 
     android:visibility="visible" 
     android:layout_margin="10dp" 
     app:backgroundTint="@color/primary" 
     app:layout_anchor="@+id/fff" 
     app:layout_anchorGravity="bottom|right|end"/> 

</android.support.design.widget.CoordinatorLayout>