Skip to content

Commit 7728544

Browse files
kavin-csquarekavin-csquare
authored
feat: added examples for bottom-sheets menus and dialogs
* feat(sr): add demo bottom sheets dialogs and menu items (MOBILE-16529)
1 parent 5ade77f commit 7728544

File tree

12 files changed

+359
-15
lines changed

12 files changed

+359
-15
lines changed

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
11
package com.example.androidsampleapp
22

3+
import android.content.DialogInterface
34
import android.os.Bundle
5+
import android.util.Log
6+
import android.view.Menu
7+
import android.view.View
8+
import androidx.appcompat.app.AlertDialog
49
import androidx.appcompat.app.AppCompatActivity
10+
import com.contentsquare.android.Contentsquare
11+
import com.contentsquare.android.api.sessionreplay.csqMaskPositiveButton
12+
import com.contentsquare.android.api.sessionreplay.csqMaskTitle
513
import com.example.androidsampleapp.analytics.Analytics
14+
import com.example.androidsampleapp.fragment.BottomSheetFragment
15+
import com.example.androidsampleapp.fragment.CustomAlertDialog
16+
import com.example.androidsampleapp.fragment.DatePickerFragment
17+
import com.example.androidsampleapp.fragment.TimePickerFragment
18+
import java.util.Locale
619

720
class SimpleActivity : AppCompatActivity() {
821

22+
private val TAG: String? = SimpleActivity::class.simpleName
23+
924
override fun onCreate(savedInstanceState: Bundle?) {
1025
super.onCreate(savedInstanceState)
1126
setContentView(R.layout.activity_simple)
@@ -15,4 +30,69 @@ class SimpleActivity : AppCompatActivity() {
1530
super.onResume()
1631
Analytics.tagScreen("Simple-Activity")
1732
}
33+
34+
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
35+
menuInflater.inflate(R.menu.simple_menu, menu)
36+
37+
// Apply masking for menu items here
38+
Contentsquare.unMaskMenuItem(R.id.menu_unmasked_item)
39+
Contentsquare.maskMenuItem(R.id.menu_masked_item)
40+
Analytics.tagScreen("Simple_Menu")
41+
42+
return super.onCreateOptionsMenu(menu)
43+
}
44+
45+
fun openBottomSheets(view: View) {
46+
val bottomSheetFragment = BottomSheetFragment()
47+
bottomSheetFragment.show(supportFragmentManager, bottomSheetFragment.tag)
48+
Analytics.tagScreen("Bottom_Sheets")
49+
}
50+
51+
fun openDatePicker(view: View) {
52+
val datePickerFragment = DatePickerFragment { year, month, day ->
53+
val formattedDate = "$day/${month + 1}/$year"
54+
Log.i(TAG, "Selected Date: $formattedDate")
55+
}
56+
datePickerFragment.show(supportFragmentManager, "datePicker")
57+
Analytics.tagScreen("Date_Picker")
58+
}
59+
60+
fun openTimePicker(view: View) {
61+
val timePickerFragment = TimePickerFragment { hour, minute ->
62+
val formattedTime = String.format(Locale.ROOT, "%02d:%02d", hour, minute)
63+
Log.i(TAG, "Selected Time: $formattedTime")
64+
}
65+
timePickerFragment.show(supportFragmentManager, "timePicker")
66+
Analytics.tagScreen("Time_Picker")
67+
}
68+
69+
fun openAlertDialog(view: View) {
70+
val builder: AlertDialog.Builder = AlertDialog.Builder(this@SimpleActivity)
71+
builder.setMessage(getString(R.string.alert_message))
72+
builder.setTitle(getString(R.string.alert_title))
73+
builder.setCancelable(true)
74+
builder.setPositiveButton(getString(R.string.ok)) { dialog: DialogInterface?, _: Int ->
75+
dialog?.cancel()
76+
}
77+
val alertDialog: AlertDialog = builder.create()
78+
alertDialog.show()
79+
80+
// Apply Masking only after the show() is called
81+
alertDialog.csqMaskTitle()
82+
alertDialog.csqMaskPositiveButton()
83+
Analytics.tagScreen("Simple_Dialog")
84+
}
85+
86+
fun openCustomAlertDialog(view: View) {
87+
val dialog = CustomAlertDialog(
88+
context = this,
89+
message = getString(R.string.sense_ai_description_short),
90+
imageResId = R.drawable.sense_ai_image,
91+
onOkPressed = {
92+
Log.i(TAG, "CustomAlertDialog: OK button tapped")
93+
}
94+
)
95+
dialog.show()
96+
Analytics.tagScreen("Simple_Custom_Dialog")
97+
}
1898
}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
package com.example.androidsampleapp.fragment
2+
3+
import android.os.Bundle
4+
import android.view.LayoutInflater
5+
import android.view.View
6+
import android.view.ViewGroup
7+
import android.widget.ImageView
8+
import android.widget.TextView
9+
import com.contentsquare.android.Contentsquare
10+
import com.google.android.material.bottomsheet.BottomSheetDialogFragment
11+
import com.example.androidsampleapp.R
12+
13+
class BottomSheetFragment : BottomSheetDialogFragment() {
14+
15+
override fun onCreateView(
16+
inflater: LayoutInflater,
17+
container: ViewGroup?,
18+
savedInstanceState: Bundle?
19+
): View? {
20+
return inflater.inflate(R.layout.fragment_bottom_sheet_dialog, container, false)
21+
.also {
22+
Contentsquare.mask(it.findViewById<ImageView>(R.id.bottom_sheet_image_view))
23+
Contentsquare.unMask(it.findViewById<TextView>(R.id.bottom_sheet_text_view))
24+
Contentsquare.mask(it.findViewById<TextView>(R.id.textTitle))
25+
}
26+
}
27+
}

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
package com.example.androidsampleapp.fragment
2+
3+
import android.app.Dialog
4+
import android.content.Context
5+
import android.os.Bundle
6+
import android.widget.Button
7+
import android.widget.ImageView
8+
import android.widget.TextView
9+
import com.contentsquare.android.Contentsquare
10+
import com.example.androidsampleapp.R
11+
12+
class CustomAlertDialog(
13+
context: Context,
14+
private val message: String,
15+
private val imageResId: Int = R.drawable.sense_ai_image,
16+
private val onOkPressed: (() -> Unit)? = null
17+
) : Dialog(context) {
18+
19+
override fun onCreate(savedInstanceState: Bundle?) {
20+
super.onCreate(savedInstanceState)
21+
setContentView(R.layout.dialog_custom_alert)
22+
23+
val messageView = findViewById<TextView>(R.id.alert_message)
24+
val imageView = findViewById<ImageView>(R.id.alert_image)
25+
val okButton = findViewById<Button>(R.id.alert_ok_button)
26+
27+
messageView.text = message
28+
imageView.setImageResource(imageResId)
29+
okButton.setOnClickListener {
30+
onOkPressed?.invoke()
31+
dismiss()
32+
}
33+
// Apply Masking here
34+
Contentsquare.mask(messageView)
35+
Contentsquare.mask(imageView)
36+
}
37+
}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
package com.example.androidsampleapp.fragment
2+
3+
import android.app.DatePickerDialog
4+
import android.app.Dialog
5+
import android.os.Bundle
6+
import androidx.fragment.app.DialogFragment
7+
import com.contentsquare.android.api.sessionreplay.csqMaskButtonPanel
8+
import com.contentsquare.android.api.sessionreplay.csqUnMaskHeader
9+
import java.util.Calendar
10+
11+
class DatePickerFragment(private val onDateSelected: (year: Int, month: Int, day: Int) -> Unit) :
12+
DialogFragment() {
13+
14+
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
15+
val calendar = Calendar.getInstance()
16+
val year = calendar.get(Calendar.YEAR)
17+
val month = calendar.get(Calendar.MONTH)
18+
val day = calendar.get(Calendar.DAY_OF_MONTH)
19+
20+
return DatePickerDialog(requireContext(), { _, selectedYear, selectedMonth, selectedDay ->
21+
onDateSelected(selectedYear, selectedMonth, selectedDay)
22+
}, year, month, day).also {
23+
it.csqMaskButtonPanel()
24+
it.csqUnMaskHeader()
25+
}
26+
}
27+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
package com.example.androidsampleapp.fragment
2+
3+
import android.app.Dialog
4+
import android.app.TimePickerDialog
5+
import android.os.Bundle
6+
import androidx.fragment.app.DialogFragment
7+
import com.contentsquare.android.api.sessionreplay.csqMaskRadialPicker
8+
import com.contentsquare.android.api.sessionreplay.csqUnMaskHeader
9+
import java.util.Calendar
10+
11+
12+
class TimePickerFragment(
13+
private val onTimeSelected: (hourOfDay: Int, minute: Int) -> Unit
14+
) : DialogFragment() {
15+
16+
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
17+
val c = Calendar.getInstance()
18+
val hour = c.get(Calendar.HOUR_OF_DAY)
19+
val minute = c.get(Calendar.MINUTE)
20+
21+
return TimePickerDialog(requireContext(), { _, selectedHour, selectedMinute ->
22+
onTimeSelected(selectedHour, selectedMinute)
23+
}, hour, minute, true).also {
24+
it.csqMaskRadialPicker()
25+
it.csqUnMaskHeader()
26+
}
27+
}
28+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<shape xmlns:android="http://schemas.android.com/apk/res/android">
2+
<solid android:color="@color/contentsquare_white" />
3+
<corners android:radius="16dp" />
4+
</shape>

‎app/src/main/res/drawable/sense_ai_image.png‎

30 KB
Loading

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

Lines changed: 55 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,65 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<FrameLayout
3-
xmlns:android="http://schemas.android.com/apk/res/android"
2+
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:app="http://schemas.android.com/apk/res-auto"
44
xmlns:tools="http://schemas.android.com/tools"
55
android:layout_width="match_parent"
66
android:layout_height="match_parent"
7+
android:background="@color/content_bg"
78
android:fitsSystemWindows="true"
89
tools:context=".SimpleActivity">
910

10-
<FrameLayout
11-
android:layout_width="match_parent"
12-
android:layout_height="match_parent"
13-
android:background="@color/content_bg"
14-
tools:ignore="UselessParent">
11+
<Button
12+
android:id="@+id/btnBottomSheets"
13+
android:layout_width="wrap_content"
14+
android:layout_height="wrap_content"
15+
android:layout_marginTop="100dp"
16+
android:onClick="openBottomSheets"
17+
android:text="@string/bottom_sheets"
18+
app:layout_constraintBottom_toTopOf="@+id/btnDatePicker"
19+
app:layout_constraintEnd_toEndOf="parent"
20+
app:layout_constraintStart_toStartOf="parent"
21+
app:layout_constraintTop_toTopOf="parent"
22+
app:layout_constraintVertical_chainStyle="packed" />
1523

16-
<TextView
17-
android:id="@+id/fragment_text"
18-
android:layout_width="wrap_content"
19-
android:layout_height="wrap_content"
20-
android:layout_gravity="center"
21-
android:text="@string/text_simple_activity" />
24+
<Button
25+
android:id="@+id/btnDatePicker"
26+
android:layout_width="wrap_content"
27+
android:layout_height="wrap_content"
28+
android:onClick="openDatePicker"
29+
android:text="@string/date_and_time_picker"
30+
app:layout_constraintEnd_toEndOf="parent"
31+
app:layout_constraintStart_toStartOf="parent"
32+
app:layout_constraintTop_toBottomOf="@id/btnBottomSheets" />
2233

23-
</FrameLayout>
34+
<Button
35+
android:id="@+id/btnTimePicker"
36+
android:layout_width="wrap_content"
37+
android:layout_height="wrap_content"
38+
android:onClick="openTimePicker"
39+
android:text="@string/time_picker"
40+
app:layout_constraintEnd_toEndOf="parent"
41+
app:layout_constraintStart_toStartOf="parent"
42+
app:layout_constraintTop_toBottomOf="@id/btnDatePicker" />
2443

25-
</FrameLayout>
44+
45+
<Button
46+
android:id="@+id/btnAlertDialog"
47+
android:layout_width="wrap_content"
48+
android:layout_height="wrap_content"
49+
android:onClick="openAlertDialog"
50+
android:text="@string/alert_dialog"
51+
app:layout_constraintEnd_toEndOf="parent"
52+
app:layout_constraintStart_toStartOf="parent"
53+
app:layout_constraintTop_toBottomOf="@id/btnTimePicker" />
54+
55+
<Button
56+
android:id="@+id/btnCustomDialog"
57+
android:layout_width="wrap_content"
58+
android:layout_height="wrap_content"
59+
android:onClick="openCustomAlertDialog"
60+
android:text="@string/custom_dialog"
61+
app:layout_constraintEnd_toEndOf="parent"
62+
app:layout_constraintStart_toStartOf="parent"
63+
app:layout_constraintTop_toBottomOf="@id/btnAlertDialog" />
64+
65+
</androidx.constraintlayout.widget.ConstraintLayout>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3+
android:layout_width="match_parent"
4+
android:layout_height="wrap_content"
5+
android:layout_margin="36dp"
6+
android:background="@drawable/dialog_background"
7+
android:gravity="center_horizontal"
8+
android:orientation="vertical"
9+
android:padding="4dp">
10+
11+
<ImageView
12+
android:id="@+id/alert_image"
13+
android:layout_width="match_parent"
14+
android:layout_height="48dp"
15+
android:layout_marginBottom="16dp"
16+
android:contentDescription="@string/alert_dialog"
17+
android:src="@drawable/sense_ai_image" />
18+
19+
<TextView
20+
android:id="@+id/alert_message"
21+
android:layout_width="wrap_content"
22+
android:layout_height="wrap_content"
23+
android:padding="8dp"
24+
android:text="@string/sense_ai_description_short"
25+
android:textAlignment="center"
26+
android:textSize="16sp" />
27+
28+
<Button
29+
android:id="@+id/alert_ok_button"
30+
android:layout_width="120dp"
31+
android:layout_height="wrap_content"
32+
android:text="@string/ok" />
33+
34+
</LinearLayout>

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:app="http://schemas.android.com/apk/res-auto"
4+
android:layout_width="match_parent"
5+
android:layout_height="wrap_content"
6+
android:background="@color/content_bg"
7+
android:paddingBottom="16dp">
8+
9+
<TextView
10+
android:id="@+id/textTitle"
11+
android:layout_width="wrap_content"
12+
android:layout_height="wrap_content"
13+
android:layout_margin="16dp"
14+
android:gravity="center"
15+
android:text="@string/sample_bottom_sheet"
16+
app:layout_constraintEnd_toEndOf="parent"
17+
app:layout_constraintStart_toStartOf="parent"
18+
app:layout_constraintTop_toTopOf="parent" />
19+
20+
<ImageView
21+
android:id="@+id/bottom_sheet_image_view"
22+
android:layout_width="wrap_content"
23+
android:layout_height="wrap_content"
24+
android:layout_margin="16dp"
25+
android:contentDescription="@null"
26+
android:padding="@dimen/contentsquare_value_12dp"
27+
app:layout_constraintEnd_toEndOf="parent"
28+
app:layout_constraintStart_toStartOf="parent"
29+
app:layout_constraintTop_toBottomOf="@+id/textTitle"
30+
app:srcCompat="@drawable/sense_ai_image" />
31+
32+
<TextView
33+
android:id="@+id/bottom_sheet_text_view"
34+
android:layout_width="0dp"
35+
android:layout_height="wrap_content"
36+
android:layout_margin="16dp"
37+
android:text="@string/sense_ai_description"
38+
app:layout_constraintEnd_toEndOf="parent"
39+
app:layout_constraintStart_toStartOf="parent"
40+
app:layout_constraintTop_toBottomOf="@+id/bottom_sheet_image_view" />
41+
</androidx.constraintlayout.widget.ConstraintLayout>

0 commit comments

Comments
 (0)