android: custom snackbar bar displays default snack bar in the background

Question

I have a custom snack bar with a custom layout.But it doesn't display properly.It shows the default snackbar as well in the background: Below is my code:

    import android.support.annotation.NonNull;
    import android.support.design.widget.BaseTransientBottomBar;
    import android.support.design.widget.Snackbar;
    import android.support.v7.widget.AppCompatTextView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;

    public class CustomSnackbar extends BaseTransientBottomBar<CustomSnackbar> {

    protected CustomSnackbar(@NonNull ViewGroup parent,
                             @NonNull View content, @NonNull 
        android.support.design.snackbar.ContentViewCallback contentViewCallback) {
        super(parent, content, contentViewCallback);
    }

    private static class ContentViewCallback
            implements android.support.design.snackbar.ContentViewCallback {

        // view inflated from custom layout
        private View view;

        public ContentViewCallback(View view) {
            this.view = view;
        }

        @Override
        public void animateContentIn(int delay, int duration) {
            // TODO: handle enter animation
        }

        @Override
        public void animateContentOut(int delay, int duration) {
            // TODO: handle exit animation
        }
    }

    public static CustomSnackbar make(ViewGroup parent, int duration,String text) {
        // inflate custom layout
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        View view = inflater.inflate(R.layout.custom_snackbar, parent, false);
        //Snackbar.SnackbarLayout layout = (Snackbar.SnackbarLayout)view;
        //layout.setPadding(0, 0, 0, 0);//set padding to 0
        AppCompatTextView textView = (AppCompatTextView) view.findViewById(R.id.textview_snackbar_text);
        textView.setText(text);
        // create with custom view
        ContentViewCallback callback= new ContentViewCallback(view);
        CustomSnackbar customSnackbar = new CustomSnackbar(parent, view, callback);
        customSnackbar.setDuration(duration);
        return customSnackbar;
    }
}

Below is my custom layout for my custom snackbar:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardCornerRadius="10dp"
android:padding="0dp"
android:background="@android:color/transparent"
>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/button_green"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    >
<android.support.v7.widget.AppCompatTextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/textview_snackbar_text"
    android:textColor="@color/white"
    android:text=""
    android:textSize="@dimen/extra_small_text_size"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    />
</LinearLayout>
</android.support.v7.widget.CardView>

This is how I use my custom snackbar from BaseActivity:Im using it in BaseActivity and android.R.id.content so that I can call my custom snackbar from all the activities.

public void showSnackbar(String message) {
        CustomSnackbar.make(findViewById(android.R.id.content),
                CustomSnackbar.LENGTH_LONG,message).show();
}

But when I call this method, this is how it shows:

I have explored many stack over flow questions like Custom Snackbar doesn't work properly and Snackbar from custom class not showing, but those solutions doesn't work for me.

Any ideas or insights will be really helpful.

Edit1:As mentioned in the answer given,;

Inside my CustomSnackbar's make method: I gave the follwing:

    view.setBackgroundColor(parent.getContext().getResources().getColor(R.color.design_snackbar_background_color));

And it looks like the below:

My cardview's behaviour is lost now: Is there any way to bring back my cardview's corner radius as well and the width to be stretched to maximum !!??

Ajeett · Accepted Answer · 2020-02-03T08:05:31.433

1

override the following value

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

or

    Snackbar snackbar = Snackbar.make((ViewGroup) findViewById(android.R.id.content), "", Snackbar.LENGTH_LONG);
    Snackbar.SnackbarLayout layout = (Snackbar.SnackbarLayout) snackbar.getView();
    TextView textView = (TextView) layout.findViewById(android.support.design.R.id.snackbar_text);
    textView.setVisibility(View.INVISIBLE);
    LayoutInflater mInflater = LayoutInflater.from(getApplicationContext());
    View snackView = mInflater.inflate(R.layout.snackbar, null);
    TextView textViewTop = (TextView) snackView.findViewById(R.id.textview_snackbar_text);
    textViewTop.setText("ssdfds");
    textViewTop.setTextColor(Color.WHITE);
    layout.setPadding(0,0,0,0);
    layout.addView(snackView, 0);
    layout.setBackgroundColor(getResources().getColor(R.color.transparent));
    snackbar.show();

in your styles.xml paste the below code

 <style name="MyRoundSnackbar" parent="@style/Widget.MaterialComponents.Snackbar">
        <item name="android:layout_margin">32dp</item>
    </style>

and then in your theme paste this line

<item name="snackbarStyle">@style/MyRoundSnackbar</item>

Also paste this line in your xml

<color name="transparent">#00FFFFFF</color>

edited Feb 03 '20 at 08:05

answered Feb 03 '20 at 06:14

Ajeett

814
2
7
18

Im unable to call setBackgroundColor from my CustomSnackbar class ! – adi Feb 03 '20 at 06:43
Thanks for the input..It does actually work ! could you kindly explain, what exactly you have done because, when I tried textview's visibility as GONE instead of INVISIBLE, it crashes even though it is under an exception block !! – adi Feb 03 '20 at 08:38
Well, the code itself is self explanatory. The textview whose visibility we are toggling is the default text of snackbar. But as we want to inflate our own layout we need to make it invisible and not gone as it is the in built text. After that i have just added background color and margin. Kindly accept the answer if you think this answer has solved your problem. – Ajeett Feb 03 '20 at 09:22
Thanks for the reply: 1.Just curious about the crash: I have set the built in textview as GONE inside a try{ tv.setVsisibility(GONE); }catch(Exception e){}: But it didn't even go inside catch block and just crashed once try is executed: why so? 2.So which option is better? a custom snackbar or the inflated one as given by you? – adi Feb 03 '20 at 09:53
3.And now, I can't show my default snackbar: I tried to removeAllViews , but its not working: how to show my default snackbar also , say based on a if(custom)else{default} condition? could you give some insights pls – adi Feb 03 '20 at 10:36
You may know that there is a difference between making visibility of a view Invisible and Gone dont make it gone make it invisible instead. – Ajeett Feb 03 '20 at 11:15
cool..Im using this in my Baseactivity and I need both the default and custom snackbars , but since we are using tools:override, even the default snackbar's background is going to transparent, is there a way to change the transparency for the default snackbar? – adi Feb 03 '20 at 11:33

score 0 · Answer 2 · edited Feb 28 '20 at 00:05

0

Try this library to use material floating snackbar like Gmail all functionalities like adding a custom image also available.

edited Feb 28 '20 at 00:05

halfer

19,824
17
99
186

answered Feb 27 '20 at 06:48

Ankush Yerawar

52
1
7

score 0 · Answer 3 · answered Sep 11 '21 at 05:13

Use the transparent background behind cardview. like this:

    <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/_8sdp"
    android:background="@android:color/transparent">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="@dimen/_8sdp"
        app:cardBackgroundColor="@color/bg_snackbar">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/pLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingTop="@dimen/_4sdp"
            android:paddingBottom="@dimen/_4sdp"
            android:paddingStart="@dimen/_4sdp">

            <ImageView
                android:id="@+id/image"
                android:layout_width="@dimen/_30sdp"
                android:layout_height="@dimen/_30sdp"
                android:scaleType="centerInside"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:srcCompat="@drawable/ic_outline_info_24" />

            <TextView
                android:id="@+id/message"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/_12sdp"
                android:layout_marginEnd="@dimen/_12sdp"
                android:ellipsize="end"
                android:justificationMode="inter_word"
                android:lineSpacingExtra="@dimen/_4sdp"
                android:maxLines="2"
                android:textColor="#fff"
                android:textSize="@dimen/_8sdp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/image"
                app:layout_constraintStart_toEndOf="@+id/view"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="@string/lorem" />

            <TextView
                android:id="@+id/action"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                tools:text="سبد خرید"
                android:textColor="#fff"
                android:fontFamily="serif"
                android:gravity="center"
                android:textSize="@dimen/_10sdp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <View
                android:id="@+id/view"
                android:layout_width="1dp"
                android:layout_height="@dimen/_25sdp"
                android:layout_alignParentBottom="true"
                android:layout_marginStart="@dimen/_8sdp"
                android:background="@color/grey_100"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@+id/action"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </com.google.android.material.card.MaterialCardView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

android: custom snackbar bar displays default snack bar in the background

3 Answers3