UI/UX

Full Screen Dialog Fragment in Android

In this post, we’ll learn about full screen dialog fragment Android. For better understanding, I will create a sample app that app contains full screen dialog in Android. Additionally, we’ll learn how to pass data dialog to fragment or also. So let’s get started.

Open android studio and create a new project

Create a new android project with Kotlin. Once project get synced up open style file from res=>value=>style.xml. Now create a style for app dialog named is DialogTheme

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>


    <!-- Set parent theme as app theme. -->
    <style name="DialogTheme" parent="AppTheme">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowFullscreen">false</item>
        <item name="android:windowIsFloating">false</item>

    </style>
</resources>
Let’s create a subclass of dialog fragment

Create a new Kotlin class named is FullScreenDialogExample. Here we are passing a CallbackListener inside constructor just for communicating for activity or fragment.

package com.fullscreendialog

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.DialogFragment
import kotlinx.android.synthetic.main.layout_full_screen_dialog.*

class FullScreenDialogExample(private val callbackListener: CallbackListener) : DialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        isCancelable = false
        return inflater.inflate(R.layout.layout_full_screen_dialog, container, false)
    }

    override fun getTheme(): Int {
        return R.style.DialogTheme
    }


    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        button.setOnClickListener {
            //send back data to PARENT fragment using callback
            callbackListener.onDataReceived(editText.text.toString())
            // Now dismiss the fragment
            dismiss()
        }
        
    }
}
Open layout_full_screen_dialog layout file and put below code

This layout file we are taking one edit text and button. So in this full screen dialog, we will take input from edit text and send back to the parent (activity or fragment where you want )

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ic_bg_green"
    android:padding="16dp">

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:background="@color/colorWhite"
        android:ems="10"
        android:hint="Type here"
        android:inputType="textPersonName"
        android:padding="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:background="@color/colorAccent"
        android:text="OK"
        android:textColor="@color/colorWhite"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:gravity="center"
        android:text="This is a full screen dialog example "
        android:textAllCaps="true"
        android:textColor="@color/colorWhite"
        android:textSize="22sp"
        android:fontFamily="sans-serif-condensed"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here is CallbackListener

Create new Interface named is CallbackListener

package com.fullscreendialog

interface CallbackListener {
    fun onDataReceived(data: String)
}
Open activity layout file and update below code
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

    <Button
        android:id="@+id/buttonShowDialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:padding="16dp"
        android:text="Show Dialog"
        android:textColor="@color/colorWhite"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:text="Show received data from full screen dialog"
        android:textSize="17sp"
        app:layout_constraintBottom_toTopOf="@+id/buttonShowDialog"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Show dialog using below code
    private fun showDialog() {
        val dialogFragment = FullScreenDialogExample(this)
        dialogFragment.show(supportFragmentManager, "signature")
    }
Let’s put it into the main activity and see final code look like below
package com.fullscreendialog

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity(), CallbackListener {

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

    private fun showDialog() {
        val dialogFragment = FullScreenDialogExample(this)
        dialogFragment.show(supportFragmentManager, "signature")
    }

    override fun onDataReceived(data: String) {
        textView.text = data
    }
}

Conclusion

In this android example, We have learned the implementation of full screen dialog in android. I hope it’s helpful for you, then help me by sharing this post with all your friends.

Keep in touch

If you want to keep in touch and get an email when I write new blog posts, follow me on facebook or subscribe to usIt only takes about 10 seconds to register. 

Better way of debugging and logging your android application

Leave a Reply