DialogFragment with overlapping view

Question

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:

1. DialogFragment with overlapping Icon
2. 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);

    }
}

Answer 1

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.