How to create custom full screen ovarlay dialog in android - android

I need to create a custom full-screen dialog with overlay background. Here is the image of the expected result:
I tried the below code but it does not show like the above image.
My Dialog open dialog code is bellow
lateinit var dialog: Dialog
dialog = Dialog(this, android.R.style.Theme_Translucent_NoTitleBar_Fullscreen)
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE) // before
dialog.setContentView(R.layout.dialog)
dialog.setCancelable(true)
val lp = WindowManager.LayoutParams()
lp.copyFrom(dialog.getWindow()?.getAttributes())
lp.width = WindowManager.LayoutParams.MATCH_PARENT
lp.height = WindowManager.LayoutParams.MATCH_PARENT
dialog.getWindow()!!.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
val d: Drawable = ColorDrawable(Color.BLACK)
d.setAlpha(130)
dialog.getWindow()!!.setBackgroundDrawable(d)
dialog.show()
dialog.getWindow()!!.setAttributes(lp)
Here is my dialogx.ml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#80000000"
android:orientation="vertical">
</LinearLayout>
Here is my color code
**fill color #000000 with alph 50%**
It shows the transparent background. How to make the dialog above image. Please help me.

Dialog dialog=new Dialog(this,android.R.style.Theme_Black_NoTitleBar_Fullscreen);
dialog.setContentView(R.layout.dialog);
dialog.show();

Related

how to customize Dialog header in android studio?

I'm using a custom dialog that I've created in a separate xml file in my project, and I'm coloring the main window a blueish tint,
but the main header still remains the default white color.
Is there no way to change the font color, size, background for the header?
Is the only thing I can change in the header the text?
xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:background="#3edfbc"
android:orientation="vertical">
<TextView
android:id="#+id/textaligmentManager_loader_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="Initlizing Wifi"
android:textAppearance="?android:attr/textAppearanceLarge" />
<com.github.ybq.android.spinkit.SpinKitView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/barcodeScanning_spinkit"
style="#style/SpinKitView.Large.FoldingCube"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="#+id/textaligmentManager_loader_textview"
android:padding="20dp"
android:layout_centerHorizontal="true"
app:SpinKit_Color="#ffffff" />
</RelativeLayout>
dialog:
Dialog dialog = new Dialog(Scanning_Barcode_Activity.this);
dialog.setContentView(R.layout.aligment_manager_loader_layout);
dialog.setTitle("Loading");
dialog.setCancelable(false);
//set up text
loaderScreenMainText = (TextView) dialog.findViewById(R.id.textaligmentManager_loader_textview);
loaderScreenMainText.setText("Loading Wifi");
//progressBar = (ProgressBar) dialog.findViewById(R.id.barcodeScanning_spinkit);
//DoubleBounce doubleBounce = new DoubleBounce();
//progressBar.setIndeterminateDrawable(doubleBounce);
//now that the dialog is set up, it's time to show it
dialog.show();
You can use AlertDialog which is a subclass of Dialog class. Here you can define a custom layout containing everything such as title, body and buttons. No extra title section will appear. Here is a demo:
AlertDialog.Builder builder = new AlertDialog.Builder(Scanning_Barcode_Activity.this);
builder.setCancelable(false);
LayoutInflater inflater = LayoutInflater.from(Scanning_Barcode_Activity.this);
View dialogView = inflater.inflate(R.layout.aligment_manager_loader_layout, null);
TextView loaderScreenMainText = (TextView) dialogView.findViewById(R.id.textaligmentManager_loader_textview);
loaderScreenMainText.setText("Loading Wifi");
builder.setView(dialogView);
AlertDialog dialog = builder.create();
dialog.show();
Design your custom layout in such a way that the layout itself contains the header part. And then skip this code:
dialog.setTitle("Loading");
Instead add this statement:
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
You can also use AlertDialog. In that case requestWindowFeature() method is not required.
android.support.v7.app.AlertDialog.Builder builder = new android.support.v7.app.AlertDialog.Builder(Scanning_Barcode_Activity.this);
LayoutInflater inflater = LayoutInflater.from(Scanning_Barcode_Activity.this);
View customView = inflater.inflate(your_layout, null);
builder.setCancelable(false);
loaderScreenMainText = (TextView) customView.findViewById(R.id.textaligmentManager_loader_textview);
loaderScreenMainText.setText("Loading Wifi");
builder.setView(customView);
AlertDialog dialog = builder.create();
dialog.show();
There are plenty of stylish open source libraries that you can use for customizing header parts.
Here I'm sharing my newly developed open source library : PanterDialog
Hope it will help you.

Android - How to make an AlertDialog narrower than standard?

I currently have the following code to build a wait dialog with a ProgressBar:
LayoutInflater factory = LayoutInflater.from(TherapistActivity.this);
View view = factory.inflate(R.layout.waitdialog, null);
dialog = new AlertDialog.Builder(TherapistActivity.this)
.setView(view)
.setCancelable(false)
.create();
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
WindowManager.LayoutParams wmlp = dialog.getWindow().getAttributes();
wmlp.gravity = Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL;
wmlp.x = 0; //x position
wmlp.y = Math.round(metrics.density * 100); //y position
wmlp.width = Math.round(metrics.density * 55); //doesn't appear to work
Here is the XML for my dialog:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="#+id/top"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="55dp"
android:layout_height="55dp"
android:background="#drawable/boxbkg">
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
I would like my dialog to be a small square dialog with just a spinning ProgressBar. However, even with wmlp.width = Math.round(metrics.density * 55), the dialog remains wide.
What is the proper way to get around this?
As far as I know, changing dialog - params / width and height - should take place in the onCreate (set style is needed) and in the onCreateDialog (setting the params).
example of this two methods from a custom DialogFragment which take place on the whole screen without any margin:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(DialogFragment.STYLE_NORMAL, R.style.AppTheme);
}
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
Dialog dialog = super.onCreateDialog(savedInstanceState);
dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
Window w = dialog.getWindow();
w.setBackgroundDrawable(new ColorDrawable(Color.WHITE));
WindowManager.LayoutParams params = dialog.getWindow().getAttributes();
params.verticalMargin = 0;
params.horizontalMargin = 0;
params.x=0;
params.y = 0;
dialog.getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
params.width= ViewGroup.LayoutParams.MATCH_PARENT;
params.height = ViewGroup.LayoutParams.MATCH_PARENT;
w.setGravity(Gravity.TOP| Gravity.LEFT);
return dialog;
}
Please let me know if it helped you.
I figured it out. It appears that I needed two more lines of code. Before setting the width, I needed this line of code:
wmlp.copyFrom(dialog.getWindow().getAttributes());
And after setting the width, I needed this line of code:
dialog.getWindow().setAttributes(wmlp);
The original code, in combination with the extra code from the answer, doesn't work with my code unfortunately, which might be caused by using a Fragment.
The following code (tested with Java 8/min API 24/target API 27) works with a Fragment and with both portrait and landscape screen orientation. It lets you set the size of the dialog to whatever you like (see below) and there's no need to set its position because in the end it's still just a normal AlertDialog (without buttons or title) with a custom view:
AlertDialog.Builder builder = new AlertDialog.Builder((AppCompatActivity) getActivity());
builder.setView(R.layout.progress_view);
AlertDialog loadingDialog = builder.create();
loadingDialog.show();
loadingDialog.getWindow().setLayout(400,400); //You have to call this after "show"!
//loadingDialog.dismiss();
My progress_view layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/progress_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#FF0000"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="20dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp">
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
I tried using a LinearLayout before but it didn't work, the dialog still used its original size. The important bit here is match_parent because only that actually centers the progress circle in the AlertDialog. Using wrap_content is going to push it to the top left of the dialog.
The result looks like this:
You can of course add more stuff, like e.g. a "Please wait..." TextView or set the background color to whatever color you want, just two things I noticed:
Transparency doesn't work. If you set the background to e.g. 50% alpha, you can see the white background of the AlertDialog through it. I tried changing the dialog's transparency as suggested here (custom style or getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT))) but, even though it worked, the dialog and ended up losing its rounded corners and got squished.
You have to test what size works for you. 400 by 400 is fine for a default progress circle and some padding but if you make the dialog too small for the view's content, it won't show up at all.

To set background of Custom Layout with an ImageView to Transparent

I am building a Custom dialog box using the Android Developer docs link , for this i made a layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rotatelayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#80000000"
>
<ImageView
android:id="#+id/dialogimage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
and i am inflating this dialog,
AlertDialog dialog;
AlertDialog.Builder builder;
builder = new AlertDialog.Builder(TabsActivity.this);
LayoutInflater inflator = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
View view = inflator.inflate(R.layout.rotate_dialog_layout, (ViewGroup) findViewById(R.id.rotatelayout));
ImageView image = (ImageView) view.findViewById(R.id.dialogimage);
image.setOnClickListener(new RotateLockListener());
image.setBackgroundColor(Color.parseColor("#80000000"));
if(locked)
{
image.setImageResource(R.drawable.lock_icon);
}
else
{
image.setImageResource(R.drawable.unlock_icon);
}
builder.setView(view).setCancelable(true);
dialog = builder.create();
dialog.setView(view, 0, 0, 0, 0);
timerDelayRemoveDialog(time, dialog);
dialog.show();
but still it appears as
I have tried all the help provided at the stack over flow
Setting ImageView background to transparent,
Setting transparency by #80000000 and
Setting Dialog window transparency
But none of them worked, it still showing up.
Or you can use Dialog class for this,
Dialog dialog = new Dialog(this,
android.R.style.Theme_Translucent_NoTitleBar);
Window window = dialog.getWindow();
window.setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON,
WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
window.setLayout(ViewGroup.LayoutParams.FILL_PARENT,
ViewGroup.LayoutParams.FILL_PARENT);
dialog.setCancelable(true);
dialog.setCanceledOnTouchOutside(true);
dialog.setContentView(R.layout.temp);
dialog.show();
Try using this as the style of your View :
<style name="Dialog_Fullscreen">
<item name="android:windowFullscreen">true</item>
<item name="android:windowNoTitle">true</item>
</style>

ImageView in a Custom Dialog - fill_parent does not work and my dialog is small

I have a simple request: I have to put some pictures (some small resolution, some big resolution) in a dialog and display them fullscreen.
I tried this:
Dialog dialog = new Dialog(getActivity());
dialog.setContentView(R.layout.custom_dialog);
int picId = Integer.valueOf(webcamCursor.getString(webcamCursor
.getColumnIndex("_id")));
dialog.setTitle(webcamCursor.getString(webcamCursor
.getColumnIndex("City")));
image = (ImageView) dialog.findViewById(R.id.image);
image.setImageResource(R.drawable.icon);
new DownloadPicTask().execute(Snippets.getUrlFromCat(picId, cat));
dialog.show();
And my layout is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_root"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
>
<ImageView android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dip"
/>
</LinearLayout>
As I wrote fill_parent everywhere, shouldn't the dialog take the full screen?
Try that:
dialog.getWindow().getAttributes().width = LayoutParams.FILL_PARENT;
Hope it helps.
try this will work
//Grab the window of the dialog, and change the width
WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
Window window = dialog.getWindow();
lp.copyFrom(window.getAttributes());
//This makes the dialog take up the full width
lp.width = WindowManager.LayoutParams.MATCH_PARENT;
lp.height = WindowManager.LayoutParams.MATCH_PARENT;
window.setAttributes(lp);

Webview with facebook login flickering in Dialog

I want to make a dialog with webview containing facebook login site.
I tried with PopupWindow - keyboard wasn't showing after clicking on textfield.
The same with AlertDialog. Finally I used pure Dialog class and it's "working", but when I am clicking on textfield whole webview is flickering and turns into transparent besides textfield.
I am attaching screenshot with alert box and facebook login website after textfield focus.
I tried with setting hardware accelerating or different background but without any effects.
Is there other way to display facebook login popup in webview?
Thanks for any help!
Code:
Dialog dialog = new Dialog(MyActivity.this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.webview_popup);
dialog.setCanceledOnTouchOutside(true);
dialog.setCancelable(true);
WebView popupWebview = (WebView)dialog.findViewById(R.id.webViewFromPopup);
popupWebview.loadUrl(url);
dialog.show();
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/popupWindow"
android:background="#000"
android:minHeight="600dp">
<WebView
android:id="#+id/webViewFromPopup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layerType="software"
android:layout_weight="0.8"
android:background="#FFFFFFFF"
/>
</LinearLayout>
SOLUTION:
I am building dialog programmatically - it's solving problem... somehow.
Code:
/* webview popup */
private Dialog webViewPopup;
private void showWebViewPopup(final String url)
{
Dialog dialog = new Dialog(MyActivity.this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.webview_popup);
dialog.setCancelable(true);
WebView popupWebview = new WebView(MyActivity.this);
LayoutParams params = new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT, 0.99f);
popupWebview.setLayoutParams(params);
Button cancelButton = new Button(MyActivity.this);
LayoutParams bParams = new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT, 0.01f);
cancelButton.setLayoutParams(bParams);
cancelButton.setText("Cancel");
cancelButton.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
webViewPopup.dismiss();
}
});
LinearLayout popupLayout = (LinearLayout) dialog.findViewById(R.id.popupWindow);
popupLayout.addView(popupWebview);
popupLayout.addView(cancelButton);
dialog.show();
popupWebview.loadUrl(url);
webViewPopup = dialog;
}
XML: (webview_popup.xml file)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/popupWindow"
android:minHeight="600dp"
>
</LinearLayout>
Since the input of the fields is giving you trouble, one work around would be to capture that data in your own form and process it upon reaching the webview.
Set it up so that your edittext view and keyboard popup when a user selects the field in webview.

Categories

Resources