Custom dialog like view

Question

Im trying to create an alert similar to as following. I have replaced the text in the image with ediitext.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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_marginTop="20dp"
        android:background="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:layout_marginTop="-20dp"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:src="@drawable/ic_bell"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/border"
            android:gravity="top|left"
            android:inputType="textMultiLine"
            android:lines="8"
            android:maxLines="10"
            android:minLines="6"
            android:scrollbars="vertical"/>
    </LinearLayout>

    <LinearLayout
        android:background="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:weightSum="2">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/colorPrimary"
            android:text="Submit"
            android:textColor="@color/white"/>

        <View
            android:layout_width="4dp"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/colorPrimary"
            android:text="Cancel"
            android:textColor="@color/white"/>

    </LinearLayout>
</LinearLayout>

I have made the root layout to be transparent and i have made the child have white background. I have set margintop of imageview to -20 so it will protrude upwards but the im not be able to get the same effect. why so?

Answer 1

You can use FrameLayout to add view above another view and give margin to it so that it will look like it is a part of the same layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:background="@android:color/transparent"
            android:orientation="vertical">

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

                    <EditText
                        android:ems="10"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@android:color/white"
                        android:inputType="textMultiLine"
                        android:layout_marginTop="20dp"
                        android:lines="8"
                        android:maxLines="10"
                        android:minLines="6"
                        android:scrollbars="vertical" />

                <ImageView
                    android:layout_marginTop="0dp"
                    android:layout_width="wrap_content"
                    android:layout_height="50dp"
                    android:layout_gravity="center|top"
                    android:src="@drawable/ic_launcher" />
            </FrameLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="@android:color/white"
                android:weightSum="2">

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@android:color/black"
                    android:text="Submit"
                    android:textColor="#FFFFFF" />

                <View
                    android:layout_width="4dp"
                    android:layout_height="match_parent"
                    android:background="@android:color/transparent" />

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@android:color/black"
                    android:text="Cancel"
                    android:textColor="#FFFFFF" />

            </LinearLayout>
        </LinearLayout>

Answer 2

XML for given dialog --

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="280dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    >

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/transparent"
        android:orientation="vertical">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardCornerRadius="4dp"
            android:layout_marginTop="32dp"
            android:id="@+id/congratulation_card"
            app:cardBackgroundColor="#FAFAFA"
            app:cardElevation="0dp"
            android:layout_gravity="bottom">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:id="@+id/title"
                android:textSize="18sp"
                android:textColor="@android:color/primary_text_light"
                android:layout_marginTop="48dp"
                android:text="Congratulations"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="24dp"
                android:layout_marginLeft="32dp"
                android:textSize="16sp"
                android:layout_marginRight="32dp"
                android:id="@+id/message"
                android:gravity="center"
                android:text="You've just displayed this awesome pop up view "
                />
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Let's read"
                android:id="@+id/read_btn"
                android:layout_marginTop="32dp"
                android:layout_marginRight="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginBottom="16dp"
                android:textColor="@android:color/white"
                android:background="@drawable/primary_button"
                />
        </LinearLayout>
        </android.support.v7.widget.CardView>

            <ImageView
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:padding="1dp"
                android:src="@drawable/tick_green"
                android:background="@drawable/circular_tick"
                android:layout_gravity="center_horizontal|top"
                />

    </FrameLayout>
</LinearLayout>

Drawable Circular tick ---

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="#FAFAFA"
       />

    <size
        android:width="120dp"
        android:height="120dp"/>
</shape>

Drawable primary button --

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:radius="4dp" />
    <gradient
        android:startColor="@color/colorPrimaryLight"
        android:endColor="@color/colorPrimary"  />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

Worked for me.