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),

Image
Text
Play sound Button
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?

refer to this https://stackoverflow.com/questions/52076779/kotlin-custom-dialog-in-android — L2_Paver, Sep 30 '19 at 01:23
@L2_Paver thanks for the link i've already tried that the issue is, with that code then i have to make 9 `cutsom_layout` files what i'm looking for is to skip making xml file/having empty template and have my static data for each imageButton in my activity. this way i will have 9 different function instead of 9 different xml files — mafortis, Sep 30 '19 at 01:30
you can do it dynamically without creating 9 layouts, just supply the image and text from your activity to the custom dialog. — L2_Paver, Sep 30 '19 at 01:35
@L2_Paver would you mind give me sample code in answer as i said I'm complete newbie in android studio :) — mafortis, Sep 30 '19 at 01:36
I am not familiar at kotlin yet, I can give you a sample java code. — L2_Paver, Sep 30 '19 at 01:38
try this https://medium.com/@xabaras/creating-a-custom-dialog-with-dialogfragment-f0198dab656d — Elias Fazel, Sep 30 '19 at 01:41
Possible duplicate of [How to create a Custom Dialog box in android?](https://stackoverflow.com/questions/13341560/how-to-create-a-custom-dialog-box-in-android) — unzila, Sep 30 '19 at 03:27

L2_Paver · Answer 1 · 2019-10-03T03:54:32.100

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()
    }
}

edited Oct 03 '19 at 03:54

answered Sep 30 '19 at 02:05

L2_Paver

596
5
11

and how do i add buttons in dialog? each dialog has 2 buttons (close and play sound) obviously sound of each dialog is different. – mafortis Sep 30 '19 at 02:09
how do you declare/play your sound? via mediaplayer? – L2_Paver Sep 30 '19 at 02:15
Hi, I've made new class and dialog xml based on your answer but i have errors as well as couldn't figure how to connect it in my image buttons! (sorry i don't mean to act stupid but it's my very first time with android studio bear with me please) `screenshot` http://ibb.co/WNXhYQb `class code` http://codepile.net/pile/257OzY5E `xml code` http://codepile.net/pile/OLjGxPAQ – mafortis Sep 30 '19 at 10:56
does this anyhow helps? https://developer.android.com/guide/topics/ui/dialogs i can't understand it! :| to complected – mafortis Sep 30 '19 at 11:04
this how you declare your widget on kotllin `var btn_new_activity = findViewById(R.id.btn_start_new_activity) as Button` – L2_Paver Oct 01 '19 at 00:28
and this how you declare your onClickListener `btn_new_activity.setOnClickListener {}` can't open your codes btw and the topic you post is about Alert Dialogs. Alert dialogs are not recommended in creating complex layout. – L2_Paver Oct 01 '19 at 00:29
Hi, I've updated my question would you take a look at it please? – mafortis Oct 03 '19 at 02:39
You could extend FragmentDialog rather than just make a basic class with a method that might as well be static – OneCricketeer Oct 03 '19 at 02:56
hi, what is this? `imageButton1soundDialogCustom` it's red colored in my editor – mafortis Oct 04 '19 at 15:18
Your sound file name on raw folder – L2_Paver Oct 04 '19 at 22:01
then why it has `()` seems like it's a function?! – mafortis Oct 05 '19 at 08:15
anyway i've got it to work thanks to you, there is small problem please see this screenshot https://ibb.co/KNwHr7H the width of dialog isn't right. – mafortis Oct 05 '19 at 08:48
'()' was a typo, Try posting/update your custom_dialog.xml above, I will review it on monday. – L2_Paver Oct 05 '19 at 12:59