Develop Reference

Dialog not showing its contents

I have a problem with this specific dialog, I implemented it as an option to be shown in the Options Menu in my toolbar but it doesn't show the dialog's contents when I clicked on the option. I have tried these with other dialog layouts I have implemented and all of them work when I implemented them here so I have a hunch that the problem is with the XML layout but I can't seem to find the problem.
Code:
else if(id == R.id.action_setting)
{
Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.dialog_settings);
dialog.setTitle("Settings");
CheckBox set_splash = dialog.findViewById(R.id.setting_check);
boolean have_splash =pref.getBoolean(SplashActivity.HAVE_SPLASH,false);
if(have_splash)
set_splash.setChecked(true);
else
set_splash.setChecked(false);
ImageButton confirm_btn = dialog.findViewById(R.id.setting_confirm);
ImageButton cancel_btn = dialog.findViewById(R.id.setting_cancel);
confirm_btn.setOnClickListener(v -> {
boolean new_splash = set_splash.isChecked();
edit.putBoolean(SplashActivity.HAVE_SPLASH,new_splash);
edit.commit();
dialog.dismiss();
});
cancel_btn.setOnClickListener(v -> dialog.dismiss());
dialog.show();
}
XML :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout5">
<ImageButton
android:id="#+id/setting_confirm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/button_highlight_dark"
android:paddingVertical="20dp"
app:srcCompat="#drawable/ic_confirm" />
<ImageButton
android:id="#+id/setting_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/button_highlight_dark"
android:paddingVertical="20dp"
app:srcCompat="#drawable/ic_cancel" />
</LinearLayout>
<TextView
android:id="#+id/setting_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/themeDark"
android:paddingVertical="10dp"
android:paddingLeft="10dp"
android:text="#string/settings"
android:textColor="#color/white"
android:textSize="10pt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/linearLayout5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/themeLight"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setting_text">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="6"
android:textColor="#color/white"
android:paddingVertical="20dp"
android:paddingLeft="10dp"
android:text="#string/splash_setting"
android:textSize="10pt" />
<CheckBox
android:id="#+id/setting_check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

The match_parent parameters in your dialog are ignored. Therefore, the dialog has a width of 0.
The easiest way to get the correct height and width, is by using an AlertDialog.Builder.
If a customized AlertDialog isn't enough, you can make the dialog full size by following this answer:
Android get full width for custom Dialog
Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.dialog_settings);
Window window = dialog.getWindow();
window.setLayout(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

ConstraintLayout misbehaviour

This is my dialog,
public class TestDialog extends DialogFragment {
#Override
public View onCreateView(#NonNull LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.test_dialog, container, false);
}
}
When I am using RelativeLayout for my design like below,
<?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="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textTitle"
android:layout_width="match_parent"
android:layout_height="#dimen/dp48"
android:layout_alignParentTop="true"
android:fontFamily="#font/trebuchet"
android:gravity="center"
android:text="Test Dialog"
android:textColor="?attr/colorAccent"
android:textSize="18sp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textTitle"
android:src="#drawable/ic_baseline_public_24px"
android:tint="#color/black" />
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textTitle"
android:layout_marginStart="5dp"
android:layout_toEndOf="#+id/icon"
android:fontFamily="#font/trebuchet"
android:text="This is very long text, This is very long text, This is very long text" />
<com.google.android.material.button.MaterialButton
android:id="#+id/imageView_close"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/text"
android:layout_centerHorizontal="true"
android:contentDescription="#string/close"
android:src="#drawable/ic_baseline_close_24dx"
android:text="#string/cancel" />
</RelativeLayout>
I am getting this output.
But When I am using ConstraintLayout for my design like below,
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textTitle"
android:layout_width="0dp"
android:layout_height="#dimen/dp48"
android:fontFamily="#font/trebuchet"
android:gravity="center"
android:text="Test Dialog"
android:textColor="?attr/colorAccent"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textTitle"
android:src="#drawable/ic_baseline_public_24px"
android:tint="#color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textTitle" />
<TextView
android:id="#+id/text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:fontFamily="#font/trebuchet"
android:text="This is very long text, This is very long text, This is very long text"
app:layout_constraintStart_toEndOf="#+id/icon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textTitle" />
<com.google.android.material.button.MaterialButton
android:id="#+id/imageView_close"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/close"
android:src="#drawable/ic_baseline_close_24dx"
android:text="#string/cancel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am getting following output.
I don't know why this strange behavior. Only in dialog I am getting this behavior.
If anything I'm missing in constraint layout, please let me know friends, I'll correct myself.

all you have to do is set Theme to your dialog.
#Override
public int getTheme() {
return R.style.dialog;
}
style
<style name="dialog" parent="android:Theme.Dialog">
<item name="android:windowBackground">#drawable/radius</item>
<item name="android:windowMinWidthMajor">80%</item>
<item name="android:windowMinWidthMinor">85%</item>
<item name="android:windowNoTitle">true</item>
</style>
radius.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white" />
<corners android:radius="10dp" />
<padding
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
</shape>

I think the problem is android:layout_width="match_parent" in your ConstraintLayout tag. Since a Dialog has no fixed width, using match_parent won't work. Maybe you could set a fixed width, or a minimum width.

First, it's not the ConstraintLayout but how you are implementing the Dialog itself. It's a suggestion and according to Dialog Documentation:
The Dialog class is the base class for dialogs, but you should avoid
instantiating Dialog directly. Instead, use one of the following
subclasses:
AlertDialog
A dialog that can show a title, up to three buttons, a
list of selectable items, or a custom layout.
DatePickerDialog or TimePickerDialog
A dialog with a pre-defined UI that allows the user
to select a date or time.
So basically you'll be using setView api:
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
AlertDialog.Builder builder = new AlertDialog.Builder(requireActivity());
// Setting my layout here
builder.setView(R.layout.my_layout);
builder.setPositiveButton(/* My Methods */)
.setNegativeButton(/* My Methods */);
return builder.create();
}
Read about it in Creating a Custom Layout documentation. If you want more customization then create a custom theme within values > styles.xml which can be used throughout the app or just by setting it along with the builder, like:
new AlertDialog.Builder(requireActivity(), R.style.My_Alert_Dialog_Theme);

How do I create a two-color dialog like this?

I'm looking to create a Dialog styled like the below, but I'm a little stuck. It has rounded corners and two different background colors.
It will contain multiple Textviews in a vertical setup in the end. I tried to make a vertical LinearLayout contain two children that were also vertical LinearLayout, but that did not seem to go over well.
How do you create a view like this, with two colors of background that use the same rounded corners and can contain multiple, vertical items each?
My current code looks like this. I've set a single vertical layout, which uses a rounded-corners white background with padding, and I set the red background on the first two text-views, since they need to be white-on-red. However, their backgrounds can't push out to the edges of their parent because of the padding.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="600dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/warning_dialog_background"
android:padding="20dp"
style="#style/dialog" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="#color/Warning"
style="#style/white"
android:text="#string/warning_block_explanation"
android:paddingBottom="30dp"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
style="#style/title.warning"
android:text="#string/warning_block_warning_title"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
style="#style/safe.title"
android:text="#string/safe_title"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
style="#style/safe"
android:text="#string/safe_text"
/>
</LinearLayout>

You can create custom layout and inflate that layout using setContentView() for dialog;
custom dialog;
final Dialog dialog = new Dialog(context);
dialog.setContentView(R.layout.custom);
dialog.setTitle("Title...");
// set the custom dialog components - text, image and button
TextView text = (TextView) dialog.findViewById(R.id.text);
text.setText("Android custom dialog example!");
ImageView image = (ImageView) dialog.findViewById(R.id.image);
image.setImageResource(R.drawable.ic_launcher);
Button dialogButton = (Button) dialog.findViewById(R.id.dialogButtonOK);
// if button is clicked, close the custom dialog
dialogButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
Layout for this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="70"
android:text="White Text Goes Here"
android:gravity="center"
android:textColor="#fff"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:textSize="18dp"
android:background="#drawable/custom_drwable"/>
<TextView
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:layout_width="match_parent"
android:layout_height="120"
android:text="Red Text Goes Here"
android:gravity="center"
android:textColor="#F2122B"
android:textSize="18dp"
android:background="#fff"/>
</LinearLayout>
drawable for same:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#F2122B"/>
<corners android:topLeftRadius="4dp"
android:topRightRadius="4dp"/>
</shape>

Layout Design with Pop-up

In Android App, I have a card game designed with the Linear layout and image buttons. On completing a level in this game I have to do the following things as listed below...
I have to show a dialog like screen which should pop up on middle of screen. This pop-up should hold some background image and buttons on it. The pop-up should fly from bottom-up.
The card game parent screen should be blurred this this pop-up is shown.
I have seen the similar kind of effects in showing ads from Appflood.
Could you please give some suggestion to this effectively.
Parent Screen
With Pop-Up
Thanks in Advance..

Try that:
Don't use AlertDialog, you can use one normal layout and one normal class. ¿How?
It's easy, you have one class called "FirstActivity.java", and one second class called "SecondActivity.java".
FirstActivity
Designed this class as you like
SecondActivity
You are going to create your own popup with ImageView,Buttons and textviews and you are going to Overlay your layout background.
Popup_layout.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:orientation="vertical" >
<ImageView
android:id="#+id/popup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/popup_background" />
<ImageView
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="39dp"
android:layout_marginTop="72dp"
android:onClick="go"
android:src="#drawable/ok" />
<TextView
android:id="#+id/question"
android:text:"level completed"
</RelativeLayout>
manifest
Declare SecondActivity with custom Theme.
......
<activity
android:name="com.example.comandero.SecondActivity"
android:label="#string/app_name"
android:theme="#style/Theme.Overlay" />
.......
Styles.xml
Add new style for background on your layout.
<style name="Theme.Overlay" parent="android:style/Theme.Translucent">
<item name="android:windowNoTitle">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:background">#android:color/transparent</item>
</style>
Try it and say me please. If you dont understand something say me.

I have a very simple solution (and I tested it - it works pretty well, as illustrated by the pictures I posted).
Imagine you have an invisible (GONE) generic View that covers the whole screen (match_parent, match_parent) and has a reddish semitransparent color.
It would become VISIBLE before showing the Dialog and GONE again after dismissing it.
Since it's GONE, you don't see it and it doesn't waste any space until it becomes VISIBLE.
This approach requires the outer container being a FrameLayout or a RelativeLayout (by setting the View properly: anchoring it to the four Parent's corners).
I used a RelativeLayout - because I really love these containers.
dlg_red_bg.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
android:padding="8dp"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#android:color/black"
android:padding="8dp"
>
<Button
android:id="#+id/btnTopLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:background="#drawable/ball"
android:text="Btn 1"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
/>
<Button
android:id="#+id/btnTopRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#id/btnTopLeft"
android:background="#drawable/ball"
android:text="Btn 2"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
/>
<Button
android:id="#+id/btnBottomLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/btnTopLeft"
android:layout_alignParentLeft="true"
android:background="#drawable/ball"
android:text="Btn 3"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
/>
<Button
android:id="#+id/btnBottomRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/btnTopRight"
android:layout_toRightOf="#id/btnBottomLeft"
android:background="#drawable/ball"
android:text="Btn 4"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
/>
<Button
android:id="#+id/btnDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/ball"
android:onClick="clickHandler"
android:text="Dialog"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
/>
</RelativeLayout>
<View
android:id="#+id/vwRedOver"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:background="#8f00"
android:visibility="gone"
/>
</RelativeLayout>
code used to highlight the background
public void clickHandler(final View v)
{
switch(v.getId())
{
case R.id.btnDialog:
{
vwRedOver.setVisibility(View.VISIBLE);
final AlertDialog.Builder bld = new AlertDialog.Builder(this);
bld.setMessage("Some Message")
.setCancelable(true)
.setPositiveButton
(
"OK",
new DialogInterface.OnClickListener()
{
#Override
public final void onClick
(final DialogInterface dlg, final int id)
{
vwRedOver.setVisibility(View.GONE);
dlg.cancel();
}
}
)
.setNegativeButton
(
"Cancel",
new DialogInterface.OnClickListener()
{
#Override
public final void onClick
(final DialogInterface dlg, final int id)
{
vwRedOver.setVisibility(View.GONE);
dlg.cancel();
}
}
);
bld.create().show();
}
}
}
result
Before Clicking on "Dialog"
After Clicking on "Dialog"
NOTE 1: It's dark because of the black background
NOTE 2: You see a black border, because I set a padding on the outer RelativeLayout - you can remove it
After Clicking on either "OK" or "Cancel" - returns to the initial state (my Dialog doesn't do anything interesting on OK - It's only for demo purposes)

Android 3.1 Dialog not the right size

I am creating a custom dialog in my app and it looks fine in the Layout Editor, but is not the right size on the device. Here's the layout for the dialog:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/dialog_border"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:padding="10dp"
android:src="#drawable/wifi" />
<TextView
android:layout_height="wrap_content"
android:id="#+id/heading"
android:layout_below="#+id/image"
android:layout_width="wrap_content"
android:layout_margin="10dp"
android:layout_alignLeft="#+id/cancel_button"
android:layout_alignRight="#+id/continue_button"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/lost_connection"
android:layout_centerHorizontal="true" />
<TextView
android:layout_height="wrap_content"
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_below="#+id/heading"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_centerHorizontal="true"
android:layout_alignLeft="#+id/cancel_button"
android:layout_alignRight="#+id/continue_button"
android:gravity="center"
android:layout_margin="10dp"
android:text="#string/try_again" />
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toRightOf="#+id/cancel_button"
android:layout_below="#+id/description"
android:layout_centerHorizontal="true"
android:id="#+id/dismiss_button"
android:text="#string/dismiss" />
</RelativeLayout>
This is what it looks like in the Layout Editor:
But this is what it looks like on the device:
It has that weird bit of extra space at the top and right side and the button is compress vertically.

That blank area is the dialog title. It can be turned off when creating the DialogFragment as:
DialogFragment df = new MyDialogFragment();
df.setStyle(DialogFragment.STYLE_NO_TITLE, 0);
df.show(ft, "dialog");
Where the 0 in set style lets the platform choose an appropriate style and "dialog" is whatever tag you'd like to set for your dialog fragment.

I think that extra weird space at the top is the place for the dialog title. As i see on the screenshots you used a dialog and inflated a custom view into that dialog ?
I guess worth a try to hide the title of the dialog with yourDialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);