Develop Reference

Android - how to set dialog's outer margin

I know that this question have been asked a few times, but none of the solutions I came across worked for me, hence this topic. As the title states - I want to set dialog's outer margin:
PurchaseDetailsDialogFragment
public class PurchaseDetailsDialogFragment extends DialogFragment {
private static final String MAX_AMOUNT = "maxAmount";
private static final String UNIT_PRICE = "unitPrice";
private static final String PICKUP_TIME_FROM = "pickupTimeFrom";
private static final String PICKUP_TIME_TO = "pickupTimeTo";
public PurchaseDetailsDialogFragment() { }
public static PurchaseDetailsDialogFragment newInstance(int maxAmount, float unitPrice, String pickupTimeFrom, String pickupTimeTo) {
PurchaseDetailsDialogFragment fragment = new PurchaseDetailsDialogFragment();
Bundle args = new Bundle();
args.putInt(MAX_AMOUNT, maxAmount);
args.putFloat(UNIT_PRICE, unitPrice);
args.putString(PICKUP_TIME_FROM, pickupTimeFrom);
args.putString(PICKUP_TIME_TO, pickupTimeTo);
fragment.setArguments(args);
return fragment;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
int maxAmount = getArguments().getInt(MAX_AMOUNT);
float unitPrice = getArguments().getFloat(UNIT_PRICE);
String pickupFrom = getArguments().getString(PICKUP_TIME_FROM);
String pickupTo = getArguments().getString(PICKUP_TIME_TO);
}
}
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
Context context = getContext();
FragmentPurchaseDetailsDialogBinding binding = DataBindingUtil.inflate(
LayoutInflater.from(context),
R.layout.fragment_purchase_details_dialog,
null,
false);
binding.setDataContext(new PurchaseDetailsViewModel(context));
AlertDialog dialog = new AlertDialog.Builder(getActivity(), R.style.DialogTheme)
.setView(binding.getRoot())
.create();
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
return dialog;
}
}
fragment_purchase_details_dialog
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/dialog">
<data>
<variable
name="dataContext"
type="com.myapp.viewModels.PurchaseDetailsViewModel" />
</data>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="80dp"
android:paddingTop="20dp"
android:layout_centerHorizontal="true"
android:background="#color/white">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_amount"
style="#style/Widget.App.PurchaseTextViewTitle" />
</FrameLayout>
<LinearLayout
android:id="#+id/dialogCentralContent"
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical"
android:layout_marginTop="80dp"
android:background="#color/dirtyWhite">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="74" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="46dp"
android:layout_centerHorizontal="true">
<Button
android:layout_width="44dp"
android:layout_height="44dp"
android:layout_marginTop="6dp"
android:background="#drawable/button_filled"
android:text="-"
style="#style/Widget.App.PurchaseIncDecButton" />
<FrameLayout
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="#drawable/edittext_white_rounded">
<EditText
android:layout_width="30dp"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:gravity="center_horizontal"
android:maxLines="1"
style="#style/Widget.App.PurchaseAmountEditText" />
</FrameLayout>
<Button
android:layout_width="44dp"
android:layout_height="44dp"
android:layout_marginTop="6dp"
android:background="#drawable/button_filled"
android:text="+"
style="#style/Widget.App.PurchaseIncDecButton" />
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/dialogCentralContent"
android:text="#string/buttonBuyText"
android:background="#drawable/button_submit"
style="#style/Widget.App.SubmitButton" />
</RelativeLayout>
</layout>
Now with the above code only, my dialog takes up whole width of the screen. If I however do this, in the fragment java code:
AlertDialog dialog = new AlertDialog.Builder(getActivity(), R.style.DialogTheme) /// the rest of the code
And add a theme:
<resources>
<style name="DialogTheme" parent="#android:style/Theme.Material.Dialog.Alert">
<item name="android:windowMinWidthMajor">380dp</item>
<item name="android:windowMinWidthMinor">380dp</item>
</style>
</resources>
Then some funky stuff happens. On API23 all looks fine, while on API19 and below (didn't check apis between 19 and 23) the dialog is 100% wide and aligned to top of the screen. How to make it work the way I'd like it to?

There's one really simple solution to this. Just put your layout inside, for example a FrameLayout and set appropriate paddings on the outer layout element. Then everything is gonna look the same across all apis:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/defaultMargin"
android:paddingRight="#dimen/defaultMargin">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</RelativeLayout>
</FrameLayout>

Have you tried this ?
How to Build AppCompatDialog From AlertDialog.Builder or Equivalent?
It suggests you to use android.support.v7.app.AlertDialog rather than android.app.AlertDialog
So for dialogs with multiple choices try AppCompactDialog
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(), R.style.DialogTheme)
.setView(binding.getRoot())
.create();
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
AppCompatDialog alert = builder.create();
alert.show();
I have not tried this. Let me know if this works.

<item name="android:windowMinWidthMinor">380dp</item>
this will keep the dialog width to be a mininum of 380dp, but if device width < 380dp, then the dialog will take up the whole available space
If you tested with a device with a smaller width(very likely if the device has a lower api, for example Galaxy Nexus's width is 360dp), of course it will take up the whole width.
It's better to specify the minWidth as a percentage
for your particular case, to achieve a predefined margin(without modifying the Window's layout attributes programmatically), we can set the min width to be 100%
<item name="android:windowMinWidthMinor">100%</item>
and use an inset drawble as the windowBackground, which is already the case if you are using AppCompat
<item name="android:windowBackground">#drawable/abc_dialog_material_background</item>
abc_dialog_material_background:
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="16dp"
android:insetTop="16dp"
android:insetRight="16dp"
android:insetBottom="16dp">
<shape android:shape="rectangle">
<corners android:radius="#dimen/abc_dialog_corner_radius_material" />
<solid android:color="#android:color/white" />
</shape>
</inset>

How to customise android dialogs to material theme?

I wanted to customise android Dialog to make it look like a floating dialog as below which is suggested in https://material.google.com/components/dialogs.html#dialogs-simple-dialogs
I tried creating a DialogFragment in which onCreateDialog returns a Dialog with a view whose root is a CardView.But couldn't get the expected result.Can I have some suggestions on how to achieve this?
My layout looks like this,
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center|top"
card_view:cardElevation="5dp"
card_view:cardPreventCornerOverlap="false">
//Contents come here
</android.support.v7.widget.CardView>
and in code,
public Dialog onCreateDialog(Bundle savedInstanceState) {
Dialog dialog = new Dialog(getActivity());
View view = LayoutInflater.from(getActivity()).inflate(R.layout.dialog_font_selection,null,false);
dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(view);
float width = (I am getting screen width here) * .80f;
dialog.getWindow().setLayout((int) width, ViewGroup.LayoutParams.WRAP_CONTENT);
return dialog;
}`
but the result looks like this,
Instead of getting elevation I was getting a black shade

AlertDialog.Builder mydialog = new AlertDialog.Builder( context);
mydialog.setTitle("Set backup accounts");
mydialog.setItems(CharSequence[] items, OnClickListener);
mydialog.show();
mydialog.setContentView(R.layout.mydialogLayout);
This in your activity/fragment. And so declare your layout as follow:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:id="#+id/myID1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
After that, if you want to handle the clicks just do that:
TextView myView1 = (TextView) mydialog.findViewById(myID1);
myView1.setOnClickListener(...);

MaterialAlertDialogBuilder is now available for Android:
material.io/develop/android/components/dialog

Change style for AlertDialog lower grey panel

What style is causing the grey bar in the bottom of an AlertDialog?
Either I need to change the rest of the dialog to match the color or vice versa. I've tried modifying #android:buttonStyle and #android:buttonBarStyle. That helps but there's still some grey peeking out from the edges of the region.
Here are my current styles:
<style name="MyAlertDialog" parent="#android:style/Theme.Dialog">
<item name="#android:background">#FF000000</item>
<item name="#android:buttonBarStyle">#style/MyButtonBar</item>
</style>
<style name="MyButtonBar" parent="#android:style/ButtonBar">
<item name="#android:background">#FF000000</item>
</style>
And it looks like this:

Here is a working solution, based on Rod_Algonquin's idea of using a custom layout.
private void showCustomAlert (String message)
{
// build dialog
LayoutInflater inflater = getLayoutInflater();
View alertView = inflater.inflate (R.layout.custom_dialog, null);
AlertDialog.Builder builder = new AlertDialog.Builder (this, R.style.CustomAlertDialog);
builder.setView (alertView);
final AlertDialog alert = builder.create();
// message
((TextView)alertView.findViewById (R.id.message)).setText (message);
// ok button
alertView.findViewById (R.id.cancel).setOnClickListener (new View.OnClickListener()
{
#Override public void onClick(View v) { alert.dismiss(); }
});
// show
alert.show();
}
Here is a layout that works with this code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#FF000000">
<TextView android:id="#+id/alertTitle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:gravity="center"
android:background="#android:color/black"
android:textColor="#android:color/white"
android:textAppearance="#android:style/TextAppearance.Large"
android:text="#string/custom_alert_title" />
<TextView android:id="#+id/message"
style="#android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:background="#android:color/black"
android:textColor="#android:color/white"
android:textAppearance="#android:style/TextAppearance.Medium" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:background="#android:color/black"
android:measureWithLargestChild="true">
<Button android:id="#+id/cancel"
style="?android:attr/buttonBarButtonStyle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:minHeight="50dp"
android:minWidth="100dp"
android:textSize="14sp"
android:text="#android:string/ok" />
</LinearLayout>
</LinearLayout>
Finally, here's the styles, from styles.xml, I referenced; you may not need them depending on your dialog coloring.
<style name="CustomAlertDialog" parent="#android:style/Theme.Dialog">
<item name="#android:background">#FF000000</item>
<item name="#android:buttonBarStyle">#style/CustomButtonBar</item>
</style>
<style name="CustomButtonBar" parent="#android:style/ButtonBar">
<item name="#android:background">#FF000000</item>
</style>

how to remove rectangle frame of the custom dialog

i custom a dialog :
public class CustomizeDialog extends Dialog implements OnClickListener {
Button close;
TextView tv;
public CustomizeDialog(Context context,String Stringcontent) {
super(context);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.custom_diolog_main);
tv=(TextView) findViewById(R.id.content);
tv.setText(Stringcontent);
close = (Button) findViewById(R.id.close);
close.setOnClickListener(this);
}
#Override
public void onClick(View v) {
if (v == close)
dismiss();
}
}
the xml is
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="100dip"
android:orientation="vertical"
android:background="#drawable/custom_diolog_bg"
android:layout_width="250dip">
<TextView android:layout_height="wrap_content"
android:textColor="#000"
android:textStyle="bold"
android:textSize="18sp"
android:id="#+id/content"
android:layout_marginLeft="15dip"
android:layout_marginTop="5dip"
android:layout_alignParentTop="true"
android:layout_width="250dip"
android:text=" Custom Dialog "/>
<Button android:layout_width="70dip"
android:layout_marginLeft="80dip"
android:background="#drawable/custom_dialog_button_bg"
android:layout_alignParentBottom="true"
android:layout_height="40dip" android:text="关闭"
android:id="#+id/close"></Button>
</RelativeLayout>
my dialog is vrry well,but custom_diolog_bg is a rounded rectangle image,and when i show my dialog ,it show a system Frame behide my custom,so i used this.getwindow.setBackgroundDrawable(null),then the system Frame seems have remove but only the Four Corners not remove,we also see dark Four Corners,because i used the rounded rectangle image.so my question how to remove all the Frame so that my dialog seem Very well
the pic is http://i.stack.imgur.com/EG7oz.jpg ,so you can see there is dark frame in the last,how to remove it? thank you

Solution that worked for me
<style name="DialogTheme" parent="#android:style/Theme.Dialog">
<item name="android:windowBackground">#android:color/transparent</item>
</style>
Dialog dialog = new Dialog(this, R.style.DialogTheme);

Use following lines before calling setContentView() :-
getWindow().requestFeature(Window.FEATURE_NO_TITLE);
getWindow().setBackgroundDrawable(
new ColorDrawable(android.graphics.Color.TRANSPARENT));
will work perfectly.

Dialog mydialog = new dialog (this,android.R.style.Theme_Translucent_NoTitleBar);

instead of calling
super(context);
call
super(context, android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);
Update : Use this xml layout instead
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="100dip"
android:orientation="vertical"
android:background="#drawable/custom_diolog_bg"
android:layout_width="250dip">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_centerInParent="true">
<TextView
android:layout_height="wrap_content"
android:textColor="#000"
android:textStyle="bold"
android:textSize="18sp"
android:id="#+id/content"
android:layout_marginLeft="15dip"
android:layout_marginTop="5dip"
android:layout_alignParentTop="true"
android:layout_width="250dip"
android:text=" Custom Dialog " />
<Button
android:layout_width="70dip"
android:layout_marginLeft="80dip"
android:background="#drawable/custom_dialog_button_bg"
android:layout_alignParentBottom="true"
android:layout_height="40dip"
android:text="关闭"
android:id="#+id/close"></Button>
</LinearLayout>
</RelativeLayout>

Try this it worked for me like a charm.
ContextThemeWrapper wrapper = new ContextThemeWrapper(this, android.R.style.Theme_Holo);
final LayoutInflater inflater = (LayoutInflater) wrapper.getSystemService(LAYOUT_INFLATER_SERVICE);
AlertDialog.Builder builder = new AlertDialog.Builder(wrapper);

Set AlertBox Title Bar Background Color

How can I change the background color for an alertbox's title bar?
AlertDialog.Builder alert=new AlertDialog.Builder(getParent());
alert.setTitle("sample");
alert.show();

The easiest way is to subclass a dialog by creating a class which extends dialog and implements the constructor which take style as a parameter. Then make your own custom layout to it.
The Code to show the dialog:
private void showDialog()
{
Custom_Dialog dialog = new Custom_Dialog(this, R.style.myCoolDialog);
dialog.setContentView(R.layout.custom_dialog);
dialog.setTitle("Custom Dialog");
TextView text = (TextView) dialog.findViewById(R.id.text);
text.setText("Hello, this is a custom dialog!");
ImageView image = (ImageView) dialog.findViewById(R.id.image);
image.setImageResource(R.drawable.icon);
dialog.show();
}
The code for the subclass:
package com.stackoverflow;
import android.app.Dialog;
import android.content.Context;
public class Custom_Dialog extends Dialog {
protected Custom_Dialog(Context context, int theme) {
super(context, theme);
// TODO Auto-generated constructor stub
}
}
the style: myCoolDialog.xml
<resources>
<style name="myCoolDialog" parent="android:Theme.Dialog">
<item name="android:windowBackground">#drawable/blue</item>
<item name="android:colorForeground">#f0f0</item>
</style>
</resources>
and last the layout:custom_dialog.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_root"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp"
>
<ImageView android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="10dp"
/>
<TextView android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:textColor="#FFF"
/>
</LinearLayout>

You can just set custom title like this
LayoutInflater inflater = this.getLayoutInflater();
View titleView = inflater.inflate(R.layout.custom_title, null);
new AlertDialog.Builder(SubCategoryActivity.this)
.setCustomTitle(titleView);
and in custom_title layout you can create custom title like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:id="#+id/llsubhead"
android:background="#color/colorPrimary">
<TextView
android:id="#+id/exemptionSubHeading4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:text="Exemption Sub Head"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/white" />
</LinearLayout>
</LinearLayout>

From the answer #CornflakesDK and #ice spirit, I thought you can use the current AlertDialog.Builder implementation to do the custom dialog and make it easy to maintain.
CustomDialogBuilder.java
public class CustomDialogBuilder extends AlertDialog.Builder {
private View view;
public CustomDialogBuilder(Context context) {
super(context);
view = LayoutInflater.from(getContext()).inflate(R.layout.custom_dialog_title, null);
setCustomTitle(view);
}
#Override
public Builder setTitle(int titleId) {
TextView titleTextView = view.findViewById(R.id.exemptionSubHeading4);
titleTextView.setText(getContext().getString(titleId));
return this;
}
#Override
public Builder setTitle(CharSequence title) {
TextView titleTextView = view.findViewById(R.id.exemptionSubHeading4);
titleTextView.setText(title);
return this;
}
}
custom_dialog.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">
<LinearLayout
android:id="#+id/llsubhead"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#color/black"
android:orientation="vertical">
<TextView
android:id="#+id/exemptionSubHeading4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="15dp"
android:layout_gravity="center"
android:text="Exemption Sub Head"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/white" />
</LinearLayout>
</LinearLayout>
Inside your activity code,
new CustomDialogBuilder(MyActivity.this)
.setTitle(R.string.actions)
.setItems(R.array.items_actions, (dialog, which) -> {
// handle items
}).create().show();
Then, you can have styling inside the DialogBuilder and also utilize the functions of the AlertDialog.Builder.