Search code examples
androidxml

Android: How do I align a view over the border of a layout?

My code:

dialog_box.xml:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="5dp"
    android:insetRight="5dp"
    android:insetTop="5dp"
    android:insetBottom="5dp">
<shape android:shape="rectangle">
    <corners android:radius="20dp"/>
    <solid android:color="@color/white"/>
    <stroke android:width="2dp"
        android:color="@color/black"/>
</shape>
</inset>

custom_dialog_layout.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:background="@drawable/dialog_box"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:elevation="5dp"
        android:layout_marginTop="30dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="10dp"
            android:orientation="vertical"
            android:gravity="center">

            <com.airbnb.lottie.LottieAnimationView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:elevation="10dp"
                app:lottie_autoPlay="true"
                app:lottie_rawRes="@raw/submit"
                app:lottie_loop="true" />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/dialogtext"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text=""
                android:layout_marginTop="15dp"
                android:textColor="@color/black"
                android:textStyle="bold"
                android:gravity="center"
                android:textSize="18sp"
                android:fontFamily="sans-serif-smallcaps"/>

            <Space
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>

            <com.google.android.material.button.MaterialButton
                android:id="@+id/ok"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="OK, got it"
                android:backgroundTint="@color/black"/>
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

Right now, my view shows like this:

enter image description here

Whereas I want it like this:

enter image description here

As you can see, right now the button is inside the dialog box. I want the button to be aligned over the outline border of the dialog_box.xml. Where am I going wrong? Please guide me in getting the desired outcome

Solution

  • Hopefully this will at least give you ideas even if not quite what you want:

    1. Move the MaterialButton to outside its current parent to the first RelativeLayout.
    2. Set an id for the original parent RelativeLayout and set this as the value of layout_below for the MaterialButton. Also set layout_centerHorizontal to true.
    3. Set the layout_marginTop of the MaterialButton to the required negative amount (e.g. -24dp)
    4. Remove the elevation value or move it to the first RelativeLayout.

    Something like (DO NOT just copy paste, I had to remove the lottie animation view and add text color to the button to test my end):

    <?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:elevation="4dp">

    <RelativeLayout
        android:id="@+id/dialog_content"
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:background="@drawable/dialog_box"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:layout_marginTop="30dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="10dp"
            android:orientation="vertical"
            android:gravity="center">

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/dialogtext"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text=""
                android:layout_marginTop="15dp"
                android:textColor="@color/black"
                android:textStyle="bold"
                android:gravity="center"
                android:textSize="18sp"
                android:fontFamily="sans-serif-smallcaps"/>

            <Space
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
        </LinearLayout>
    </RelativeLayout>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/dialog_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="-24dp"
        android:textColor="@android:color/white"
        android:text="OK, got it"
        android:backgroundTint="@color/black"/>
</RelativeLayout>

    enter image description here