Android Modal Styling

Bubbl Android emits payloads through NotificationRouter. Your app controls the modal UI.

Recommended flow

1. Receive payload (intent extra payload or NotificationRouter.BROADCAST)
2. Parse to NotificationRouter.DomainNotification
3. Render in custom DialogFragment / bottom sheet
4. Track engagement with BubblSdk.cta, trackSurveyEvent, submitSurveyResponse

Reference host pattern

ModalFragment.newInstance(notification)
    .show(supportFragmentManager, "notification_modal")

Inside modal:

• Headline + body
• Conditional media block (image, video, audio, survey)
• CTA button when ctaLabel + ctaUrl exist
• Survey question renderer when questions present

XML structure example

• dialog_notification.xml
  • tv_headline
  • tv_body
  • iv_media
  • video_container
  • audio_container
  • survey_container
  • btn_cta

Theme and color tokens

Use central resources to keep modal/survey styling consistent:

• res/values/colors.xml
• res/drawable/survey_card_background.xml
• res/drawable/survey_choice_background.xml
• res/values/dimens.xml

Survey interaction styling

• Choice states: selected, unselected, pressed
• Rating stars: filled/unfilled colors
• Disabled submit until complete
• Inline validation and post-submit success state

Example shape drawable for choices

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape>
            <solid android:color="@color/survey_choice_selected" />
            <corners android:radius="12dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@color/survey_choice_unselected" />
            <corners android:radius="12dp" />
        </shape>
    </item>
</selector>

Media rendering recommendations

• Image: Glide/Picasso with center crop or fit center
• Video/audio: Media3 ExoPlayer or embedded WebView for YouTube
• Keep cleanup in onDismiss/onDestroyView to release player resources