Create a transparent dialog on top of activity - android

Background
I'm trying to put a layer on top of the current activity which would have explanation of what is going on on the current screen, similar to what occurs on contact+ app .
I know there are some solutions for this (like the showCase library and the superToolTips library ) , and I also know that I can create a view and set it on top by adding it to the window of the activity , but I need put a whole dialog layer on top.
Problem
No matter what I try, each solution doesn't work the way I need it to work.
in short , what I need is:
full screen dialog.
no change (not visual and not logical) to the action bar, notification bar, and content of the activity behind, meaning that everything behind the dialog stays the same it was shown a moment before the dialog was shown.
be transparent except for the views I use for the dialog, which should be shown normally.
what I've tried
Sadly, I've always got only a part of the things I needed.
here's my code:
styles.xml:
<style name="full_screen_dialog">
<item name="android:windowFrame">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
</style>
MainActivity.java:
...
final Dialog dialog = new Dialog(this, R.style.full_screen_dialog);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.floating_tutorial);
dialog.getWindow().setLayout(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
dialog.getWindow().setFormat(PixelFormat.TRANSLUCENT);
dialog.show();
This code will put the layout on top of the activity, but sadly it doesn't have any transparency , even though I've set it . The layout I've used is very simple which is why I don't post it.
Question
what am I missing ? what should be done to fix the code?
how can I make the dialog both transparent, full screen AND that it won't change the action bar and notifications bar.
Working solution
EDIT: after finding a good solution, here's the working code:
#Override
protected void onCreate(final Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.floating_tutorial);
final Window window = dialog.getWindow();
window.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT);
window.clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
dialog.show();
}

Just change the background color of your Dialog:
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
Edit:
This prevents the dim effect:
dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);

Just add this, it really works!
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowCloseOnTouchOutside">true</item>
<item name="android:windowBackground">#android:drawable/alert_dark_frame</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:backgroundDimEnabled">false</item>

Related

How to NOT center android dialog?

I want to use a dialog but I don't want it to be centered vertically on the screen.
I created a Dialog and used SetContentView() to apply the layout.
I also applied style and no title option. Here is what I did.
mydialog = new Dialog (context, Resource.Style.myDialogAnim);
mydialog.RequestWindowFeature ((int)WindowFeatures.NoTitle);
mydialog.SetContentView (myDialogView);
mydialog.SetCanceledOnTouchOutside (false);
The style I applied to this dialog is here:
<style name="myDialogAnim" parent="#android:style/Theme.Dialog">
<item name="android:windowAnimationStyle">#style/slideInAndOut</item>
<item name="android:windowIsFloating">false</item>
<item name="android:windowBackground">#android:color/transparent</item>
</style>
<style name="slideInAndOut">
<item name="android:windowEnterAnimation">#anim/anim_animatein</item>
<item name="android:windowExitAnimation">#anim/anim_animateaway</item>
</style>
When I use this dialog, the dialog animates in from the fromYDelta location to the toYDelta location in anim_animatein but as soon as the animation is done, it centers itself vertically.
I need it to be centered horizontally on the screen but NOT vertically.
How can I do this?
Thank you for your time.
I figured it out.
WindowManagerLayoutParams dialogParams = mydialog.Window.Attributes;
dialogParams.Gravity = GravityFlags.Bottom;
int dialogYPos = 69 * (int)activity.Resources.DisplayMetrics.Density;
dialogParams.Y = dialogYPos;
dialogYPos returns how many pixels you want it to move up from it's location. So I set it's Gravity to Bottom so it's that many pixels from the bottom of the screen.
Extra:
Since I am using the dialog as just a floating message, I wanted the user to be able to use the current activity when the dialog is showing. I added the following flag and it worked perfecly.
mydialog.Window.AddFlags (WindowManagerFlags.NotTouchModal);
Now I am using a Dialog as an android Toast Widget with my animation and complete customization.
I hope this helps someone.

Changing Background dim color for dialog appears in android

Hi I have to chage the dim color of dialog in my theme to white, so that by setting layoutParams.dimAmount = 0.5f; i can get blur white in dialog background.
I am using
<style name="MyDialog" parent="#android:style/Theme.Holo.Light.Dialog">
<item name="android:windowBackground">#color/dialog_dim_background</item>
</style>
and following below references
How do I create a transparent Activity on Android?
Custom screen dim with Dialog
It is a very old question, but i'd like to add n answer to it. I faced the same problem and googled a lot. Then came up with my own solution.
First of all, I removed the dim at all with this
dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
And then I opened my layout(it was RelativeLayout) and put this view in it as the last element
<View
android:id="#+id/shade"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/primaryShadow"
android:visibility="invisible"/>
The background color is the color you want to use as your dim color. As you can see, it is invisible when created. So you'll need to find it in you Activity and set it's visibility before you launch the dialog to View.VISIBLE. When you cancel dialog, set it to View.INVISIBLE again. And that's it.
I know it's very old question but this will help out surely to someone who is using AppCompatActivity or ActionBarActivity. If you are setting a dialog to your activity or say DialogActivity then also the below will work!
dialog = new Dialog(ActivityName.this);
dialog .setCancelable(false);
dialog .setContentView(R.layout.dialog_layout);
Window window = dialog.getWindow();
if(window != null){
window.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
window.setDimAmount(0.5f);
//If you are setting a dialog activity
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
Double dialogWidth = displayMetrics.widthPixels * 0.50;
window.setLayout(dialogWidth.intValue(),
WindowManager.LayoutParams.WRAP_CONTENT); //Setting it cover half of the screen width
}
dialog.show();
Just before you dismiss the dialog,
dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
dialog.dismiss();
//If you are setting a dialog activity, create a style in styles.xml:
<style name="MyTheme" parent="#style/Theme.AppCompat.Light.Dialog">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
And in your Manifest, set the theme:
<activity android:name=".view.POSSelectCustomerDialogActivity"
android:theme="#style/MyTheme"
android:windowSoftInputMode="stateAlwaysHidden|adjustResize"/>
Ok here is how I do that "I don't know how will these behave with the blur flag though"
I create a custom layout for the dialog with a background color of my choosing .
set the dialog to fill screen
remove the dim behind flag
Code snippet
Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.dailog_layout);
dialog.getWindow().setBackgroundDrawable(
new ColorDrawable(0));
dialog.getWindow().setLayout(LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT);
dialog.getWindow().clearFlags(
WindowManager.LayoutParams.FLAG_DIM_BEHIND);
Best of luck

DialogFragment fullscreen shows padding on sides

I am creating a custom DialogFragment that is displayed underneath the actionbar. So far everything works great. The layout parameters for dialog fragment are match_parent for width and wrap_content for height.
I have tried every solution including setting the layout parameters .width and by getting Display size and removing the themes. However no matter what there is a small amount of space on left, right and top side of the dialog that is invisible. I need to know how to remove this space so it actually matches the width of the screen and hopefully gets rid of the top padding as well.
I figured it out using custom dialog theme. windowIsFloating true will get rid of the background but will add some extra space underneath the background as a background. In which case you can use windowBackground #null to erase it.
<style name="CustomDialog" parent="#android:style/Theme.Holo.Light" >
<item name="android:windowBackground">#null</item>
<item name="android:windowIsFloating">true</item>
</style>
Usage:
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(), R.style.CustomDialog);
Thank you to Raghunandan who gave me the link that includes all style attributes. It took me a while but I went through that file and found very interesting elements. Definitely have a look at the link posted below to explore theme styles.
https://android.googlesource.com/platform/frameworks/base/+/refs/heads/master/core/res/res/values/themes.xml
https://groups.google.com/forum/#!topic/android-developers/NDFo9pF8sHY
From Dianne Hackborn suggestion
Use non-dialog theme as android.R.style.Theme or android.R.style.Theme_Light.
Look # the themes
https://android.googlesource.com/platform/frameworks/base/+/refs/heads/master/core/res/res/values/themes.xml.
Check this link
http://developer.android.com/reference/android/app/DialogFragment.html
DialogFragment picker = MyDialogFragment.newInstance();
picker.setStyle( DialogFragment.STYLE_NORMAL, android.R.style.Theme );
picker.show(getFragmentManager(), "MyDialogFragment");
if you set this theme to your dialog it will always be fullscreen
<!-- DIALOG STYLE -->
<style name="You.Dialog" parent="android:Theme.Holo.Dialog" >
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowIsFloating">false</item>
</style>
to do so you can use this setStyle(int,int) method.
dialogFragment.setStyle( DialogFragment.STYLE_NORMAL, R.style.You_Dialog );
First you need to know that handling of full screen in Dialog fragment is different from the normal Dialog component, second you need to customize the Dialog fragment before the actual creation of the dialog # (OnCreateDialog), according to the answer of "user3244180" Full screen DialogFragment
#Override
public Dialog onCreateDialog(final Bundle savedInstanceState) {
// the content
final RelativeLayout root = new RelativeLayout(getActivity());
root.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
// creating the fullscreen dialog
final Dialog dialog = new Dialog(getActivity());
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(root);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
dialog.getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
return dialog;
}
This worked for me with support for < API 11.
Create a style that is both full screen and has a transparent background:
<style name="TransparentDialog" parent="#android:style/Theme">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:background">#android:color/transparent</item>
</style>
Then your DialogFragment code:
public class MyDialog extends DialogFragment {
public static MyDialog newInstance() {
MyDialog dialog = new MyDialog();
dialog.setStyle(DialogFragment.STYLE_NO_FRAME, R.style.TransparentDialog);
return dialog;
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.my_custom_layout, container, false);
return view;
}
}
Finally, just for clarity, the contents of my_custom_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.kabx"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/semi_transparent_grey" >
..........................
..Whatever You Want Here..
..........................
</RelativeLayout>
I met the issue before: there is always a padding while having set fullscreen. try this code in dialogFragment's onActivityCreated() method:
public void onActivityCreated(Bundle savedInstanceState)
{
Window window = getDialog().getWindow();
LayoutParams attributes = window.getAttributes();
//must setBackgroundDrawable(TRANSPARENT) in onActivityCreated()
window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
if (needFullScreen)
{
window.setLayout(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
}
}
<style name="WideDialog" parent="Theme.AppCompat.Light.DialogWhenLarge">
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowIsFloating">false</item>
</style>
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(DialogFragment.STYLE_NORMAL, R.style.WideDialog);
}
DialogFragment (when not told explicitly), will use its inner styles that will wrap your custom layout in it (no fullscreen, etc.).
No need to create custom theme for this problem. Just use this method and set style and theme of your choosing:
/* theme is optional, I am using leanback... */
setStyle(STYLE_NORMAL, R.style.AppTheme_Leanback);
The following works perfectly for me. It lets me have a full-width dialog (fills the screen's width with no padding) but with wrap_content for height, and it retains all my other stylings that I do in my builder:
<style name="DialogTheme">
<item name="windowMinWidthMajor">100%</item>
<item name="windowMinWidthMinor">100%</item>
<item name="android:windowBackground">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:background">#ffffff</item>
</style>
Background is required or else it does a weird repeat thing, but just set this to the color you want your dialog background to be. WindowBackground and WindowIsFloating are required to make the size wrap correctly.
Add your theme to your builder like so:
builder = new AlertDialog.Builder(_context, R.style.DialogTheme);
and you're good to go!
I was getting huge side padding in the DialogFragment for Nexus 6p and Pixel.
Fixed that by defining custom style as follows:
<style name="Custom.Dialog" parent="android:Theme.DeviceDefault.Dialog.NoActionBar.MinWidth" >
<item name="android:windowBackground">#null</item>
<item name="android:windowIsFloating">true</item>
</style>
parent="android:Theme.DeviceDefault.Dialog.NoActionBar.MinWidth did the trick
For fullscreen dialog I have posted a answer
In this thread
Please check this is the most efficient and shortest way.
Hope this helps :)

Dialog in full Screen

My question is i don't want to show transparent dialog in full screen
below is the code i used
dialog = new Dialog(this, R.style.CustomDialogTheme);
dialog.setContentView(R.layout.enterjoinseecode_dialog);
CustomDialog theme
<style name="CustomDialogTheme" parent="#android:style/Theme.Translucent.NoTitleBar">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowFullscreen">false</item>
</style>
Please some one helps me where i went wrong
Try this.Create your view for Dialog like below.
<RelativeLayout
android:layout_width="450dp"
android:layout_height="250dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical" >
// Here you can add your component.
</RelativeLayout>
And set your dialog this view.
dialog = new Dialog(this, R.style.CustomDialogTheme);
dialog.setContentView(R.layout.enterjoinseecode_dialog);
That's it.Hope this will help you.
Create a activity with transparent background and for that particular activity define theme like this
<activity android:theme="#android:style/Theme.Dialog" />
And also if you want that activity to be exactly like dialog, then you can also use this
android:excludeFromRecents="true"
to remove it from the recent apps list.
some how with the following steps got the dialog with transparent effect with out full screen
No need of defining style "CustomDialogTheme" need to pass the theme argument for constructor as android.R.style.Theme_Translucent_NoTitleBar
and with in inflated xml just used background as android:background="#29000000" to make it transparent effect and layout_gravity property to position the dialog
if i use the above style CustomDialogTheme somehow its showing as a window instead of dialog because of that i applied direct theme to show that as dialog (not full screen)and to make it transparent effect with in xml i set the property background

android dialog transparent

I want to get rid of the border in my dialog box and make it look absolutly transparent, as if the image is on the top of screen.
My dialog xml is -
<?xml version="1.0" encoding="utf-8"?>
<ImageView android:id="#+id/ImageView01"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerHorizontal="true" android:visibility="invisible"/>
Try below code
Dialog mDialog = new Dialog(mContext, android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);
try this:
mDialog.getWindow().setBackgroundDrawable(new ColorDrawable(0));
To give a translucent effect, say 50% opacity, use:
Drawable d = new ColorDrawable(Color.BLACK);
d.setAlpha(130);
mDialog.getWindow().setBackgroundDrawable(d);
'130' can be changed (0-255) to acheive desired opacity.
try this:-
final Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.setContentView(R.layout.splash);
dialog.show();
For API 11+
Dialog mDialog = new Dialog(mContext, android.R.style.Theme_Holo_Light_Panel);
The simplest way of doing this is that in your DialogFragment's onCreate() method, call
setStyle(DialogFragment.STYLE_NO_FRAME, 0);
And if the view you returned in onCreateView does not have a background specified, the dialog's background will be just transparent.
Why? DialogFragment.STYLE_NO_FRAME means that OS will not do any drawing in the window of the dialog, and your view is 100% responsible for drawing everything about the dialog.
The accepted answer causes issue with devices that have a notch, as the statusbar completely disappears and shows an ugly white background.
Instead, the right way for this is to define your own style.
<style name="FullScreenDialogTheme" parent="Theme.MaterialComponents.Dialog">
<item name="android:windowIsFloating">false</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:backgroundDimEnabled">false</item>
<item name="android:statusBarColor">#color/colorPrimary</item>
</style>
Now, this will make the window not have borders and be transparent over the screen.

Categories

Resources