android - programacion - ¿Sin sombra por defecto en la barra de herramientas?

personalizar barra de estado android

Question

Estoy actualizando mi aplicación con la nueva barra de herramientas de la biblioteca de soporte v21. Mi problema es que la barra de herramientas no proyecta ninguna sombra si no configuro el atributo "elevación". ¿Es ese el comportamiento normal o estoy haciendo algo mal?

Mi código es:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical">

   <android.support.v7.widget.Toolbar
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/my_awesome_toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="?attr/colorPrimary"
       android:elevation="4dp"
       android:minHeight="?attr/actionBarSize"
       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

   <FrameLayout
       android:id="@+id/FrameLayout1"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       .
       .
       .

Y en mi Actividad - Método OnCreate:

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);

Answer 1

Mi problema es que la barra de herramientas no proyecta ninguna sombra si no configuro el atributo "elevación". ¿Es ese el comportamiento normal o estoy haciendo algo mal?

Ese es el comportamiento normal. Consulte también las preguntas frecuentes al final de esta publicación .

Answer 2

Estaba jugando con esto durante horas, esto es lo que funcionó para mí.

Elimine todos los atributos de elevation de los widgets appBarLayout y Toolbar (incluidos styles.xml si está aplicando algún estilo).

Ahora dentro de la actividad, aplique la elvation en su actionBar :

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setElevation(3.0f);

Esto debería funcionar.

Answer 3

Esto me funcionó muy bien:

<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

Google lanzó la biblioteca de soporte de diseño hace unas semanas y hay una solución ingeniosa para este problema en esta biblioteca.

Agregue la biblioteca de soporte de diseño como una dependencia en build.gradle :

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

Agregue AppBarLayout suministrado por la biblioteca como un contenedor alrededor del diseño de su Toolbar para generar una sombra AppBarLayout .

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

Aquí está el resultado:

Hay muchos otros trucos con la biblioteca de soporte de diseño.

1. http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
2. http://android-developers.blogspot.in/2015/05/android-design-support-library.html

AndroidX

Como arriba pero con dependencia:

implementation ''com.google.android.material:material:1.0.0''

y com.google.android.material.appbar.AppBarLayout

Answer 5

La mayoría de las soluciones funcionan bien aquí. Me gustaría mostrar otra alternativa similar:

gradle:

implementation ''androidx.appcompat:appcompat:1.0.0-rc02''
implementation ''com.google.android.material:material:1.0.0-rc02''
implementation ''androidx.core:core-ktx:1.0.0-rc02''
implementation ''androidx.constraintlayout:constraintlayout:1.1.3''

Su diseño puede tener una Vista de barra de herramientas y una sombra para ello, a continuación, similar a esto (necesita modificación, por supuesto):

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:titleTextAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"/>

    <include
        layout="@layout/toolbar_action_bar_shadow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

res / drawable-v21 / toolbar_action_bar_shadow.xml

<androidx.appcompat.widget.AppCompatImageView
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="wrap_content" android:src="@drawable/msl__action_bar_shadow"/>

res / drawable / toolbar_action_bar_shadow.xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:foreground="?android:windowContentOverlay" tools:ignore="UnusedAttribute"/>

res / drawable / msl__action_bar_shadow.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:dither="true"
            android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:endColor="#00000000"
                android:startColor="#33000000" />

            <size android:height="10dp" />
        </shape>
    </item>

</layer-list>

styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar as Toolbar)
    }
}

Muestra completa here , como he notado, el IDE tiene el error de decir que el atributo de foreground es demasiado nuevo para usarlo aquí.

Answer 6

La respuesta correcta será agregar
android: backgroundTint = "# ff00ff" a la barra de herramientas con android: background = "@ android: color / white"

Si usa otro color, entonces blanco para el fondo, eliminará la sombra. ¡Buen Google!

Answer 7

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 ubicada debajo de la barra de herramientas.

@ diseño / barra de herramientas

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/blue"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

<View
    android:id="@+id/toolbar_shadow"
    android:layout_width="match_parent"
    android:layout_height="3dp"
    android:background="@drawable/toolbar_dropshadow" />

@ drawable / toolbar_dropshadow

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="@android:color/transparent"
        android:endColor="#88333333"
        android:angle="90"/> </shape>

en el diseño de su actividad <include layout="@layout/toolbar" />

Answer 8

Para 5.0 +: puede usar AppBarLayout con Toolbar. AppBarLayout tiene un atributo de "elevación".

 <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:elevation="4dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <include layout="@layout/toolbar" />
    </android.support.design.widget.AppBarLayout>

Answer 9

Si está configurando la ActionBar ToolBar como ActionBar , simplemente llame:

getSupportActionBar().setElevation(YOUR_ELEVATION);

Nota: Esto debe llamarse después de setSupportActionBar(toolbar);

Answer 10

También puede hacer que funcione con RelativeLayout . Esto reduce un poco la anidación del diseño;)

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar" />

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_below="@id/toolbar"
        android:background="@drawable/toolbar_shadow" />
</RelativeLayout>

Answer 11

Terminé configurando mi propia sombra paralela para la barra de herramientas, pensé que podría ser útil para cualquiera que la buscara:

<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:layout_gravity="top"
              android:orientation="vertical">

    <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
                                       android:layout_width="match_parent"
                                       android:layout_height="wrap_content"
                                       android:background="@color/color_alizarin"
                                       android:titleTextAppearance="@color/White"
                                       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <FrameLayout android:layout_width="match_parent"
                 android:layout_height="match_parent">

        <!-- **** Place Your Content Here **** -->

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

    </FrameLayout>

</LinearLayout>

@ drawable / toolbar_dropshadow:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="rectangle">

    <gradient android:startColor="@android:color/transparent"
              android:endColor="#88333333"
              android:angle="90"/>

</shape>

@ color / color_alizarin

<color name="color_alizarin">#e74c3c</color>

Answer 12

Todo lo que necesitas es un android:margin_bottom igual al android:elevation valor de android:elevation . No se AppBarLayout , clipToPadding , etc.

Ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:layout_marginBottom="4dp"
    android:background="@android:color/white"
    android:elevation="4dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--Inner layout goes here-->

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>

Answer 13

Tuve un problema similar con la sombra. La sombra es dibujada por el padre directo de AppBarLayout en mi caso. Si la altura del padre es la misma que la de AppBarLayout, no se puede dibujar la sombra. Por lo tanto, verificar el tamaño del diseño principal y quizás la nueva versión del diseño puede resolver el problema. https://www.reddit.com/r/androiddev/comments/6xddb0/having_a_toolbar_as_a_fragment_the_shadow/

Answer 14

Use las carpetas / values para aplicar el estilo de sombra correcto según la versión del sistema operativo.

Para dispositivos con menos de 5.0 , use /values/styles.xml para agregar windowContentOverlay al cuerpo de su actividad:

<style name="MyViewArea">
    <item name="android:foreground">?android:windowContentOverlay</item>
</style>

<style name="MyToolbar">
    <item name="android:background">?attr/colorPrimary</item>
</style>

Luego agregue su propia sombra personalizada cambiando su Tema para incluir:

<item name="android:windowContentOverlay">@drawable/bottom_shadow</item>

Puede obtener el recurso sombra de la aplicación IO de Google aquí: https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png

Para dispositivos 5.0 y posteriores , use /values-v21/styles.xml para agregar elevación a su barra de herramientas utilizando un estilo de encabezado personalizado:

<style name="MyViewArea">
</style>

<style name="MyToolbar">
    <item name="android:background">?attr/colorPrimary</item>
    <item name="android:elevation">4dp</item>
</style>

Tenga en cuenta que en el segundo caso, tuve que crear un estilo MyViewArea vacío para que no se mostrara también windowContentOverlay .

[Actualización: cambiaron los nombres de los recursos y agregaron Google shadow.]

Answer 15

actionbar_background.xml

    <item>
        <shape>
            <solid android:color="@color/black" />
            <corners android:radius="2dp" />
            <gradient
                android:startColor="@color/black"
                android:centerColor="@color/black"
                android:endColor="@color/white"
                android:angle="270" />
        </shape>
    </item>

    <item android:bottom="3dp" >
        <shape>

            <solid android:color="#ffffff" />
            <corners android:radius="1dp" />
        </shape>
    </item>
</layer-list>

agregar al fondo actionbar_style

<style name="Theme.ActionBar" parent="style/Widget.AppCompat.Light.ActionBar.Solid">
    <item name="background">@drawable/actionbar_background</item>
    <item name="android:elevation">0dp</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:layout_marginBottom">5dp</item>

nombre = "displayOptions"> useLogo | showHome | showTitle | showCustom

agregar a Basetheme

<style name="BaseTheme" parent="Theme.AppCompat.Light">
   <item name="android:homeAsUpIndicator">@drawable/home_back</item>
   <item name="actionBarStyle">@style/Theme.ActionBar</item>
</style>

Answer 16

yo añadí

<android.support.v7.widget.Toolbar
...
android:translationZ="5dp"/>

en la descripción de la barra de herramientas y funciona para mí. Usando 5.0+