¿Cómo cambiar el color de fondo de la barra de bocadillos?

7 minutos de lectura

avatar de usuario
Ajinkya

estoy mostrando snackbar en un DialogFragment dentro del toque positivo del cuadro de diálogo de alerta. Aquí está mi fragmento de código:

Snackbar snackbar = Snackbar.make(view, "Please enter customer name", Snackbar.LENGTH_LONG)
                .setAction("Action", null);
View sbView = snackbar.getView();
sbView.setBackgroundColor(Color.BLACK);
snackbar.show();

Como puede ver, el color de fondo de mis snackbars muestra el color blanco

Estoy pasando la vista de la DialogFragment al chiringuito. Quiero que el color de fondo sea negro. ¿Cómo puedo hacer esto? estoy devolviendo el alertDialog en el DialogFragment. Y el tema que estoy configurando para el cuadro de diálogo es el siguiente:

<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">

    <!-- Used for the buttons -->
    <item name="colorAccent">@color/accent</item>
    <!-- Used for the title and text -->
    <item name="android:textColorPrimary">@color/primary</item>
    <!-- Used for the background -->
    <item name="android:background">@color/white</item>
</style>

Aunque estoy configurando el color de fondo en blanco para el cuadro de diálogo, debería anularse configurando el color de fondo en el chiringuito.

  • http://www.technotalkative.com/part-3-styling-snackbar/

    – Doctor en Medicina

    1 de diciembre de 2015 a las 12:52

  • Intenté que ya no me ayudara… Estoy llamando a la barra de bocadillos desde el fragmento de diálogo + alertDialog en él y estoy pasando la vista de clic de botón positivo a la barra de bocadillos

    – Ajinkya

    1 de diciembre de 2015 a las 15:21

avatar de usuario
Dusan Dimitrijevic

Intente configurar el color de fondo de esta manera:

sbView.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.BLACK));

¡Funcionará al 100%!

  • puede que tenga que hacer snackBarView.getView().setBackgrondColor(ContextCompat.getColor(getActivity(), R.color.BLACK));

    – jaytj95

    6 mayo 2016 a las 14:41

  • Si encontró que esta página de Google y la solución anterior no funcionaron para usted, es posible que deba probar esta en su lugar: sbView.setBackgroundColor(getResources().getColor(R.color.BLACK))

    – modo

    19 de diciembre de 2017 a las 13:24


  • @modu Tenga en cuenta que getResources#getColor ha quedado obsoleto desde el nivel de API 23 (Marshmallow) y ContextCompat#getColor debe usarse en su lugar.

    – Edric

    9 de abril de 2018 a las 1:50

puedes hacerlo así

Snackbar snackbar;
snackbar = Snackbar.make(view, "Message", Snackbar.LENGTH_SHORT);
View snackBarView = snackbar.getView();
snackBarView.setBackgroundColor(yourColor);
TextView textView = (TextView) snackBarView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(textColor);
snackbar.show();

  • como puede ver, hice exactamente lo mismo pero no se muestra en color negro

    – Ajinkya

    1 de diciembre de 2015 a las 13:31

  • he usado lo mismo en uno de mis proyectos, intente mostrarlo en la actividad para probarlo, puede que no funcione debido al diálogo

    – Zubair Akber

    1 de diciembre de 2015 a las 16:24

  • ya está trabajando en la actividad, pero lo quiero en el fragmento de diálogo.

    – Ajinkya

    1 de diciembre de 2015 a las 16:49

  • creo que es por tu vista que lo estas pasando

    – Zubair Akber

    1 de diciembre de 2015 a las 17:07

avatar de usuario
ovejas de las sombras

Como ninguna de las otras respuestas proporcionó una anulación de estilo personalizado (que considero una de las formas de actualización más seguras para hacerlo), publico aquí mi solución.

Publico una solución que ya aborda el nuevo AndroidX (support design 28) tema.

Siempre que su aplicación use un ellos personalizado llamado MyAppTheme en tus AndroidManifest.xml:

<application
        android:name=".MyApplicationName"
        android:allowBackup="true"
        android:icon="@mipmap/icon"
        android:roundIcon="@mipmap/icon_round"
        android:label="@string/app_name"
        android:theme="@style/MyAppTheme">

Crear (si aún no lo has hecho) values/style.xml archivo que anula el tema utilizado por su aplicación:

<style name="MyAppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/myColorPrimary</item>
    <item name="colorPrimaryDark">@color/myColorPrimaryDark</item>
    <item name="colorAccent">@color/myColorAccent</item>
    <item name="snackbarStyle">@style/MySnackBarStyle</item>
</style>

<!-- snackbar style in res/values -->
<style name="MySnackBarStyle" parent="Widget.MaterialComponents.Snackbar">
    <item name="android:background">@color/mySnackbarBackgroundColor</item>
</style>

y proporciona tus colores en tu values/colors.xml expediente

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="myColorPrimary">#008577</color>
    <color name="myColorPrimaryDark">#00574B</color>
    <color name="myColorAccent">#D81B60</color>
    <color name="mySnackbarBackgroundColor">#D81B60</color>
</resources>

ACTUALIZACIÓN 2020

Como la solución anterior elimina la esquina redondeada del bocadillo porque al establecer el fondo de esta manera se usa el diseño heredado de la barra de bocadillos, si desea conservar el diseño del material, puede hacerlo.

  1. Si está apuntando a API 21+

reemplazar android:background con android:backgroundTint

<!-- snackbar style in res/values-21/ -->
<style name="MySnackBarStyle" parent="Widget.MaterialComponents.Snackbar">
    <item name="android:backgroundTint">@color/mySnackbarBackgroundColor</item>
</style>
  1. Si está apuntando a API MySnackbarStyle en res/valores-21/ carpeta y deje el estilo anterior (heredado) en su res/valores carpeta.

  2. Si está apuntando a API res/valores/ Por aquí:

<!-- snackbar style in res/values/ -->
<style name="MySnackBarStyle" parent="Widget.MaterialComponents.Snackbar">
    <item name="android:background">@drawable/my_snackbar_background</item>
</style>

y toma prestada tu my_snackbar_background desde el repositorio oficialPor aquí:

<!-- in res/drawable/ -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="4dp"/>
    <solid android:color="@color/mySnackbarBackgroundColor"/>
</shape>

EDITAR 2022:

Si solo desea cambiar una sola barra de refrigerios, y no en toda la aplicación, puede usar un ContextThemeWrapper de la siguiente manera;

ContextThemeWrapper ctw = new ContextThemeWrapper(this, R.style.CustomSnackbarTheme);
customSnackBar = Snackbar.make(ctw, view, "", Snackbar.LENGTH_LONG);

y en tu archivo de estilo

<style name="CustomSnackbarTheme">
    <item name="snackbarStyle">@style/MySnackBarStyle</item>
</style>

<style name="MySnackBarStyle" parent="Widget.MaterialComponents.Snackbar">
    <item name="android:background">@android:color/red</item>
</style>

Aquí hay un repositorio de juegos.

ingrese la descripción de la imagen aquí

  • Esta es la mejor y más limpia solución.

    – TrackDave

    9 de agosto de 2019 a las 10:52

  • Es cambiar el tamaño del snakbar

    – William

    20 de febrero de 2020 a las 13:38

  • Tenga en cuenta que su AppTheme debe heredar de Theme.MaterialComponents para compilar

    – A. Mamode

    8 de abril de 2020 a las 19:29

  • Gracias por my_snackbar_background. Sin él, Snackbar dibujaba con esquinas más redondeadas.

    – CoolMind

    25 mayo 2020 a las 15:55

  • Agregué un poco más de estilo en stackoverflow.com/a/62006413/2914140.

    – CoolMind

    26 de mayo de 2020 a las 8:35

avatar de usuario
phil

Versión de Kotlin (con un extensión) :

Cree en un archivo (por ejemplo, SnackbarExtension.kt) una extensión:

fun Snackbar.withColor(@ColorInt colorInt: Int): Snackbar{
   this.view.setBackgroundColor(colorInt)
   return this
}

A continuación, en su Actividad/Fragmento, podrá hacer esto:

Snackbar
  .make(coordinatorLayout, message, Snackbar.LENGTH_LONG)
  .withColor(YOUR_COLOR)
  .show()

Si desea definir un color de fondo para todos sus Snackbars, anule el design_snackbar_background_color valor en alguna parte de sus recursos. Por ejemplo:

<color name="design_snackbar_background_color" tools:override="true">@color/colorPrimaryLight</color>

  • Esta solución es la más limpia y agradable. ¡Gracias!

    – AloDev

    10 de octubre de 2018 a las 8:48

  • Funciona muy bien, solo pega esto en colors.xml y ¡listo!

    – PA

    21 oct 2018 a las 17:19

  • No. No funcionó para mí. Tampoco ninguna de las otras soluciones.

    – Juan

    28 de junio de 2019 a las 9:15

avatar de usuario
Kailas Bhakade

El siguiente código es útil para cambiar el color del texto del mensaje.

Snackbar snackbar = Snackbar.make(rootView, "Enter Your Message",Snackbar.LENGTH_SHORT);
View view = snackbar.getView();
TextView tv = (TextView)view.findViewById(android.support.design.R.id.snackbar_text);
tv.setTextColor(Color.RED);
snackbar.show();

Segunda forma: también puede cambiar el color cambiando el tema de la actividad.

  • Esta solución es la más limpia y agradable. ¡Gracias!

    – AloDev

    10 de octubre de 2018 a las 8:48

  • Funciona muy bien, solo pega esto en colors.xml y ¡listo!

    – PA

    21 oct 2018 a las 17:19

  • No. No funcionó para mí. Tampoco ninguna de las otras soluciones.

    – Juan

    28 de junio de 2019 a las 9:15

Con el Biblioteca de componentes de materiales solo usa el setBackgroundTint método.

    Snackbar snackbar = Snackbar.make(view, "Snackbar custom style", Snackbar.LENGTH_LONG);
    snackbar.setBackgroundTint(ContextCompat.getColor(this,R.color.secondaryColor));
    snackbar.show();

ingrese la descripción de la imagen aquí


Con Jetpack componer puedes personalizar el SnackbarHost definiendo una costumbre Snackbar

    snackbarHost = {
        // reuse default SnackbarHost to have default animation and timing handling
        SnackbarHost(it) { data ->
            Snackbar(
                snackbarData = data,
                backgroundColor = Color.Red
            )
        }
    },

Entonces solo úsalo:

scope.launch {scaffoldState.snackbarHostState.showSnackbar("Snackbar text")}

ingrese la descripción de la imagen aquí

¿Ha sido útil esta solución?