android - Appcompat v21 Toolbar elevation pre-lollipop

shadow android-5.0-lollipop

Question

En primer lugar, sé que esta pregunta se ha formulado antes, pero no se ha respondido antes. Espero que alguien me pueda dar una respuesta.

En mi aplicación, utilizo la barra de herramientas de Appcompat_v7 (API 21). Este es mi código:

<android.support.v7.widget.Toolbar
    style="@style/DarkActionbarStyle"
    android:id="@+id/toolBar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/actionbar_height" />

Y este es el estilo ToolBar que uso:

<style name="DarkActionbarStyle" parent="@style/Widget.AppCompat.Toolbar">
    <item name="android:background">?attr/colorPrimary</item>
    <item name="titleTextAppearance">@style/ActionBarTitle</item>
    <item name="android:elevation">2dp</item>
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
    <item name="theme">@style/ThemeActionBarDark</item>
</style>

<style name="ThemeActionBarDark" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="actionBarItemBackground">@drawable/btn_dark_orange</item>
    <item name="selectableItemBackground">@drawable/btn_dark_orange</item>
</style>

El problema es que esa elevación no funciona antes de la piruleta. Entonces mi pregunta es: ¿es posible tener una sombra debajo de la barra de herramientas en dispositivos pre-piruletas?

Answer 1

Como he tenido problemas con el método del widget CardView, he utilizado el método FrameLayout tal como lo menciona @Sniper; está funcionando perfectamente!

Solo quería compartir el fragmento de código que deberás usar. Simplemente ponga esto directamente debajo de la barra de herramientas donde comienza su contenido principal:

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:foreground="?android:windowContentOverlay">

Y no te olvides de cerrar con:

</FrameLayout>

Answer 2

Es posible tener sombras reales, animadas y generadas. El método utilizado por Lollipop está disponible desde Froyo. La aceleración de hardware utilizada para la generación de sombras está disponible desde Honeycomb, supongo. Así es como funciona:

• dibuje su vista a un mapa de bits fuera de la pantalla con LightingColorFilter establecido en 0,0
• difumine la forma negra (el mapa de bits fuera de la pantalla) utilizando la clase ScriptIntrinsicBlur y el valor de elevación como radio
• dibuja el mapa de bits debajo de la vista

Requiere agregar atributos de elevación personalizados, vistas personalizadas capaces de renderizar sombras y usar el script de renderizado y la biblioteca de compatibilidad (para dispositivos más antiguos). No voy a profundizar en los detalles, porque hay muchos que incluyen problemas con la compilación y optimizaciones de rendimiento menores. Pero es posible.

¿Por qué no hay sombras en la biblioteca de soporte oficial?

• requeriría cambios en el marco de la interfaz de usuario, ya que es imposible dibujar libremente fuera de los límites de la vista
• animación suave requiere una GPU bastante buena

Ver:

• https://www.youtube.com/watch?v=jbU4SXblO5s
• https://androidreclib.wordpress.com/2014/11/25/lollipops-shadows-on-gingerbread/
• https://github.com/ZieIony/Carbon

Answer 3

Esto funcionó muy bien para mí:

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primary"
    card_view:cardElevation="4dp"
    card_view:cardCornerRadius="0dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:minHeight="?attr/actionBarSize" />

</android.support.v7.widget.CardView>

Answer 4

Estoy usando esta answer :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/orange"
    android:titleTextAppearance="@color/White"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@drawable/toolbar_shadow" />
</LinearLayout>

toolbar_shadow.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#3f3f3f"
        android:endColor="@android:color/transparent"
        android:angle="270" />
</shape>

Answer 5

La solución con el fin de agregar una sombra manualmente funcionaría siempre que no haya menús de la barra de acciones. De ser así, la vista de sombras se detendría antes de los iconos de la barra de acciones.

Creo que es más fácil tener un diseño lineal vertical con la barra de aplicaciones en la parte superior y una vista de la sombra debajo de él como el siguiente elemento de diseño lineal o en mi caso, es

<LinearLayout Vertical> 
  <v7 toolbar/>
  <RelativeLayout>
     <View for shadow with alignParent_top= true/>
      ....
  </RelativeLayout>
</LinearLayout>

Realmente espero que la aplicación para el futuro próximo Compat lo solucione.

Answer 6

No puede usar el atributo de elevación antes de API 21 (Android Lollipop). Sin embargo, puede agregar la sombra mediante programación, por ejemplo, utilizando una vista personalizada situada debajo de la Toolbar .

Por ejemplo:

<ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        android:background="@drawable/shadow"/>

Donde la sombra es dibujable con un degradado negro.

Answer 7

Otra opción es la siguiente biblioteca que proporciona 9 sombras de parche, como la aplicación iosched, android-materialshadowninepatch

Answer 8

Para mostrar la sombra debajo de la barra de herramientas, use AppBarLayout disponible en la Biblioteca de soporte de diseño de Google Android. Aquí hay un ejemplo de cómo debería usarse.

<android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
   <android.support.v7.widget.Toolbar
            android:layout_height="?attr/actionBarSize"
            android:layout_width="match_parent"/>
     </android.support.design.widget.AppBarLayout>

Para utilizar la Biblioteca de soporte de diseño de Android de Google, ingrese lo siguiente en su archivo build.gradle:

 compile ''com.android.support:design:22.2.0''

Answer 9

Puede volver a agregar la sombra (elevación) usando FrameLayout con foreground="?android:windowContentOverlay" . El atributo de elevación no es compatible antes de Lollipop. Entonces, si está utilizando FrameLayout como contenedor de fragmento, simplemente añádale un atributo de primer plano.

Answer 10

Usar el contenedor CardView para la barra de herramientas es una mala idea.

CardView es pesado, especialmente para dispositivos de gama baja.

La mejor manera es colocar una vista sombreada de degradado debajo de la barra de herramientas. La vista de sombras debe ser un elemento directo del diseño del coordinador. es decir. La barra de aplicaciones que contiene la barra de herramientas y la vista sombreada deben ser hermanos.

Agregue este componente de vista a su diseño.

 <View
    android:id="@+id/gradientShadow"
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:background="@drawable/toolbar_shadow"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:layout_collapseMode="pin"/>

La barra de herramientas drawable_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
<gradient
    android:angle="90"
    android:endColor="#33333333"
    android:startColor="@android:color/transparent"/>
</shape>

Esto resolverá los problemas en dispositivos pre-piruletas. Pero no queremos esta sombra en lollipop ni en dispositivos superiores para hacer visible la visibilidad en dispositivos con piruletas y superiores.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        findViewById(R.id.gradientShadow).setVisibility(View.GONE);
    }

Hecho.