Part of a Button outside of a Dialog

Question

I'm trying to achieve something like this:

Does anyone have an idea on how to make a Button stay partially outside a Dialog and be always under the text?

Here is my Dialog layout:

<?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:alpha="180"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginTop="24dp"
        android:background="@drawable/actionbar_selector"
        android:orientation="vertical"
        android:weightSum="1">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="8dp"
            android:src="@drawable/ic_error_outline" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="16dp"
            android:text="@string/drive_carefully_title"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/blue_light" />

        <TextView
            android:id="@+id/textView6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="32dp"
            android:text="@string/drive_carefully_message"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@color/blue_light" />

        <TextView
            android:id="@+id/ok_button"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_marginBottom="16dp"
            android:layout_marginTop="32dp"
            android:layout_weight="0.18"
            android:paddingBottom="8dp"
            android:paddingLeft="16dp"
            android:paddingRight="8dp"
            android:paddingTop="8dp"
            android:autoText="false"
            android:background="@drawable/ok_button"
            android:textColor="@color/blue_medium"
            android:text="@string/ok"
            android:textSize="24dp"
            android:clickable="true"
            android:layout_marginLeft="64dp"
            android:gravity="center"
            android:textStyle="bold">
        </TextView>

    </LinearLayout>

</RelativeLayout>

And here is how it looks at this point:

You can use a custom layout, in full screen. Then let its border be **transparent** and make it **appear like** the button is going outside the boundary. — Phantômaxx, Aug 30 '16 at 11:03
Why do you have that **unused** RelativeLayout? Nested layouts are **bad for performances**. — Phantômaxx, Aug 30 '16 at 11:22
Use `Drawable` and `ImageView` for your *ok button* don't use `Text View` for that. Refer as my answer. — Jay Rathod, Aug 30 '16 at 11:24
instead of making the button outside why dont u make the layout transparent instead — Neelay Srivastava, Aug 30 '16 at 12:50

Jay Rathod · Accepted Answer · 2016-08-30T11:44:39.367

You can make it like below if you have Drawable of that. Just pass that Drawable reference in below ImageView.

<?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:background="@android:color/transparent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="25dp"
        android:background="#111111">


        <!--Your rest of xml code-->

    </LinearLayout>


    <ImageView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="50dp"
        android:src="@drawable/logo" />

</RelativeLayout>

Set Height and Width of Image as per your requirement.

@Downvoter shoot your reason for downvote here. i have given an alternate way to achieve what asked in OP. Shoot your reason so that i can improve. — Jay Rathod, Aug 30 '16 at 12:02
I'm not the one that downvoted and I marked your answer as correct, but i would suggest one improvment. If you set ImageView below LinearLayout, and top margin -50dp the Dialog won't have to be fullscreen. Thanks for help btw. — Tomasz Świstak, Aug 30 '16 at 13:09

Part of a Button outside of a Dialog

1 Answers1