How to make custom dialogs

Question

I have 9 imageButton in my activity view and they're defined by id's such as imageButton1 ~ imageButton9 I need to create dialog/alert/popup either of them in order to show more details regarding to each image button.

Question

As this is my very first attempt with android studio and I've read docs also some websites posts about dialogs yet it is very confusing to me, so the question is how do i create dialogs for each of imageButtons?

Code

xml file

<?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="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00FFFFFF"
        android:drawingCacheQuality="high"
        tools:context=".ShapesActivity">

    <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="65dp"
            android:orientation="horizontal"
            android:weightSum="3">

        <ImageButton
                android:id="@+id/imageButton1"
                android:layout_width="0dp"
                android:layout_height="146dp"
                android:layout_weight="1"
                android:background="#006B2D2D"
                android:contentDescription="@string/triangleDesc"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/triangle" />

        <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="0dp"
                android:layout_height="146dp"
                android:layout_weight="1"
                android:background="#006B2D2D"
                android:contentDescription="@string/trapezoidDesc"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/trapezoid" />

        <ImageButton
                android:id="@+id/imageButton3"
                android:layout_width="0dp"
                android:layout_height="146dp"
                android:layout_weight="1"
                android:background="#006B2D2D"
                android:contentDescription="@string/starDesc"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/star" />
    </LinearLayout>

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="210dp"
            android:orientation="horizontal"
            android:weightSum="3">

        <ImageButton
                android:id="@+id/imageButton4"
                android:layout_width="0dp"
                android:layout_height="146dp"
                android:layout_weight="1"
                android:background="#006B2D2D"
                android:contentDescription="@string/squareDesc"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/square" />

        <ImageButton
                android:id="@+id/imageButton5"
                android:layout_width="0dp"
                android:layout_height="146dp"
                android:layout_weight="1"
                android:background="#006B2D2D"
                android:contentDescription="@string/rectangleDesc"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/rectangle" />

        <ImageButton
                android:id="@+id/imageButton6"
                android:layout_width="0dp"
                android:layout_height="146dp"
                android:layout_weight="1"
                android:background="#006B2D2D"
                android:contentDescription="@string/octagonDesc"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/octagon" />
    </LinearLayout>

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="357dp"
            android:orientation="horizontal"
            android:weightSum="3">

        <ImageButton
                android:id="@+id/imageButton7"
                android:layout_width="0dp"
                android:layout_height="146dp"
                android:layout_weight="1"
                android:background="#006B2D2D"
                android:contentDescription="@string/heartDesc"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/heart" />

        <ImageButton
                android:id="@+id/imageButton8"
                android:layout_width="0dp"
                android:layout_height="146dp"
                android:layout_weight="1"
                android:background="#007E2F2F"
                android:contentDescription="@string/diamondDesc"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/diamond" />

        <ImageButton
                android:id="@+id/imageButton9"
                android:layout_width="0dp"
                android:layout_height="146dp"
                android:layout_weight="1"
                android:background="#00E040FB"
                android:contentDescription="@string/circleDesc"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/circle" />
    </LinearLayout>

</RelativeLayout>

kotlin file

import android.content.Intent
import android.os.Build
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.*
import androidx.appcompat.widget.Toolbar

class ShapesActivity : BaseActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_shapes)

        val toolbar = findViewById(R.id.toolbar) as Toolbar;
        setSupportActionBar(toolbar);

    //menu items actions
    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        val inflater = menuInflater as MenuInflater
        inflater.inflate(R.menu.items, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem) = when (item.itemId) {
        R.id.settings_page -> {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                val intent = Intent(this, SettingActivity::class.java);
                startActivity(intent);
            };
            true
        }

        else -> {
            // If we got here, the user's action was not recognized.
            // Invoke the superclass to handle it.
            super.onOptionsItemSelected(item)
        }
    }
}

Logic

I need to have 4 item in each dialog (different data for each imageButton),

1. Image
2. Text
3. Play sound Button
4. Dialog Close Button

Any idea?

Update

Based on answer below here is latest codes that I have

dialog_custom.xml

<?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">

    <ImageView
        android:id="@+id/dialog_imageview"
        android:layout_width="294dp"
        android:layout_height="246dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:layout_marginStart="68dp"
        android:layout_marginTop="274dp"
        android:layout_marginEnd="69dp"
        android:layout_marginBottom="270dp"
        android:foregroundGravity="center"
        tools:srcCompat="@tools:sample/avatars[0]" />

    <TextView
        android:id="@+id/tv_text"
        android:layout_width="298dp"
        android:layout_height="104dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="54dp"
        android:layout_marginTop="474dp"
        android:layout_marginEnd="59dp"
        android:layout_marginBottom="154dp"
        android:gravity="center_vertical"
        android:text="TextView"
        android:textAlignment="center"
        android:textSize="30sp" />

    <Button
        android:id="@+id/close_btn"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="274dp"
        android:layout_marginTop="680dp"
        android:layout_marginEnd="70dp"
        android:layout_marginBottom="63dp"
        android:background="#F50057"
        android:gravity="center"
        android:text="Close"
        android:textAlignment="center"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/play_btn"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="52dp"
        android:layout_marginTop="680dp"
        android:layout_marginEnd="292dp"
        android:layout_marginBottom="63dp"
        android:background="#00E676"
        android:gravity="center"
        android:text="Play"
        android:textAlignment="center" />
</RelativeLayout>

activity kotlin file

class BuildingsActivity : BaseActivity() {

    lateinit var mAdView : AdView;
    lateinit var context : Context

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_buildings)


        // open dialog
        val imageButton1 = this.findViewById(R.id.imageButton1) as ImageButton;
        imageButton1.setOnClickListener() {
            openDialog();
        }

    }

    // button dialog
    public fun openDialog() {
        val dialog = Dialog(context)
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE)
        dialog.setContentView(R.layout.dialog_custom)

        val tv_text = dialog.findViewById(R.id.tv_text)as TextView
        val btn_close = dialog.findViewById(R.id.close_btn) as Button
        val btn_play = dialog.findViewById(R.id.play_btn) as Button
        val imageView = dialog.findViewById(R.id.dialog_imageview) as ImageView

        imageView.setImageResource(R.drawable.school) //set image here
        tv_text.setText("School")  // set description here


        //insert your button function here
        btn_close.setOnClickListener {
            fun onClick(v: View) {
                dialog.dismiss()
            }
        }

        btn_play.setOnClickListener {
            fun onClick(v: View) {
                val mp: MediaPlayer? = MediaPlayer.create(this, R.raw.a)
                mp?.start();
            }
        }

        dialog.show();
    }
}

Problem

when I click on image that supposed to open this dialog my screen becomes blank and return to main activity.

Ideas?

Answer 1

Try this, your btnclose and btnplay have unnecessary codes

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var imageButton1 = findViewById(R.id.imageButton1) as ImageButton //add your imagebuttons here

        imageButton1.setOnClickListener { // provide/add setsetOnClickListener for all imagebutton 

            val description = imageButton1.getContentDescription().toString()
            val drawable = imageButton1.getDrawable()
            val mp = MediaPlayer.create(R.raw.imageButton1soundDialogCustom())

            openDialog(drawable, description, mp)
        }

    }

     fun openDialog(drawable: Drawable, description: String, mp: MediaPlayer ) {
        val dialog = Dialog(this@MainActivity)
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE)
        dialog.setContentView(R.layout.dialog_custom)

        val tvtext  = dialog.findViewById(R.id.tv_text)as TextView
        val btnclose = dialog.findViewById(R.id.close_btn) as Button
        val btnplay = dialog.findViewById(R.id.play_btn) as Button
        val imageView = dialog.findViewById(R.id.dialog_imageview) as ImageView

        imageView.setImageDrawable(drawable)//set image here
        tvtext.setText(description)

        btnclose.setOnClickListener {

                dialog.dismiss()

        }

        btnplay.setOnClickListener {

            val mp: MediaPlayer? = MediaPlayer.create(this, R.raw.a)
            mp?.start()
        }

         dialog.show()
    }
}