MOBILE-16529-Add-examples-for-bottom-sheets-menus-and-dialogs

app/src/main/java/com/example/androidsampleapp/SimpleActivity.kt

@@ -1,11 +1,26 @@
 package com.example.androidsampleapp
 
+import android.content.DialogInterface
 import android.os.Bundle
+import android.util.Log
+import android.view.Menu
+import android.view.View
+import androidx.appcompat.app.AlertDialog
 import androidx.appcompat.app.AppCompatActivity
+import com.contentsquare.android.Contentsquare
+import com.contentsquare.android.api.sessionreplay.csqMaskPositiveButton
+import com.contentsquare.android.api.sessionreplay.csqMaskTitle
 import com.example.androidsampleapp.analytics.Analytics
+import com.example.androidsampleapp.fragment.BottomSheetFragment
+import com.example.androidsampleapp.fragment.CustomAlertDialog
+import com.example.androidsampleapp.fragment.DatePickerFragment
+import com.example.androidsampleapp.fragment.TimePickerFragment
+import java.util.Locale
 
 class SimpleActivity : AppCompatActivity() {
 
+    private val TAG: String? = SimpleActivity::class.simpleName
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_simple)
@@ -15,4 +30,69 @@ class SimpleActivity : AppCompatActivity() {
         super.onResume()
         Analytics.tagScreen("Simple-Activity")
     }
+
+    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
+        menuInflater.inflate(R.menu.simple_menu, menu)
+
+        // Apply masking for menu items here
+        Contentsquare.unMaskMenuItem(R.id.menu_unmasked_item)
+        Contentsquare.maskMenuItem(R.id.menu_masked_item)
+        Analytics.tagScreen("Simple_Menu")
+
+        return super.onCreateOptionsMenu(menu)
+    }
+
+    fun openBottomSheets(view: View) {
+        val bottomSheetFragment = BottomSheetFragment()
+        bottomSheetFragment.show(supportFragmentManager, bottomSheetFragment.tag)
+        Analytics.tagScreen("Bottom_Sheets")
+    }
+
+    fun openDatePicker(view: View) {
+        val datePickerFragment = DatePickerFragment { year, month, day ->
+            val formattedDate = "$day/${month + 1}/$year"
+            Log.i(TAG, "Selected Date: $formattedDate")
+        }
+        datePickerFragment.show(supportFragmentManager, "datePicker")
+        Analytics.tagScreen("Date_Picker")
+    }
+
+    fun openTimePicker(view: View) {
+        val timePickerFragment = TimePickerFragment { hour, minute ->
+            val formattedTime = String.format(Locale.ROOT, "%02d:%02d", hour, minute)
+            Log.i(TAG, "Selected Time: $formattedTime")
+        }
+        timePickerFragment.show(supportFragmentManager, "timePicker")
+        Analytics.tagScreen("Time_Picker")
+    }
+
+    fun openAlertDialog(view: View) {
+        val builder: AlertDialog.Builder = AlertDialog.Builder(this@SimpleActivity)
+        builder.setMessage(getString(R.string.alert_message))
+        builder.setTitle(getString(R.string.alert_title))
+        builder.setCancelable(true)
+        builder.setPositiveButton(getString(R.string.ok)) { dialog: DialogInterface?, _: Int ->
+            dialog?.cancel()
+        }
+        val alertDialog: AlertDialog = builder.create()
+        alertDialog.show()
+
+        // Apply Masking only after the show() is called
+        alertDialog.csqMaskTitle()
+        alertDialog.csqMaskPositiveButton()
+        Analytics.tagScreen("Simple_Dialog")
+    }
+
+    fun openCustomAlertDialog(view: View) {
+        val dialog = CustomAlertDialog(
+            context = this,
+            message = getString(R.string.sense_ai_description_short),
+            imageResId = R.drawable.sense_ai_image,
+            onOkPressed = {
+                Log.i(TAG, "CustomAlertDialog: OK button tapped")
+            }
+        )
+        dialog.show()
+        Analytics.tagScreen("Simple_Custom_Dialog")
+    }
 }

app/src/main/java/com/example/androidsampleapp/fragment/BottomSheetFragment.kt

@@ -0,0 +1,27 @@
+package com.example.androidsampleapp.fragment
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ImageView
+import android.widget.TextView
+import com.contentsquare.android.Contentsquare
+import com.google.android.material.bottomsheet.BottomSheetDialogFragment
+import com.example.androidsampleapp.R
+
+class BottomSheetFragment : BottomSheetDialogFragment() {
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View? {
+        return inflater.inflate(R.layout.fragment_bottom_sheet_dialog, container, false)
+            .also {
+                Contentsquare.mask(it.findViewById<ImageView>(R.id.bottom_sheet_image_view))
+                Contentsquare.unMask(it.findViewById<TextView>(R.id.bottom_sheet_text_view))
+                Contentsquare.mask(it.findViewById<TextView>(R.id.textTitle))
+            }
+    }
+}

app/src/main/java/com/example/androidsampleapp/fragment/CustomAlertDialog.kt

@@ -0,0 +1,37 @@
+package com.example.androidsampleapp.fragment
+
+import android.app.Dialog
+import android.content.Context
+import android.os.Bundle
+import android.widget.Button
+import android.widget.ImageView
+import android.widget.TextView
+import com.contentsquare.android.Contentsquare
+import com.example.androidsampleapp.R
+
+class CustomAlertDialog(
+    context: Context,
+    private val message: String,
+    private val imageResId: Int = R.drawable.sense_ai_image,
+    private val onOkPressed: (() -> Unit)? = null
+) : Dialog(context) {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.dialog_custom_alert)
+
+        val messageView = findViewById<TextView>(R.id.alert_message)
+        val imageView = findViewById<ImageView>(R.id.alert_image)
+        val okButton = findViewById<Button>(R.id.alert_ok_button)
+
+        messageView.text = message
+        imageView.setImageResource(imageResId)
+        okButton.setOnClickListener {
+            onOkPressed?.invoke()
+            dismiss()
+        }
+        // Apply Masking here
+        Contentsquare.mask(messageView)
+        Contentsquare.mask(imageView)
+    }
+}

app/src/main/java/com/example/androidsampleapp/fragment/DatePickerFragment.kt

@@ -0,0 +1,27 @@
+package com.example.androidsampleapp.fragment
+
+import android.app.DatePickerDialog
+import android.app.Dialog
+import android.os.Bundle
+import androidx.fragment.app.DialogFragment
+import com.contentsquare.android.api.sessionreplay.csqMaskButtonPanel
+import com.contentsquare.android.api.sessionreplay.csqUnMaskHeader
+import java.util.Calendar
+
+class DatePickerFragment(private val onDateSelected: (year: Int, month: Int, day: Int) -> Unit) :
+    DialogFragment() {
+
+    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
+        val calendar = Calendar.getInstance()
+        val year = calendar.get(Calendar.YEAR)
+        val month = calendar.get(Calendar.MONTH)
+        val day = calendar.get(Calendar.DAY_OF_MONTH)
+
+        return DatePickerDialog(requireContext(), { _, selectedYear, selectedMonth, selectedDay ->
+            onDateSelected(selectedYear, selectedMonth, selectedDay)
+        }, year, month, day).also {
+            it.csqMaskButtonPanel()
+            it.csqUnMaskHeader()
+        }
+    }
+}

app/src/main/java/com/example/androidsampleapp/fragment/TimePickerFragment.kt

@@ -0,0 +1,28 @@
+package com.example.androidsampleapp.fragment
+
+import android.app.Dialog
+import android.app.TimePickerDialog
+import android.os.Bundle
+import androidx.fragment.app.DialogFragment
+import com.contentsquare.android.api.sessionreplay.csqMaskRadialPicker
+import com.contentsquare.android.api.sessionreplay.csqUnMaskHeader
+import java.util.Calendar
+
+
+class TimePickerFragment(
+    private val onTimeSelected: (hourOfDay: Int, minute: Int) -> Unit
+) : DialogFragment() {
+
+    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
+        val c = Calendar.getInstance()
+        val hour = c.get(Calendar.HOUR_OF_DAY)
+        val minute = c.get(Calendar.MINUTE)
+
+        return TimePickerDialog(requireContext(), { _, selectedHour, selectedMinute ->
+            onTimeSelected(selectedHour, selectedMinute)
+        }, hour, minute, true).also {
+            it.csqMaskRadialPicker()
+            it.csqUnMaskHeader()
+        }
+    }
+}

app/src/main/res/drawable/dialog_background.xml

@@ -0,0 +1,4 @@
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/contentsquare_white" />
+    <corners android:radius="16dp" />
+</shape>

app/src/main/res/layout/activity_simple.xml

@@ -1,25 +1,65 @@
 <?xml version="1.0" encoding="utf-8"?>
-<FrameLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<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"
+    android:background="@color/content_bg"
     android:fitsSystemWindows="true"
     tools:context=".SimpleActivity">
 
-    <FrameLayout
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:background="@color/content_bg"
-        tools:ignore="UselessParent">
+    <Button
+        android:id="@+id/btnBottomSheets"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="100dp"
+        android:onClick="openBottomSheets"
+        android:text="@string/bottom_sheets"
+        app:layout_constraintBottom_toTopOf="@+id/btnDatePicker"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintVertical_chainStyle="packed" />
 
-        <TextView
-            android:id="@+id/fragment_text"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center"
-            android:text="@string/text_simple_activity" />
+    <Button
+        android:id="@+id/btnDatePicker"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:onClick="openDatePicker"
+        android:text="@string/date_and_time_picker"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/btnBottomSheets" />
 
-    </FrameLayout>
+    <Button
+        android:id="@+id/btnTimePicker"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:onClick="openTimePicker"
+        android:text="@string/time_picker"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/btnDatePicker" />
 
-</FrameLayout>
+
+    <Button
+        android:id="@+id/btnAlertDialog"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:onClick="openAlertDialog"
+        android:text="@string/alert_dialog"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/btnTimePicker" />
+
+    <Button
+        android:id="@+id/btnCustomDialog"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:onClick="openCustomAlertDialog"
+        android:text="@string/custom_dialog"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/btnAlertDialog" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/layout/dialog_custom_alert.xml

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_margin="36dp"
+    android:background="@drawable/dialog_background"
+    android:gravity="center_horizontal"
+    android:orientation="vertical"
+    android:padding="4dp">
+
+    <ImageView
+        android:id="@+id/alert_image"
+        android:layout_width="match_parent"
+        android:layout_height="48dp"
+        android:layout_marginBottom="16dp"
+        android:contentDescription="@string/alert_dialog"
+        android:src="@drawable/sense_ai_image" />
+
+    <TextView
+        android:id="@+id/alert_message"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:padding="8dp"
+        android:text="@string/sense_ai_description_short"
+        android:textAlignment="center"
+        android:textSize="16sp" />
+
+    <Button
+        android:id="@+id/alert_ok_button"
+        android:layout_width="120dp"
+        android:layout_height="wrap_content"
+        android:text="@string/ok" />
+
+</LinearLayout>

app/src/main/res/layout/fragment_bottom_sheet_dialog.xml

@@ -0,0 +1,41 @@
+<?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="wrap_content"
+    android:background="@color/content_bg"
+    android:paddingBottom="16dp">
+
+    <TextView
+        android:id="@+id/textTitle"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_margin="16dp"
+        android:gravity="center"
+        android:text="@string/sample_bottom_sheet"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <ImageView
+        android:id="@+id/bottom_sheet_image_view"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_margin="16dp"
+        android:contentDescription="@null"
+        android:padding="@dimen/contentsquare_value_12dp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/textTitle"
+        app:srcCompat="@drawable/sense_ai_image" />
+
+    <TextView
+        android:id="@+id/bottom_sheet_text_view"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_margin="16dp"
+        android:text="@string/sense_ai_description"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/bottom_sheet_image_view" />
+</androidx.constraintlayout.widget.ConstraintLayout>