Develop Reference

DialogFragment with overlapping view

My motive is to have a base-card with an overlapping cardview icon view. I tried to achieve the same using Constraint Layout as a root and creating a DialogFragment out of it. However, the preview on IDE vs Phone is quite different.
I want to achieve:
DialogFragment with overlapping Icon
And The Background of ConstraintLayout should be transparent.
Here is comparison
user_profile_dialog.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="match_parent">
<LinearLayout
android:id="#+id/coins_count"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintLeft_toLeftOf="#+id/cardView"
app:layout_constraintStart_toStartOf="#id/textView2"
app:layout_constraintEnd_toEndOf="#id/textView2"
app:layout_constraintTop_toBottomOf="#id/textView2">
<TextView
style="#style/cardBodyText"
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="200" />
<TextView
style="#style/cardBodyText"
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="300"/>
</LinearLayout>
<TextView
style="#style/viewParent.headerText"
android:id="#+id/textView2"
android:layout_marginTop="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Aman Sharma"
app:layout_constraintRight_toRightOf="#id/cardView"
app:layout_constraintLeft_toLeftOf="#id/cardView"
app:layout_constraintTop_toBottomOf="#+id/materialCardView2" />
<androidx.cardview.widget.CardView
android:translationY="-50dp"
android:translationZ="-3dp"
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="400dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.google.android.material.card.MaterialCardView
android:id="#+id/materialCardView2"
android:layout_width="100dp"
android:layout_height="100dp"
android:clipChildren="true"
app:cardCornerRadius="50dp"
app:layout_constraintBottom_toTopOf="#id/cardView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/ic_user" />
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.button.MaterialButton
style="#style/myMaterialButton"
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add as Friend"
app:layout_constraintStart_toStartOf="#id/flexbox"
app:layout_constraintEnd_toEndOf="#id/flexbox"
app:layout_constraintTop_toBottomOf="#id/flexbox"
app:layout_constraintBottom_toBottomOf="#id/cardView"/>
<com.google.android.flexbox.FlexboxLayout
android:id="#+id/flexbox"
android:layout_marginTop="20dp"
android:minHeight="60dp"
app:alignItems="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#id/coins_count"
app:layout_constraintEnd_toEndOf="#id/coins_count"
app:layout_constraintTop_toBottomOf="#id/coins_count">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_user"/>
</com.google.android.flexbox.FlexboxLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Here is my DialogFragmentClass
UserProfileDialogjava
public class UserProfileDialog extends DialogFragment {
public UserProfileDialog() {
}
#Nullable
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
DialogUserProfileBinding binding=DialogUserProfileBinding.inflate(inflater,container,false);
return binding.getRoot();
}
#Override
public void onResume() {
super.onResume();
ViewGroup.LayoutParams params=getDialog().getWindow().getAttributes();
params.width= ViewGroup.LayoutParams.MATCH_PARENT;
params.height=ViewGroup.LayoutParams.WRAP_CONTENT;
getDialog().getWindow().setAttributes((WindowManager.LayoutParams) params);
}
}

Okay, here is what I did. First of all, I deleted your lines from onResume inside DialogFragment class. Then, inside your XML I added my picture for the user.
Inside the activity where you call for UserProfileDialog I used this:
FragmentManager fm = getSupportFragmentManager();
UserProfileDialog upd = new UserProfileDialog();
upd.setStyle(DialogFragment.STYLE_NO_TITLE, R.style.NoActionBarDialog);
upd.show(fm, "upd");
As you can see, I used setStyle() to set a custom style for your Dialog which is defined in themes.xml like this:
<!-- Dialog Theme -->
<style name="NoActionBarDialog" parent="Theme.MaterialComponents.Light.Dialog.Bridge">
<item name="windowActionBar">false</item>
<item name="android:windowMinWidthMajor">97%</item>
<item name="android:windowMinWidthMinor">97%</item>
<item name="windowNoTitle">true</item>
<item name="android:colorBackground">#android:color/transparent</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowActionBarOverlay">false</item>
<item name="android:windowCloseOnTouchOutside">false</item>
</style>
And then, you get this:
You can now play more with some other attributes to make it as you want it to be. Sorry for spacing and colors inside the view but this is my temp_project just for things like this and themes are chaos. So, it should be working fine when you implement this in your code.

Is it possible that Dialog can works with combitation of rounded corners and DayNight theme at same time in Android?

CURRENT UPDATE: Still not solved!
Question:
Is it possible that Dialog/AlertDialog/AlertDialogBuilder/MaterialAlaertDialogBuilder can works with combitation of rounded corners and DayNight theme at same time in Android?
I tired a lot, but I don't think that it is possible. Only one thing will work.
You can suggest me using material library.
Rounded corner with theme style is really possible in Dialog?
Code:
public void showFeedbackDialog(int code) {
exitCode = code;
dialog = new Dialog(context, R.style.dialogBoxStyle);
View dialogView = LayoutInflater.from(context).inflate(R.layout.row_feedback_dialog, null);
name = dialogView.findViewById(R.id.feedback_name);
email = dialogView.findViewById(R.id.feedback_email);
content = dialogView.findViewById(R.id.feedback_content);
TextView nameError = dialogView.findViewById(R.id.nameError);
emailError = dialogView.findViewById(R.id.emailError);
feedbackError = dialogView.findViewById(R.id.feedbackError);
progressBar = dialogView.findViewById(R.id.progress_bar);
skip = dialogView.findViewById(R.id.skip);
submit = dialogView.findViewById(R.id.button_positive);
cancel = dialogView.findViewById(R.id.button_negative);
dialog.setContentView(dialogView);
if (code == 101) {
skip.setVisibility(View.VISIBLE);
} else if (code == 102) {
skip.setVisibility(View.GONE);
}
dialog.setOnShowListener(new DialogInterface.OnShowListener() {
#Override
public void onShow(DialogInterface dialog) {
submit.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (checkValidation()) {
addFeedbackData();
}
}
});
cancel.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
dialog.dismiss();
}
});
skip.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (code == 101) {
FeedbackDialog.this.dialog.dismiss();
FixedCategorySingleton.getInstance().setNullObject();
activity.finishAffinity();
}
}
});
}
});
dialog.setCancelable(false);
dialog.show();
dialog.getWindow().getAttributes().windowAnimations = R.style.DialogAnimation;
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
}
row_feedback_dialog
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:focusableInTouchMode="true"
android:background="#drawable/dialog_positive_round"
app:cardCornerRadius="12dp"
android:orientation="vertical">
<include
layout="#layout/row_progress_bar"
android:visibility="gone" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<TextView
style="#style/dialog_hint_textview_style"
android:text="Please share your Feedback"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
style="#style/hint_textview_style"
android:text="#string/name" />
<EditText
android:id="#+id/feedback_name"
style="#style/edit_text_style"
android:singleLine="true"
android:imeOptions="actionNext" />
</LinearLayout>
<include
android:id="#+id/nameError"
layout="#layout/row_error_textview" />
<!-- <EditText
android:id="#+id/feedback_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorIconLightGray"
android:hint="Name (Optional)"
android:inputType="textPersonName"
android:textColor="?attr/textcolor" />-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
style="#style/hint_textview_style"
android:text="#string/email" />
<EditText
android:id="#+id/feedback_email"
style="#style/edit_text_style"
android:singleLine="true"
android:imeOptions="actionNext" />
</LinearLayout>
<include
android:id="#+id/emailError"
layout="#layout/row_error_textview" />
<!-- <EditText
android:id="#+id/feedback_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorIconLightGray"
android:hint="Email (Optional)"
android:inputType="textEmailAddress"
android:textColor="?attr/textcolor" />-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
style="#style/hint_textview_style"
android:text="What would you like to tell us?" />
<EditText
android:id="#+id/feedback_content"
style="#style/edit_text_style"
android:maxLines="4"
android:imeOptions="actionDone" />
</LinearLayout>
<!-- <EditText
android:id="#+id/feedback_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorIconLightGray"
android:gravity="top"
android:hint="What would you like to tell us?"
android:imeOptions="actionDone"
android:inputType="textMultiLine"
android:lines="5"
android:textColor="?attr/textcolor" />-->
<include
android:id="#+id/feedbackError"
layout="#layout/row_error_textview" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/backgroundcolor">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/skip"
android:layout_width="70dp"
android:layout_height="40dp"
android:background="?attr/backgroundcolor"
android:text="#string/skip_caps"
android:textColor="?attr/textcolor"
android:visibility="gone" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="horizontal">
<Button
android:id="#+id/button_negative"
android:layout_width="70dp"
android:layout_height="40dp"
android:background="?attr/backgroundcolor"
android:text="#string/cancel"
android:textColor="?attr/textcolor" />
<Button
android:id="#+id/button_positive"
android:layout_width="70dp"
android:layout_height="40dp"
android:background="?attr/backgroundcolor"
android:text="#string/submit"
android:textColor="?attr/textcolor" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
style
<style name="dialogBoxStyle" parent="Theme.AppCompat.DayNight.Dialog.Alert">
<item name="android:background">?attr/backgroundcolor</item>
<item name="android:textColor">?attr/textcolor</item>
<item name="android:textColorAlertDialogListItem">?attr/textcolor</item>
<item name="android:textColorSecondary">?attr/textcolor</item>
<item name="android:textColorPrimary">?attr/textcolor</item>
<item name="colorAccent">?attr/textcolor</item>
<item name="android:typeface">normal</item>
<item name="textColorAlertDialogListItem">?attr/textcolor</item>
</style>
If I don't use theme then everything will work fine. corner are coming in rounded shape because of getWindow line.
But, in my app I'm using theme also.
I request you to help me, I finally created this account because of I need solution.
UPDATE:
tried with material library, not giving any effect

You can use the MaterialAlertDialogBuilder included in the Material Components
library.
Use the method .setView(R.layout.dialog_layout) to inflate your custom layout.
Something like:
new MaterialAlertDialogBuilder(MainActivity.this,
R.style.MyThemeOverlay_MaterialComponents_MaterialAlertDialog)
.setTitle("Dialog")
.setView(R.layout.dialog_layout)
.setPositiveButton("Ok", null)
.setNegativeButton("Skip", null)
.show();
Then use the shapeAppearanceOverlay to define your shape and apply rounded corners (it requires v.1.1.0).
<!-- Alert Dialog -->
<style name="MyThemeOverlay.MaterialComponents.MaterialAlertDialog" parent="#style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="shapeAppearanceOverlay">#style/ShapeAppearanceOverlay.MyApp.Dialog.Rounded</item>
<item name="buttonBarPositiveButtonStyle">#style/PositiveButtonStyle</item>
...
</style>
<style name="PositiveButtonStyle" parent="#style/Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textColor">#FFFFFF</item>
<item name="backgroundTint">#00f</item>
</style>
<!-- Rounded corners -->
<style name="ShapeAppearanceOverlay.MyApp.Dialog.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">16dp</item>
</style>
Also you can use the attribute materialThemeOverlay to override the default style/color defined in your app theme, without changing it for all components.
Something like:
<style name="MyThemeOverlay.MaterialComponents.MaterialAlertDialog" parent="#style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="materialThemeOverlay">#style/MyAlThemeOverlay</item>
...
</style>
<style name="MyAlThemeOverlay" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox">
<item name="colorPrimary">#color/....</item>
</style>
Also the Material Components library supports the DayNight theme.
Your app theme has just to inherit from Theme.MaterialComponents.DayNight.
Something like:
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight">
<!-- ... -->
</style>
or:
res/values/themes.xml:
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">
<!-- ... -->
</style>
res/values-night/themes.xml:
<style name="Theme.MyApp" parent="Theme.MaterialComponents">
<!-- ... -->
</style>
Without changing your code, the AlertDialog inherits from the app theme.

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);

Adding a close button to a DialogFragment

I've been trying to make a DialogFragment have a close button in the top left, as seen in the photo. What the final result should look like (Sorry about the text, it's in romanian) Could anyone tell me how I could go about doing that?
Here's the layout for the fragment:
<android.support.constraint.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="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:background="#FFFFFF"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="-50dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample Text"/>
<!---add your views here-->
</LinearLayout>
<ImageView
android:id="#+id/imageView_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:clickable="true"
android:src="#drawable/ic_close_dialog" />
The way the fragment looks now: A small box where the image and text are overlayed

You can create a custom layout and use
dialog.setContentView(R.layout.custom_view);
Refer custom dialog with close button
If it still comes like it does in the picture, a possibility is that the container view for this constraint layout has wrap_content as its width and height.

Create a custom dialog class that extends dialog and then use an xml file to define your layout like you would for an activity.
public class CustomDialogClass extends Dialog {
public CustomDialogClass(Activity a) {
super(a);
}
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.custom_dialog);
}
}
And have your custom_dialog.xml layout file define the layout

on your button click use :
if (mProgressDialog != null) {
if (mProgressDialog.isShowing()) {
mProgressDialog.dismiss();
mProgressDialog = null;
}
}
ProgressDialog mProgressDialog;

dialog_xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
android:orientation="horizontal"
android:background="#color/transparent">
<FrameLayout
android:id="#+id/contentView"
android:layout_width="300dp"
android:layout_height="300dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<!-- you will add content here -->
</FrameLayout>
<ImageView
android:id="#+id/ivCloseButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:contentDescription="#string/content_description"
app:layout_constraintBottom_toTopOf="#+id/contentView"
app:layout_constraintEnd_toEndOf="#+id/contentView"
app:layout_constraintStart_toEndOf="#+id/contentView"
app:layout_constraintTop_toTopOf="#+id/contentView"
app:srcCompat="#android:drawable/ic_menu_close_clear_cancel" />
</android.support.constraint.ConstraintLayout>
style:
<style name="TransparentDialog" parent="#style/Base.Theme.AppCompat.Light.Dialog">
<item name="colorPrimaryDark">#android:color/black</item> <!-- you can change here -->
<item name="android:windowBackground">#android:color/transparent</item> <!-- this is important -->
<item name="android:windowIsFloating">false</item> <!-- this is important -->
<item name="android:windowNoTitle">true</item> <!-- this is important -->
</style>

Remove Android alert dialog empty space at the top

I have an Android layout that's used for showing an "about app" alert dialog with a "Close" button. It has a title in bold centered, the app version and the developer name. Everything looks fine except that there's a very noticeable margin/padding above the title and I can't remove that empty space.
Here's the layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:orientation="vertical" android:scrollbars="none" android:layout_width="fill_parent" android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginRight="6.0dp" xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center">
<TextView android:textSize="16.0dip" android:textStyle="bold" android:textColor="#ffffffff" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="6.0dip" android:layout_marginRight="6.0dip" android:layout_marginBottom="10.0dip" android:text="#string/app_name" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal">
<TextView android:textSize="14.0dip" android:textColor="#ffffffff" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="6.0dip" android:layout_marginTop="0.0dip" android:text="#string/version_text" />
<TextView android:textSize="14.0dip" android:textColor="#ffffffff" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="6.0dip" android:layout_marginTop="0.0dip" android:text="#string/app_version" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical">
<TextView android:textSize="14.0dip" android:textColor="#ffffffff" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="6.0dip" android:text="#string/about_developer" />
</LinearLayout>
<LinearLayout android:gravity="center" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="10.0dip" xmlns:android="http://schemas.android.com/apk/res/android">
<Button android:id="#id/close_btn" android:layout_width="110.0dip" android:layout_height="44.0dip" android:layout_marginTop="4.0dip" android:layout_marginBottom="4.0dip" android:text="#string/about_close" />
</LinearLayout>
</LinearLayout>
</ScrollView>
And here's what it shows:
I have tried adding android:layout_marginTop="-10.0dip" attribute in many tags and searched SO for a similar issue but I can't find it. I'd be thankful if someone shows me how solve this problem.

You could try to make your own Dialog with a custom View by using a DialogFragment and set this
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
Or maybe just try to use a simple Dialog, not an AlertDialog like this
Dialog dialog = new Dialog(theContext);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(yourCustomView);
dialog.show();

Create style for the AlertDialog:
<style name="AlertDialogCustom" parent="#android:style/Theme.Dialog">
<item name="android:windowNoTitle">true</item>
<item name="android:background">#ffffff</item>
<item name="android:textColorPrimary">#000000</item>
<item name="android:textColor">#000000</item>
<item name="android:typeface">monospace</item>
<item name="android:textSize">12sp</item>
</style>
Define this style while creating AlertDialog
AlertDialog.Builder builder = new AlertDialog.Builder(container.getContext(), R.style.AlertDialogCustom);

Use a RelativeLayout instead (the code below needs to be adjusted to fit your needs, but it gives the general layout):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="App Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:id="#+id/textView" />
<TextView
android:text="Version 1.0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="29dp"
android:id="#+id/textView2" />
<TextView
android:text="Developed by Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView2"
android:layout_centerHorizontal="true"
android:layout_marginTop="23dp"
android:id="#+id/textView3" />
<Button
android:text="Close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView3"
android:layout_alignLeft="#+id/textView2"
android:layout_alignStart="#+id/textView2"
android:layout_marginTop="42dp"
android:id="#+id/button2" />
</RelativeLayout>
You can also use a Dialog instead like others have mentioned.
EDIT:
You can try using a custom Dialog instead then using a DialogFragment. To call the Dialog, use this: new CustomDialogFragment().show(getSupportFragmentManager(), "mydialog");
Then create a new class extending DialogFragment, and use something similar to this:
public class DonateDialogFragment extends DialogFragment implements View.OnClickListener
{
private AlertDialog dialog;
public interface CustomDialogListener {
void buttonClicked();
}
#Override
public void onAttach(Activity activity) {
super.onAttach(activity);
if (!(activity instanceof CustomDialogListener)) {
throw new ClassCastException(activity.toString() + " must implement CustomDialogListener");
}
}
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
AlertDialog.Builder customDialogMain = new AlertDialog.Builder(getActivity());
donateDialogMain.setCancelable(true);
LayoutInflater inflater = getActivity().getLayoutInflater();
View view = inflater.inflate(R.layout.--YOUR-CUSTOM-DIALOG-LAYOUT-HERE--, null);
view.findViewById(R.id.close_btn).setOnClickListener(this);
customDialogMain.setView(view);
dialog = customDialogMain.show();
return dialog;
}
public void onClick(View v) {
// does something very interesting
switch (v.getId())
{
case R.id.close_btn:
((CustomDialogListener) getActivity()).buttonClicked();
dialog.dismiss();
break;
}
}
}

you can use this style direct to style.xml
<style name="Theme.UserDialog.AppCompat" parent="Theme.AppCompat.Dialog">
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowIsFloating">true</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowCloseOnTouchOutside">true</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:windowBackground">#android:color/white</item>
<item name="android:minWidth">600dp</item>
</style>
Apply this style to the activity class which you wants to set as alert dialog
android:theme="#style/Theme.UserDialog.AppCompat"
and start activity using Intent like
Intent activity= new Intent(this, AlertActivity.class);
startActivity(activity);