Wednesday, March 14, 2018

Custom Dialog Fragment in Kotlin

Hello friend today we will see how to create a custom Dialog Fragment we are all aware of Alert Dialog which has title,message, icon and two/three buttons all available by default.



AlertDialog.Builder(getActivity())
        .setCancelable(false)
        .setTitle("Alert Dialog")
        .setMessage("This is alert Dialog Message Sample text")
        .setIcon(android.R.drawable.ic_dialog_alert)
        .setNegativeButton("Close", DialogInterface.OnClickListener { dialog, which ->  
          //Action goes here        
        }).setPositiveButton("Ok", DialogInterface.OnClickListener 
         { dialog, which ->    //action goes here}).create().show()




Now creating DialogFragment to add CustomDialogFragment to you package.


right click on package name-->New-->kotlin file/class

Enter fragment name and press ok.







Now to our custom Dialog we need xml layout. layout_dialog.xml as below copy and paste


<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="wrap_content"
    android:background="@android:drawable/alert_light_frame"
    android:padding="20dp">

    <LinearLayout
        android:id="@+id/linearLayoutContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textViewContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Lorem epsumum is a dummy text"
            android:textColor="@color/label_outgoing"
            android:textSize="15dp"
            android:textStyle="normal" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/label_missed" />


        <RelativeLayout

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:gravity="center_vertical">


            <Button
                android:id="@+id/buttonCancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:text="cancel"
                android:textColor="@color/black"
                android:textSize="15dp"
                android:textStyle="bold"
                />


            <Button
                android:id="@+id/buttonAccept"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:text="Accept"
                android:textColor="@color/black"
                android:textSize="15dp"
                android:textStyle="bold" />


        </RelativeLayout>


    </LinearLayout>

</RelativeLayout>



Once fragment dialog created with new kotlin class paste below code in CustomDialogFragment 


import android.app.Activity
import android.content.*
import android.os.Bundle
import android.support.v4.app.DialogFragment
import android.support.v7.app.AlertDialog
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.ImageButton
import android.widget.TextView
import android.widget.Toast
import com.xxxxx.R

/**
 * Created by Mobidroidtech on 3/14/2018.
 */
class CustomDialogFragment : DialogFragment() {

    private var content: String? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        content = arguments.getString("content")

        // Pick a style based on the num.
        val style = DialogFragment.STYLE_NO_FRAME
        val theme = R.style.DialogTheme
        setStyle(style, theme)
    }

    // Override the Fragment.onAttach() method to instantiate the
    // NoticeDialogListener
    override fun onAttach(activity: Activity?) {
        super.onAttach(activity)



    }

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater!!.inflate(R.layout.layout_dialog, container, false)

        val btnCancel = view.findViewById<View>(R.id.buttonCancel) as Button
        val btnAccept = view.findViewById<View>(R.id.buttonAccept) as ImageButton

        val textViewContent = view.findViewById<View>(R.id.textViewContent) as TextView
        textViewContent.text = content

        //FontUtils.setTypeface(getActivity(), textViewQuestion, "fonts/mangal.ttf");
        //FontUtils.setTypeface(getActivity(), textViewAnswer, "fonts/mangal.ttf");
        btnCancel.setOnClickListener {
            Toast.makeText(activity, "action cancelled", Toast.LENGTH_SHORT).show()
            dismiss()
        }

        btnAccept.setOnClickListener {
            Toast.makeText(activity, "User Accepted Action", Toast.LENGTH_SHORT).show()
            dismiss()
        }

        return view
    }

    companion object {


        /**
         * Create a new instance of CustomDialogFragment, providing "num" as an
         * argument.
         */
        fun newInstance(content: String): CustomDialogFragment {
            val f = CustomDialogFragment()

            // Supply num input as an argument.
            val args = Bundle()
            args.putString("content", content)
            f.arguments = args

            return f
        }
    }

}



Create a style in values as below.




 <style name="DialogTheme">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
    </style>


Now we have done with creating customDialog how to show it on any action.



val ft = getSupportFragmentManager().beginTransaction()
val newFragment = ConfirmDialogFragment.newInstance("pass content here")
newFragment.show(ft, "dialog")



1 comment:

  1. It would be good if you also demonstrate how this dialogfragment communicates back to parent activity or fragment.

    ReplyDelete