Themes in Android apps
Apptics' UI such as In-app Feedback, Analytics Settings, Consent pop-ups, Version alert pop-ups, and In-app Ratings can be customized as per your app's theme.
Customizing In-app Feedback and Analytics Setting theme.
- Apptics 0.2 supports both Appcompat and Material themes.
- The theme you provide must be without ActionBar.
- Define a theme with the color tokens as described below and pass the style to Apptics using setThemeRes.
CopiedAppticsSettings.setThemeRes(R.style.customTheme)
# | color attr |
1 | appticsToolbarColor |
2 | appticsToolbarIconColor |
3 | appticsToolbarTextColor |
4 | appticsTextColor |
5 | feedbackHintTextColor |
6 | feedbackAttachmentBg |
7 | feedbackAttachmentNameTextColor |
8 | feedbackAttachmentSizeTextColor |
9 | feedbackAttachmentDeleteIconColor |
10 | feedbackDividerColor |
11 | feedbackLogsViewButtonColor |
12 | appticsSwitchOnColor appticsSwitchOffColor |
13 | feedbackBottomBarColor |
14 | feedbackBottomBarIconColor |
15 | feedbackBottomBarIconSelectedStateColor |
16 | feedbackProgressTrackColor |
From Apptics BOM 0.2.4.0, we have introduced two other colors, 'feedbackSpinnerArrowColor' and 'feedbackSpinnerPopupBgColor', to customize account chooser spinner drop-down and pop-up background colors respectively.
Sample appcompat theme
Copied<style name="AppticsCustomTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="appticsTextColor">@color/feedbackTextColor</item>
<item name="appticsToolbarColor">@color/feedbackToolbar</item>
<item name="appticsToolbarIconColor">@color/feedbackToolbarIcon</item>
<item name="appticsToolbarTextColor">@color/feedbackToolbarText</item>
<item name="appticsSwitchOnColor">@color/feedbackToolbar</item>
<item name="appticsSwitchOffColor">@color/feedbackBottomBar</item>
<item name="feedbackHintTextColor">@color/feedbackHintTextColor</item>
<item name="feedbackDividerColor">@color/feedbackDividerColor</item>
<item name="feedbackLogsViewButtonColor">@color/feedbackToolbar</item>
<item name="feedbackAttachmentBg">@color/attachmentBgColor</item>
<item name="feedbackAttachmentNameTextColor">@color/attachmentNameColor</item>
<item name="feedbackAttachmentSizeTextColor">@color/attachmentSizeColor</item>
<item name="feedbackAttachmentDeleteIconColor">@color/attachmentDeleteColor</item>
<item name="feedbackBottomBarColor">@color/feedbackBottomBar</item>
<item name="feedbackBottomBarIconColor">@color/feedbackBottomBarIcon</item>
<item name="feedbackBottomBarIconSelectedStateColor">@color/feedbackBottomBarSelectedIcon</item>
<item name="feedbackSpinnerArrowColor">@color/feedbackToolbar</item>
<item name="feedbackSpinnerPopupBgColor">@color/feedbackBottomBar</item>
<item name="android:statusBarColor">@color/feedbackToolbar</item>
</style>
Material theming
- If your app includes Google Material library dependency, you will need to pass a material theme in Apptics.
- Feedback and Settings activities support Material3 Dynamic theming.
- By default, DynamicColors are not enabled for Feedback and Settings activities.
- Use the below method to enable the DynamicColors.
CopiedAppticsSettings.enableDynamicTheming()
- You can map Material3 color tokens (like colorSurface, colorOnSurface, etc.) to the above described Apptics color attrs to make Apptics' Feedback and Settings activity match the wallpaper theme.
Sample material3 dynamic colors theme
Copied<style name="AppticsCustomTheme" parent="Theme.Material3.DayNight.NoActionBar">
<item name="appticsTextColor">?attr/colorOnSurface</item>
<item name="appticsToolbarColor">?attr/colorSurface</item>
<item name="appticsToolbarIconColor">?attr/colorOnSurface</item>
<item name="appticsToolbarTextColor">?attr/colorOnSurface</item>
<item name="appticsSwitchOnColor">?attr/colorPrimary</item>
<item name="appticsSwitchOffColor">?attr/colorPrimary</item>
<item name="feedbackHintTextColor">?attr/colorOnSurfaceVariant</item>
<item name="feedbackDividerColor">?attr/colorOutline</item>
<item name="feedbackLogsViewButtonColor">?attr/colorTertiary</item>
<item name="feedbackAttachmentBg">?attr/colorSurfaceVariant</item>
<item name="feedbackAttachmentNameTextColor">?attr/colorOnSurfaceVariant</item>
<item name="feedbackAttachmentSizeTextColor">?attr/colorOnSurfaceVariant</item>
<item name="feedbackAttachmentDeleteIconColor">?attr/colorOnSurfaceVariant</item>
<item name="feedbackBottomBarColor">?attr/colorSurfaceVariant</item>
<item name="feedbackBottomBarIconColor">?attr/colorOnSurfaceVariant</item>
<item name="feedbackBottomBarIconSelectedStateColor">?attr/colorPrimary</item>
<item name="feedbackSpinnerArrowColor">?attr/colorOnSurfaceVariant</item>
<item name="feedbackSpinnerPopupBgColor">?attr/colorSurfaceVariant</item>
<item name="feedbackProgressIndicatorColor">?attr/colorTertiary</item>
<item name="feedbackProgressTrackColor">?attr/colorOnSurface</item>
<item name="android:statusBarColor">?attr/colorSurface</item>
</style>
Customizing Apptics pop-up
You can customize the various Apptics pop-ups such as In-app Ratings, In-app Updates, Last Session Crashed pop-up, and Consent pop-up.
By default, pop-up presented by Apptics will inherit the parent activity's theme. However, Apptics supports applying the ThemeOverlay for custom theming of AlertDialogs.
You can pass the overlay themes for pop-up using the below method.
CopiedAppticsSettings.setPopupThemeRes(R.style.appticsPopupOverlay)
Apptics' custom In-app Update pop-up and Review privacy settings (consent pop-up) come with some custom UI, which requires some additional color attributes in the theme. These color attributes can be skipped if you don't use either of these two pop-ups (Custom in-app update, review privacy settings (consent)).
You must include these additional color attributes in the parent App theme.
From BOM 0.2.0.1, the custom in-app update alert icon color tint can be changed using the appticsAlertIconColor color attribute.
# | color attr |
1 | reviewConsentBrandingTint |
2 | appticsTextColor |
3 | appticsSecondaryTextColor |
4 | reviewConsentButtonColor |
5 | appticsUpdateActionButtonColor |
6 | appticsUpdateActionButtonTextColor |
7 | appticsRemindAndIgnoreActionButtonColor |
From Apptics BOM 0.2.4.0, we have introduced 'appticsAlertIconColor' to customize the in-app updates pop-up icon color.
Sample parent/host theme with Apptics pop-up color attributes
Copied<style name="ParentTheme" parent="Theme.Material3.DayNight.NoActionBar">
<item name="reviewConsentBrandingTint">?attr/colorPrimary</item>
<item name="reviewConsentButtonColor">?attr/colorPrimary</item>
<item name="appticsUpdateActionButtonColor">?attr/colorPrimary</item>
<item name="appticsUpdateActionButtonTextColor">?attr/colorOnPrimary</item>
<item name="appticsRemindAndIgnoreActionButtonColor">?attr/colorSecondary</item>
<item name="appticsAlertIconColor">?attr/colorPrimary</item>
<item name="appticsTextColor">?attr/colorOnSurface</item>
<item name="appticsSecondaryTextColor">?attr/colorOnSurfaceVariant</item>
</style>
You can also update the brand logo in Review Privacy settings (consent pop-up). Use the below snippet.
CopiedAppticsAnalytics.showReviewTrackingSettingsPopup(
activity = this,
logoIconRes = R.drawable.apptics_consent_tick
)
Set the status bar appearance
Use the below method to set the appearance of the status bar based on the dark mode state.
CopiedAppticsSettings.setStatusBarAppearance(isLight = true or false) // To set status bar appearance
You can retrieve and handle the dark mode status for Apptics' screens using the Apptics.Settings.darkModeStateListener method. This allows you to dynamically respond to changes in the dark mode state.
CopiedAppticsSettings.darkModeStateListener { isDarkMode: Boolean ->
AppticsSettings.setStatusBarAppearance(!isDarkMode)
}
isDarkMode: Boolean - true if dark mode is enabled, false if disabled.