web-dev-qa-db-fra.com

Bouton d'action flottant coupant l'ombre aux marges de la vue

J'ai un bouton d'action flottant ancré en bas à droite d'une mise en page de coordinateur. Il est à 16dp des marges de la vue (les marges sont incluses par défaut et spécifiées dans le fichier dimens.xml), mais son ombre est découpée et a une apparence de forme carrée (voir ci-dessous). Lorsque je déplace le bouton d'action flottante sur 32dp depuis les marges de la vue, son ombre s'affiche correctement.

J'ai essayé de définir son attribut altitude (Android:elevation="5dp"), mais cela ne semble avoir aucun effet. J'ai également essayé de définir l'attribut borderWidth à 0 (app:borderWidth="0dp"), mais cela n'a également eu aucun effet.

Y a-t-il une raison pour que le bouton d'action flottante se comporte comme ceci?

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>

Images

 FAB 16dp from the margin.  FAB 32dp from the margin.

androidandroid-layoutshadowfloating-action-button
16
widmur

Le problème est un parent coupant l'ombre . Recherchez le parent qui coupe l'ombre (ce n'est pas nécessairement le suivant dans la hiérarchie) et ajoutez-le à la vue dans le fichier XML.

Android:clipChildren="false"

J'ai déjà testé cette option en supprimant et en ajoutant cette ligne au parent qui découpait la vue et fonctionnait correctement.

L'ajout d'un autre conteneur ou la modification des marges est une solution de contournement que je ne recommande pas. C'est trop inégale. Les mini-usines ont des tailles de conteneur différentes et nécessitent des tailles différentes en fonction du niveau de l'API (<21 ou> = 21).

27
Sotti

Avait un problème similaire. Faire 2 choses:

  1. Dans Android.support.design.widget.CoordinatorLayout supprimer Android:paddingRight="@dimen/activity_horizontal_margin" et Android:paddingBottom="@dimen/activity_vertical_margin"

  2. Dans Android.support.design.widget.FloatingActionButton, ajoutez Android:layout_marginRight="@dimen/activity_horizontal_margin" et Android:layout_marginBottom="@dimen/activity_horizontal_margin"

Comme explication = FAB n’a pas pu afficher d’ombre, et pour cette raison, vous ne l’avez pas vue complètement.

9
Mateusz Pryczkowski

Moi aussi j'ai eu le même problème. Mais je ne pouvais pas simplement jeter mes valeurs de marge au profit de la variable FAB. J'ai donc ajouté une autre couche dans la hiérarchie, ce qui m'a aidé à placer la FAB exactement là où je voulais, sans perturber le parent. Alors maintenant, j'ai une CoordinatorLayout dans une CoordinatorLayout dans l'intérêt de la FAB. Ce qui suit est mon fichier de mise en page modifié.

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