sombrear - Android: la elevación solo tiene efectos de sombra en la parte inferior, ¿cómo hacer que los efectos de sombra se muestren en la parte superior?

sombra en photoshop cc

Question

Utilizo un framelayout en la parte inferior de una actividad, para mostrar los efectos de sombra en el fragmento, agrego android: elevación. Pero los efectos de sombra solo aparecen en la parte inferior, no en la parte superior, ¿alguien podría darme algún consejo?

<FrameLayout
    android:id="@+id/bottom_container"
    android:background="#00737f"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_gravity="bottom"
    android:elevation="4dp"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="50dp"/>

Answer 1

Hay un truco que se puede usar para mostrar una sombra sobre una vista.

Básicamente, tenemos que usar dos diseños anidados, donde el diseño externo proyecta la sombra con una elevation y el diseño interno establece el background . Luego, al establecer un padding en el Diseño exterior, podemos desplazar el Diseño interno hacia abajo, sin mover la sombra, por lo que se hace visible más sombra:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="50dp"
    android:elevation="4dp"
    android:outlineProvider="bounds"
    android:paddingTop="2dp"
    android:layout_marginTop="-2dp">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00737f">

        <!-- content -->

    </FrameLayout>

</FrameLayout>

Una cosa importante aquí es el atributo outlineProvider , que se requiere para hacer que el diseño externo proyecte una sombra incluso sin tener un conjunto de fondo.

Además, especificamos un margin negativo para compensar el desplazamiento creado por el relleno. Dependiendo del caso de uso podemos omitir eso.

Pero atención: si cambiamos la vista demasiado, algunos artefactos de renderización se vuelven visibles:

^{Fuente de este ejemplo en Github}