Let us make Kotlin Custom Dialog With Image and Title example.
This custom dialog will also have two buttons like Ok and Cancel.
We will also add the image in our custom dialog using Kotlin language.
In this example, we will create one specific layout file where you can customize your pop up dialog.
We will make a custom dialog in such a way that you will be able to add any UI widget like Text View, Edit Text, Button etc.
A separate XML file will be there for the layout of dialog so that we can add any UI widget we desire.
First of all, focus on the following video.
Step 1. Inserting Image
Make a new project in the android studio with empty activity as the default one.
Also you need to set the Kotlin as the core language of the project.
Now let us add the image in the dialog. For this, you need to add the image in the project.
Click on the below link to download the image.
https://demonuts.com/wp-content/uploads/2018/08/twi.zip
After downloading the above image, app->res->drawable directory.
Step 2. Writing Button Drawable Files
Navigate to app->res->drawable directory. Make a new file called button.xml
You should write the following in button.xml file.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#9292e6"
android:centerColor="#3838c6"
android:endColor="#100669"
android:angle="270" />
</shape>
This file will create the attractive background for the button.
For this, it is using three types of colors. These colors will create the gradient effect for the background.
Now in the same directory, make another file and give it a name like button_yellow.xml
Below is the code block for the button_yellow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#cebd0a"
android:centerColor="#cac520"
android:endColor="#d2d04c"
android:angle="270" />
</shape>
This file is also used for the button background creation but this file have used different colors than the previous one.
Step 3. Dialog XML File
Go to app->res->layout directory. Here, create a new file with the name as dialog_layout.xml
Now copy the following lines in dialog_layout.xml file.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/a"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#e46f16"
android:gravity="center"
android:scaleType="fitCenter"
android:src="@drawable/twi" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:layout_below="@+id/a"
android:orientation="vertical">
<TextView
android:id="@+id/text_dialog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/a"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="20dp"
android:gravity="center_horizontal"
android:text="Your Custom Dialog"
android:textColor="#ff000000"
android:textSize="20sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button"
android:textSize="20sp"
android:text="OK"
android:textColor="#ffffffff" />
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="@drawable/button_yellow"
android:gravity="center_vertical|center_horizontal"
android:text="Cancel"
android:textSize="20sp"
android:textColor="#ffffffff" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
This file has one image view, one text view and two buttons.
We will set that image in the image view which we have downloaded in the step 1.
Text view will hold some text and we will be able to customize it from the Kotlin file.
Ok and Cancel are the two buttons and we will control their on click event from Kotlin class.
Step 4. Final and Main Text
There are two main files in your android studio project : activity_main.xml and MainActivity.kt
Following is the source snippet for activity_main.xml file.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn1_d"
android:textSize="30sp"
android:layout_marginTop="20dp"
android:text="Open First custom Dialog"/>
</LinearLayout>
There is just one button in the above file. Compiler will open the custom dialog when the user clicks the button.
Open your MainActivity.kt file and write down the below lines in this file.
import android.app.Activity
import android.app.Dialog
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.view.Window
import android.widget.Button
import android.widget.TextView
class MainActivity : AppCompatActivity() {
private var btn1: Button? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
btn1 = findViewById(R.id.btn1_d)
btn1!!.setOnClickListener { showDialog(this@MainActivity, "First Custom Dialog") }
}
fun showDialog(activity: Activity, msg: String) {
val dialog = Dialog(activity)
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE)
dialog.setCancelable(false)
dialog.setContentView(R.layout.dialog_layout)
val text = dialog.findViewById(R.id.text_dialog) as TextView
text.text = msg
val dialogButton1 = dialog.findViewById(R.id.btn1) as Button
dialogButton1.setOnClickListener { dialog.dismiss() }
val dialogButton2 = dialog.findViewById(R.id.btn2) as Button
dialogButton2.setOnClickListener { dialog.dismiss() }
dialog.show()
}
}
First of all,compiler will create the object of the button. Then it will initialize it using it’s ID.
After this, on click event of button is written.
When the user clicks the button, compiler will call showDialog() method.
Below is the coding lines for showDialog() method.
fun showDialog(activity: Activity, msg: String) {
val dialog = Dialog(activity)
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE)
dialog.setCancelable(false)
dialog.setContentView(R.layout.dialog_layout)
val text = dialog.findViewById(R.id.text_dialog) as TextView
text.text = msg
val dialogButton1 = dialog.findViewById(R.id.btn1) as Button
dialogButton1.setOnClickListener { dialog.dismiss() }
val dialogButton2 = dialog.findViewById(R.id.btn2) as Button
dialogButton2.setOnClickListener { dialog.dismiss() }
dialog.show()
}
Compiler will first create the object of the Dialog class. Then it will set false in the setCancelable() method.
It means that user will not be able to remove dialog by tapping on blank screen part around the dialog.
After this, set the layout of the custom dialog. For this, it will use dialog_layout.xml file.
So by doing this, we can access the text view and buttons which we have inserted in the dialog_layout.xml file.
Now compiler will set the text in the text view.
For this, it uses the string that it has received from the second parameter of showDialog() method.
Finally, compiler will access two buttons of the dialog and it will write the click event for both of them.
On the click event of both the buttons, compiler will simply dismiss the custom dialog.
Download Kotlin Custom Dialog With Image and Title
https://github.com/demonuts/Kotlin-Custom-Dialog-With-Image-and-Title-Close-and-Two-Buttons