Home » Android » android – How to add a SnackBar on the bottom of a dialog's overlay

android – How to add a SnackBar on the bottom of a dialog's overlay

Posted by: admin June 15, 2020 Leave a comment

Questions:

I have an android application which has many different pop-ups. I want to add a SnackBar over dialog’s overlay on the bottom of the screen.

I tried the following code

if (fragment!= null) {
    Snackbar snackbar = Snackbar.make(fragment.getDialog().getWindow().findViewById(android.R.id.content),
            message, Snackbar.LENGTH_LONG);
    View view = snackbar.getView();
    FrameLayout.LayoutParams params =(FrameLayout.LayoutParams)view.getLayoutParams();
    params.gravity = Gravity.BOTTOM;
    view.setLayoutParams(params);
    snackbar.show();
}

But the SnackBar appears on the bottom of centered Dialog not on the bottom of the screen. If I add the Snackbar on current Activity then it appears under dialog’s overlay.

Android SnackBar

How to&Answers:

Use below theme for full screen custom dialog

<style name="DialogTheme" parent="android:Theme.Dialog">

<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>


<!-- No backgrounds, titles or window float -->
<item name="android:windowBackground">@null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>

Use it in your dialog as below:

dialog = new Dialog(this, R.style.DialogTheme);

To use above things, you should use custom layout for your custom dialog.

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

Try above line to make your dialog background transparent.

Answer:

You are parsing Dialog view as

fragment.getDialog().getWindow().findViewById(android.R.id.content)

I suggest you to parse fragment layout root view instead.

Answer:

Finally I think I have done what you expect. even i have added few answers to this same question, I add this answer as a separate answer to be more clear to you.

enter image description here

Its dirty UI, I prepared it very rushy. Can You see the StackBar At the bottom of the screen. It displays when you click on the OK button of the AlertDialog

Here is how I did it.

following code belongs to custom_dialog_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"/>

<TextView
    android:id="@+id/text"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="@android:color/black"
    android:text="Sample Test for Custom Dialog"
    android:textSize="20sp"
    android:layout_toRightOf="@+id/image"
    android:layout_alignBottom="@+id/image" />/>

<Button
    android:id="@+id/dialogButtonOK"
    android:layout_width="100px"
    android:layout_height="wrap_content"
    android:text=" Ok "
    android:layout_below="@+id/text"
    android:layout_centerHorizontal="true" />

following code belongs to activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:id="@+id/rootView"
tools:context="com.stackoverflow.answer.androidcustomdialog.MainActivity">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!" />

following code belongs to MainActivity.java

package com.stackoverflow.answer.androidcustomdialog;

import android.support.design.widget.Snackbar;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final View rootView=(View)findViewById(R.id.rootView);

    AlertDialog.Builder mAlertDialogBuilder = new AlertDialog.Builder(this);
    // inflate the custom dialog view
    LayoutInflater inflater=getLayoutInflater();
    final View mDialogView = inflater.inflate(R.layout.custom_dialog_layout, null);
    // set the View for the AlertDialog
    mAlertDialogBuilder.setView(mDialogView);

    Button btn = (Button) mDialogView.findViewById(R.id.dialogButtonOK);
    btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            // Pass the RootView to the SnackBar
            Snackbar
                    .make(rootView, "SnackBar in Dialog", Snackbar.LENGTH_LONG)
                    .show();
        }
    });
    AlertDialog alertDialog = mAlertDialogBuilder.create();
    alertDialog.show();
}
}

Feel free to ask anything you need. In this example I haven’t use fragments. If you need I can help with that too. and also I can send the project if you need. give me your email 🙂

As a summary, What I have really did is, just pass the RooT Layout View to the SnackBar. Its simple as that.

One More Thing..

According to the Google Material Design Snackbars & Toasts Usage Reference

Placement

Snackbars appear above most elements on screen, and they are equal in
elevation to the floating action button. However, they are lower in
elevation than dialogs, bottom sheets, and navigation drawers.

So the Snackbar will always appear lower level in elevation than dialogs.

Answer:

Try this solution:
Used material dialog :
custom_dialog_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
    android:id="@+id/text"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="@android:color/black"
    android:text="Sample Test for Custom Dialog"
    android:textSize="20sp"
    android:layout_toRightOf="@+id/image"
    android:layout_alignBottom="@+id/image" />/>

<Button
    android:id="@+id/dialogButtonOK"
    android:layout_width="100px"
    android:layout_height="wrap_content"
    android:text=" Ok "
    android:layout_below="@+id/text"
    android:layout_centerHorizontal="true" />
    <android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:id="@+id/coordinatorLayout"
    android:layout_height="wrap_content">
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

fragment.java

    final MaterialDialog dialog = new MaterialDialog.Builder(context)
                .customView(R.layout.custom_dialog_layout, false)
                .positiveText(R.string.btn_OK)
                .canceledOnTouchOutside(false)

                .negativeText(android.R.string.cancel)
                .onPositive(new MaterialDialog.SingleButtonCallback() {
                                @Override
                                public void onClick(@NonNull final MaterialDialog dialog, @NonNull DialogAction which) {
Snackbar.make(mCoordinatorLayout, "Please Enter All fields!", Snackbar.LENGTH_LONG).show();
                                                    dialog.show();
})

                .build()
 positiveAction = dialog.getActionButton(DialogAction.POSITIVE);
  mCoordinatorLayout = (CoordinatorLayout) dialog.getCustomView().getRootView().findViewById(R.id.coordinatorLayout);
 dialog.show();

Answer:

Here LayoutInflater.inflate is used instead. Try to map the code as you need.
Here you can find more info

 AlertDialog.Builder mAlertDialogBuilder = new AlertDialog.Builder(this);
LayoutInflater inflater = this.getLayoutInflater();
// inflate the custom dialog view
final View mDialogView = inflater.inflate(R.layout.dialog_layout, null);
// set the View for the AlertDialog
mAlertDialogBuilder.setView(mDialogView);

Button btn = (Button) mDialogView.findViewById(R.id.dialog_btn);
btn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // Pass the mDialogView to the SnackBar
        Snackbar
                .make(mDialogView, "SnackBar in Dialog", Snackbar.LENGTH_LONG)
                .show();
    }
});
AlertDialog alertDialog = mAlertDialogBuilder.create();
alertDialog.show();

If you need a help to map it to your code, feel free to ask