¿Cómo personalizar el diseño de snackBar?

Recabamos en diferentes espacios y así tener para ti la respuesta a tu inquietud, si continúas con preguntas deja la inquietud y te contestaremos con gusto.

Solución:

Snackbar no le permite establecer un diseño personalizado. Sin embargo, como sugirió Primoz990, puede obtener la Vista de Snackbar. La función getView devuelve Snackbar.SnackbarLayout, que es un objeto LinearLayout horizontal cuyos hijos son TextView y Button. Para agregar su propia Vista a Snackbar, solo necesita ocultar TextView y agregar su Vista a Snackbar.SnackbarLayout.

// Create the Snackbar
Snackbar snackbar = Snackbar.make(containerLayout, "", Snackbar.LENGTH_LONG);
// Get the Snackbar's layout view
Snackbar.SnackbarLayout layout = (Snackbar.SnackbarLayout) snackbar.getView();
// Hide the text
TextView textView = (TextView) layout.findViewById(android.support.design.R.id.snackbar_text);
textView.setVisibility(View.INVISIBLE);

// Inflate our custom view
View snackView = mInflater.inflate(R.layout.my_snackbar, null);
// Configure the view
ImageView imageView = (ImageView) snackView.findViewById(R.id.image);
imageView.setImageBitmap(image);
TextView textViewTop = (TextView) snackView.findViewById(R.id.text);
textViewTop.setText(text);
textViewTop.setTextColor(Color.WHITE);

//If the view is not covering the whole snackbar layout, add this line
layout.setPadding(0,0,0,0);

// Add the view to the Snackbar's layout
layout.addView(snackView, 0);
// Show the Snackbar
snackbar.show();

Es posible a partir de la revisión 25.1.0 de la biblioteca de soporte de Android

I. Declare un diseño personalizado en su carpeta de valores / diseño.

Sugerencias:

• Usar @dimen/design_snackbar valores para que coincidan con las pautas de diseño de materiales.
• Usar ?attr/colorAccent para aplicar los cambios en el tema de la aplicación a Snackbar.

II. Amplíe la clase BaseTransientBottomBar.

public class final CustomSnackbar extends BaseTransientBottomBar 

/**
 * Constructor for the transient bottom bar.
 *
 * @param parent The parent for this transient bottom bar.
 * @param content The content view for this transient bottom bar.
 * @param contentViewCallback The content view callback for this transient bottom bar.
 */
private CustomSnackbar(ViewGroup parent, View content,    
            ContentViewCallback contentViewCallback) 
    super(parent, content, contentViewCallback);

III. Agregar BaseTransientBottomBar.ContentViewCallback

public class final CustomSnackbar ...

...

private static class ContentViewCallback implements        
                   BaseTransientBottomBar.ContentViewCallback 

  // view inflated from custom layout
  private View content;

  public ContentViewCallback(View content) 
      this.content = content;
  

  @Override
  public void animateContentIn(int delay, int duration) 
      // add custom *in animations for your views
      // e.g. original snackbar uses alpha animation, from 0 to 1
      ViewCompat.setScaleY(content, 0f);
      ViewCompat.animate(content)
                .scaleY(1f).setDuration(duration)
                .setStartDelay(delay);
  

  @Override
  public void animateContentOut(int delay, int duration) 
      // add custom *out animations for your views
      // e.g. original snackbar uses alpha animation, from 1 to 0
      ViewCompat.setScaleY(content, 1f);
      ViewCompat.animate(content)
                .scaleY(0f)
                .setDuration(duration)
                .setStartDelay(delay);
  

IV. Agregue un método para crear Snackbar con diseño personalizado y métodos para llenarlo.

public class final CustomSnackbar ...

...

public static CustomSnackbar make(ViewGroup parent, @Duration int duration) 
 // inflate custom layout
 LayoutInflater inflater = LayoutInflater.from(parent.getContext());
 View content = inflater.inflate(R.layout.snackbar_view, parent, false);

 // create snackbar with custom view
 ContentViewCallback callback= new ContentViewCallback(content);
 CustomSnackbar customSnackbar = new CustomSnackbar(parent, content, callback);
// Remove black background padding on left and right
customSnackbar.getView().setPadding(0, 0, 0, 0);


 // set snackbar duration
 customSnackbar.setDuration(duration);
 return customSnackbar;
 

 // set text in custom layout
 public CustomSnackbar setText(CharSequence text) 
 TextView textView = (TextView) getView().findViewById(R.id.snackbar_text);
 textView.setText(text);
 return this;
 

 // set action in custom layout
 public CustomSnackbar setAction(CharSequence text, final OnClickListener  listener) 
 Button actionView = (Button) getView().findViewById(R.id.snackbar_action);
 actionView.setText(text);
 actionView.setVisibility(View.VISIBLE);
 actionView.setOnClickListener(new View.OnClickListener() 
     @Override
     public void onClick(View view) 
         listener.onClick(view);
         // Now dismiss the Snackbar
         dismiss();
     
 );
 return this;

V. Crear instancia de CustomSnackbar y llama show() método.

CustomSnackbar customSnackbar = CustomSnackbar.make(rooView,      CustomSnackbar.LENGTH_INDEFINITE);
customSnackbar.setText("No network connection!");
customSnackbar.setAction("Retry", new View.OnClickListener() 
    @Override
    public void onClick(View v) 
        // handle click here
    
);
customSnackbar.show();

Vea más sobre Snackbar y su personalización en materialdoc.com

Lleno CustomSnackbar.class codigo:

import android.support.annotation.NonNull;
import android.support.design.widget.BaseTransientBottomBar;
import android.support.v4.view.ViewCompat;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;


public class CustomSnackbar extends BaseTransientBottomBar 

    /**
     * Constructor for the transient bottom bar.
     *
     * @param parent The parent for this transient bottom bar.
     * @param content The content view for this transient bottom bar.
     * @param callback The content view callback for this transient bottom bar.
     */
    private CustomSnackbar(ViewGroup parent, View content, ContentViewCallback callback) 
        super(parent, content, callback);
    

    public static CustomSnackbar make(@NonNull ViewGroup parent, @Duration int duration) 
        final LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        final View content = inflater.inflate(R.layout.snackbar_view, parent, false);
        final ContentViewCallback viewCallback = new ContentViewCallback(content);
        final CustomSnackbar customSnackbar = new CustomSnackbar(parent, content, viewCallback);

        customSnackbar.getView().setPadding(0, 0, 0, 0);
        customSnackbar.setDuration(duration);
        return customSnackbar;
    

    public CustomSnackbar setText(CharSequence text) 
        TextView textView = (TextView) getView().findViewById(R.id.snackbar_text);
        textView.setText(text);
        return this;
    

    public CustomSnackbar setAction(CharSequence text, final View.OnClickListener listener) 
        Button actionView = (Button) getView().findViewById(R.id.snackbar_action);
        actionView.setText(text);
        actionView.setVisibility(View.VISIBLE);
        actionView.setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View view) 
                listener.onClick(view);
                // Now dismiss the Snackbar
                dismiss();
            
        );
        return this;
    

    private static class ContentViewCallback implements BaseTransientBottomBar.ContentViewCallback 

        private View content;

        public ContentViewCallback(View content) 
            this.content = content;
        

        @Override
        public void animateContentIn(int delay, int duration) 
            ViewCompat.setScaleY(content, 0f);
            ViewCompat.animate(content).scaleY(1f).setDuration(duration).setStartDelay(delay);
        

        @Override
        public void animateContentOut(int delay, int duration) 
            ViewCompat.setScaleY(content, 1f);
            ViewCompat.animate(content).scaleY(0f).setDuration(duration).setStartDelay(delay);
        
    

La forma XML:

El archivo xml de diseño original que se utiliza para el Snackbar es este archivo:

design_layout_snackbar_include.xml:

Entonces para anular este diseño deberías escribir tu propio diseño con el mismo android:ids como en este y en tu refs.xml archivo debe agregar esta línea:

   ....   
    
        @layout/my_layout_snackbar
    
   ....

Valoraciones y reseñas

Al final de la web puedes encontrar las explicaciones de otros gestores de proyectos, tú igualmente tienes la habilidad insertar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador