tutorial - Sombra proyectada sobre LinearLayout utilizando Android: elevación

material design android pdf

Question

Tengo este LinearLayout que se colocará en la parte inferior de un diseño de actividad. Quiero que este LinearLayout tenga una elevación de 4dp, al igual que la barra de herramientas superior, sin embargo, dado que android:elevation coloca la sombra debajo del componente ui y este componente específico (linearLayout) estará en la parte inferior de la pantalla, I no verá ninguna elevación en absoluto ..

Este es mi código LinearLayout , y una imagen de él con la elevación predeterminada implementada:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="3"
    android:background="@android:color/transparent"
    android:orientation="horizontal"
    android:elevation="4dp"
    android:layout_alignParentBottom="true">

    <ImageButton
        android:id="@+id/playButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="center"
        android:clickable="true"
        android:background="@drawable/bottom_toolbar_menu_selector"
        android:src="@drawable/ic_play"
        style="?android:attr/borderlessButtonStyle" />

    <ImageButton
        android:id="@+id/stopButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="center"
        android:clickable="true"
        android:background="@drawable/bottom_toolbar_menu_selector"
        android:src="@drawable/ic_stop"
        style="?android:attr/borderlessButtonStyle" />

    <ImageButton
        android:id="@+id/bookmarkButton"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="center"
        android:clickable="true"
        android:background="@drawable/bottom_toolbar_menu_selector"
        android:src="@drawable/ic_bookmark"
        style="?android:attr/borderlessButtonStyle" />

</LinearLayout>

¿Hay alguna forma, usando la elevation para colocar una sombra en la parte superior del componente ui? ¡Gracias por adelantado!

Answer 1

Intente esto. No puedo establecer el fondo a través de xml, luego probé la forma programática de resolver eso y trabajo perfectamente. Refiérase a esto si se enfrenta un problema en la sombra de la presentación en diseño lineal.

lprofile.setBackgroundResource(R.drawable.background_with_shadow);

lprofile es mi referencia de diseño lineal y background_with_shadow es xml para aplicar la sombra. Espero que lo haga por su requerimiento ... gracias.

Answer 2

Teóricamente no puedes hacerlo con android:elevation , en el sentido de que no puedes elegir la dirección en la que se va a proyectar la sombra.

Hay dos soluciones.

1. Drawables

Por ejemplo, podría poner un ImageView justo encima de su diseño y configurar android:src="@drawable/shadow" . Este debe ser un GradientDrawable vertical definido en XML, como se explica here .

2. Solución

Mientras que la mayor parte de la sombra está realmente debajo de la vista, una sombra sutil también está arriba. Una solución podría estar usando un valor muy alto para la elevation , como 40dp : la parte inferior se 40dp debido a su diseño, mientras que la parte superior se expandirá y se verá como una sombra común.

En cualquier caso, no tiene control sobre el valor de elevación en dp , en el sentido de que no puede estar seguro de que su sombra es equivalente a la que emite android:elevation=4dp .

Answer 3

utilizar como como

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="205dp"
    android:background="@color/white"
    android:orientation="horizontal">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="-5dp"
        android:background="@color/white"
        android:elevation="3dp"
        android:paddingTop="5dp">

        // CHILD VIEWS
    </RelativeLayout>
</LinearLayout>