View outside a Dialogs bounds

问题

I want something like this:

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.

回答1:

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

回答2:

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

回答3:

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:

回答4:

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

来源：https://stackoverflow.com/questions/25361027/view-outside-a-dialogs-bounds