Custom Dialog in Kotlin

               On this blog I am going to explain How to create and display a custom Dialog on Kotlin. Here I am going to display a dialog with custom Title and Message which I pass to the dialog. 

colors.xml 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#DB3236</color>
    <color name="colorPrimaryDark">#C52D30</color>
    <color name="colorAccent">#111111</color>
    <color name="iconColor">#9a9999</color>
    <color name="Black">#000000</color>
    <color name="White">#fff</color>
    <color name="LightBlack">#111111</color>
    <color name="Gray">#777777</color>
    <color name="DarkGray">#444444</color>
    <color name="MediumGray">#dddddd</color>
    <color name="LightGray">#f5f5f2</color>
</resources>

styles.xml 

<resources>
    <style name="App_TextView_Normal">
        <item name="android:textColor">@color/DarkGray</item>
        <item name="android:textSize">14sp</item>
        <item name="android:fontFamily">@font/biryani</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
    </style>
    <style name="App_TextView_Title">
        <item name="android:textColor">@color/DarkGray</item>
        <item name="android:textSize">16sp</item>
        <item name="android:fontFamily">@font/biryani</item>
        <item name="android:gravity">center</item>
        <item name="android:textStyle">bold</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
    </style>

    <style name="App_TextView_Button">
        <item name="android:textColor">@color/DarkGray</item>
        <item name="android:textSize">16sp</item>
        <item name="android:fontFamily">@font/fjalla_one</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:minHeight">40dp</item>
    </style>
</resources>

rounded_white_bg.xml 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1px" android:color="@color/White" />
            <solid android:color="@color/White" />
            <corners android:radius="10dp"/>
        </shape>
    </item>
</layer-list>

info_dialog.xml 

This is the dialog layout file. You can remove the background colors, text colors and styles.

<?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="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/rounded_white_bg"
    android:paddingTop="5dp">
    <TextView
        android:id="@+id/txtTitle"
        style="@style/App_TextView_Title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:paddingTop="10dp"
        android:text="@string/Title" />
    <TextView
        android:id="@+id/txtMessage"
        style="@style/App_TextView_Normal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/Description"
        android:gravity="center|top"
        android:minLines="2"
        android:padding="5dp"/>

    <TextView
        style="@style/App_TextView_Normal"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_marginTop="1px"
        android:layout_marginBottom="1px"
        android:background="@color/MediumGray"/>

    <Button
        android:id="@+id/btnOK"
        style="@style/App_TextView_Button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/White"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:textColor="@color/colorPrimary"
        android:text="@string/OK" />
</LinearLayout>

InfoMessageDialog.kt

This is the kotlin class file, We will pass the "Title" and "Message" to the Dialog class and it will be displayed on the class. 

class InfoMessageDialog(context: Context, private var title : String, private var message : String)  : Dialog(context) {

    var mContext: Context
    var mTitle : String
    var mMessage :String

    init{
        this.mContext = context
        this.mTitle = title        this.mMessage = message    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        requestWindowFeature(Window.FEATURE_NO_TITLE)
        setContentView(R.layout.info_dialog)
        window!!.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT)
        setCanceledOnTouchOutside(true)

        var txtTitle = findViewById<TextView>(R.id.txtTitle)
        var txtMessage  = findViewById<TextView>(R.id.txtMessage)
        var btnOK  = findViewById<Button>(R.id.btnOK)

        txtTitle.setText(mTitle)
        txtMessage.setText(mMessage)

        btnOK.setOnClickListener(View.OnClickListener {             dismiss()
        })
    }
}

We can show this dialog using,

Fragment Page,

InfoMessageDialog(activity, getString(R.string.No_Network_Title), getString(R.string.No_Network_Message)).show();

Activity Page,

InfoMessageDialog(this, getString(R.string.No_Network_Title), getString(R.string.No_Network_Message)).show();

---------------
Thanks For Reading, Wish you a Happy Coding....