android - programacion - Recorte de sombra del botón de acción flotante en los márgenes de vista

manual programacion android español pdf

Question

Tengo un botón de acción flotante anclado en la parte inferior derecha de un diseño de coordinador. Está a 16 pd de los márgenes de la vista (los márgenes se incluyen de forma predeterminada y se especifican en el archivo dimens.xml ), pero su sombra es un recorte y tiene una apariencia de forma cuadrada (ver más abajo). Cuando muevo el botón de acción flotante a 32dp desde los márgenes de la vista, su sombra se muestra correctamente.

He intentado establecer su atributo de elevación ( android:elevation="5dp" ), pero parece que no tiene ningún efecto. También he intentado establecer el atributo borderWidth en 0 ( app:borderWidth="0dp" ) pero tampoco tuvo ningún efecto.

¿Hay alguna razón por la que el botón de acción flotante se comporte de esta manera?

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>

Imágenes

Answer 1

El problema es que un padre recorta la sombra . Busque el padre que está recortando la sombra (no es necesariamente el siguiente en la jerarquía) y agregue esto a la vista en el xml.

android:clipChildren="false"

He estado probando esto ahora mismo, eliminando y agregando esa línea al padre que estaba recortando la vista y está funcionando bien.

Agregar otros contenedores o cambiar los márgenes es una solución que no recomiendo. Es demasiado irregular. Las mini fábricas tienen diferentes tamaños de contenedores y requieren diferentes tamaños según el nivel de API (<21 o> = 21).

Answer 2

He añadido esto a la vista principal :

android:clipToPadding="false"

Answer 3

Tenía un problema similar. Haz 2 cosas:

1. En android.support.design.widget.CoordinatorLayout elimine android:paddingRight="@dimen/activity_horizontal_margin" y android:paddingBottom="@dimen/activity_vertical_margin"

2. En android.support.design.widget.FloatingActionButton agregue android:layout_marginRight="@dimen/activity_horizontal_margin" y android:layout_marginBottom="@dimen/activity_horizontal_margin"

Como explicación = FAB no tenía lugar para mostrar la sombra, y debido a esto, no la has visto completamente.

Answer 4

Yo también tuve el mismo problema. Pero no podía tirar mis valores de margen por el bien de la FAB . Así que agregué otra capa en la jerarquía y esto me ayudó a conseguir que la FAB se colocara exactamente donde quería sin interrumpir al padre. Así que ahora tengo un CoordinatorLayout dentro de un CoordinatorLayout por el bien de la FAB . El siguiente es mi archivo de diseño modificado.

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