Ritaglio dell'ombra del pulsante di azione mobile ai margini della vista

Question

Ho un pulsante di azione mobile ancorato in basso a destra nel layout di un coordinatore. È 16dp dai margini della vista (i margini sono inclusi per impostazione predefinita e specificati nel file dimens.xml), ma la sua ombra è ritagliata e ha un aspetto a forma quadrata (vedere sotto). Quando sposto il pulsante di azione mobile a 32 dpi dai margini della vista, la sua ombra viene visualizzata correttamente. Vorrei che il pulsante di azione fluttuante fosse 16dp dal margine e visualizzasse correttamente la sua ombra.

Ho provato a impostare l'attributo di elevazione (android:elevation="5dp"), ma sembra non avere alcun effetto. Ho anche provato a impostare l'attributo borderWidth su 0 (app:borderWidth="0dp") ma ciò non ha avuto alcun effetto.

C'è un motivo per cui il pulsante di azione fluttuante si comporta in questo modo?

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> 

Immagini

Answer 1

Il problema è un genitore ritaglio l'ombra. Cerca il genitore che ritaglia l'ombra (non è necessariamente il successivo nella gerarchia) e aggiungilo alla vista nell'xml.

android:clipChildren="false" 

Ho testato questo momento la rimozione e l'aggiunta di quella linea al genitore che è stato clipping la vista e sta lavorando bene.

L'aggiunta di altri contenitori o la modifica dei margini è una soluzione che non raccomando. È troppo irregolare. I mini fab hanno diverse dimensioni di contenitore e richiedono dimensioni diverse a seconda del livello API (< 21 o> = 21).

Answer 2

Had problema simile. Fai 2 cose:

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

2. In android.support.design.widget.FloatingActionButton aggiungere android:layout_marginRight="@dimen/activity_horizontal_margin" e android:layout_marginBottom="@dimen/activity_horizontal_margin"

Come spiegazione = FAB ddidn't hanno luogo per visualizzare l'ombra, e grazie a questo, non l'hai visto completamente.

Answer 3

Anche io ho avuto lo stesso problema. Ma non potevo semplicemente buttare via i miei valori di margine per il bene dello FAB. Così ho aggiunto un altro livello nella gerarchia e questo mi ha aiutato a far posizionare lo FAB esattamente dove volevo senza interrompere il genitore. Così ora ho uno CoordinatorLayout all'interno di uno CoordinatorLayout per il valore di FAB. Il seguente è il mio file di layout modificato.

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