View outside a Dialogs bounds

Question

I want something like this:

playstorereview

The users profile picture is "popping out" over the dialogs bounds.

I've tried everything: messing with clipping with every possibly combination under the sun, dynamically creating the view after the dialog and adding it to the root content view, using a seperate view and loading that in with Dialog.setCustomTitle(), hacking the Images onDraw() methods and applying all-sorts of bounds/positional hacks --- but no matter what the image always gets clipped and split in half.

I've even gone to the extent of decompiling the Play Store APK and seeing how they did it. Unfortunately the resource files don't give much away and I can't find anything in the Smali.

Can anyone help? Please... :-(

EDIT: I'm just specifically talking about the user profile image at the top of the dialog, not the dialog itself.

Have you tried using an `Activity` with `dialog-theme` yet? (http://stackoverflow.com/questions/1979369/android-activity-as-a-dialog) — i_turo, Aug 18 '14 at 10:55

MHP · Accepted Answer · 2017-12-12T14:51:28.693

dialog method:

Dialog dialog = new Dialog(this);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.setContentView(R.layout.mhp);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
    dialog.show();

mhp.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/transparent" >

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="57dp"
    android:background="#f00"
    android:orientation="vertical" >
</LinearLayout>

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:src="@drawable/ic_launcher" />

</RelativeLayout>

result
Result picture

Awesome, thanks! I wanted to use AlertDialog but the transparency wouldn't work. This did the trick for me: http://stackoverflow.com/a/20015598/486604 — eth0, Aug 18 '14 at 11:44

score 4 · Answer 2 · answered Aug 18 '14 at 11:21

It looks like they are just having an rounded Image inside an ImageView and having a Layout with margin from top which is half of the imagesize,

So, if my imagesize is 100px, I should use 50dip to show image centered in all screen

 dialog.xml

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="200dip"
    android:layout_marginTop="50dip" 
    android:background="@android:color/holo_green_dark" >
</LinearLayout>

<ImageView
    android:id="@+id/imageview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:contentDescription="@string/app_name"
    android:src="@drawable/download" />

And then you just have your Dialog with Background Transparent

Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.dialog);
dialog.setCancelable(false);
dialog.getWindow().setBackgroundDrawable(
                                 new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.show();

OUTPUT

enter image description here

score 4 · Answer 3 · edited May 23 '17 at 11:46

Just to improve @MHP's answer, you can also add cardView to make the corner of your dialog rounded.

Something like:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="57dp"
    android:background="@android:color/transparent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/llMainContents"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FAFAFA"
        android:orientation="vertical"
        app:cardCornerRadius="2dp" />
</LinearLayout>

<ImageView
    android:id="@+id/ivIcon"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:padding="8dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:contentDescription="@null"
    android:src="@mipmap/ic_launcher" />

</RelativeLayout>

Result would be:

Amazing answer. above all solution i test but your answer is Perfect. And working fine. You save my day. — Daxesh V, May 10 '18 at 10:56

score 3 · Answer 4 · edited May 23 '17 at 11:54

Firstly you should make background of your dialog transparent. For DialogFragment: https://stackoverflow.com/a/23729785. For AlertDialog: https://stackoverflow.com/a/19175448. Secondly, combine your layouts in a way, like this:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/darker_gray">

        <TextView
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:text="blablabla"/>
    </RelativeLayout>

    <ImageView
        android:id="@+id/iv1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/ic_launcher"/>

</RelativeLayout>

Where iv1 is header image

View outside a Dialogs bounds

4 Answers4

Linked

Related