Create a RoundCorner dialog

This week I try to implement my task, first of all let’s make the layout.

This is a simple layout lets call it “example_dialog.xml” and fill it with an editText and button like this:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="test dialog"
    android:textSize="20dp" />
    <EditText
    android:id="@+id/etDate"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="say, Hello World"/>
    <Button
    android:id="@+id/btnCreateSchedule"
    android:layout_width="match_parent"
    android:layout_height="35dp"
    android:layout_marginTop="10dp"
    android:text="Ok"
    android:textColor="@android:color/white"
    android:textStyle="bold" />
</LinearLayout>

The code above is simply just a layout. and will looked like this:

simple layout

Now we will make this layout to be a dialog. Create the main layout like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.andre.exampledialog.MainActivity">

    <Button
        android:id="@+id/btnAddScheduleDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Show Dialog" />
</RelativeLayout>

it will look like this:

main layout

we want if we click the button, it will show the dialog layout. so make your “MainActivity.java” like this:

simple dialog

but, the dialog in mock up has rounded corner. how to make that? first we make a layout call “rounded_dialog.xml” like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <stroke android:color="@android:color/white" android:width="2dp" />
            <!--corners allow us to make the rounded corners button-->
            <corners android:radius="15dp" />
        </shape>
    </item>
</selector>

then insert that rounded dialog in the “example_dialog.xml” and make it 2 layer pile up like this:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/rounded_dialog"
        android:padding="35dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="test dialog"
            android:textSize="20dp" />
        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="say, Hello World"/>
        <Button
            android:id="@+id/okeyButton"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:layout_marginTop="10dp"
            android:text="Ok"
            android:textColor="@android:color/white"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

and make the back layer transparant like this :

mBuilder.setView(mView);
final AlertDialog dialog = mBuilder.create();
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.show();

finally, it will looks like this:

simple rounded corned dialog

I’m Andre Hendra Pratama, and that’s from me,

Thank You..