Skip to content

Instantly share code, notes, and snippets.

@joeatwork
Last active January 23, 2016 02:15
Show Gist options
  • Save joeatwork/776ebb88b2cef2304c94 to your computer and use it in GitHub Desktop.
Save joeatwork/776ebb88b2cef2304c94 to your computer and use it in GitHub Desktop.
Setting a custom theme for Mixpanel surveys
<!--
Mixpanel surveys rely on a theme to style their dialog boxes. Right now
it's a very, very early theme, to ensure compatibility. If you'd prefer
fancy dialog boxes, you set them up by defining your own theme in the
values/styles.xml file in your application resources.
-->
<!-- this is the current "out of the box" theme for Android surveys,
that inherits from the ancient, base Android theme -->
<style name="com_mixpanel_android_SurveyActivityTheme" parent="android:Theme">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">false</item>
<item name="android:windowAnimationStyle">@style/com_mixpanel_android_SurveyActivityAnimation</item>
</style>
<!-- if you want to use a cool, contemporary Material design theme -->
<style name="MyMaterialSurveyTheme" parent="android:Theme.Material">
<!-- Main theme colors -->
<!-- your app's branding color (for the app bar) -->
<item name="android:colorPrimary">@color/primary</item>
<!-- darker variant of colorPrimary (for status bar, contextual app bars) -->
<item name="android:colorPrimaryDark">@color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">@color/accent</item>
<!-- And leave this stuff for the cool translucent background stuff in the survey -->
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">false</item>
<item name="android:windowAnimationStyle">@style/com_mixpanel_android_SurveyActivityAnimation</item>
</style>
<!-- Then you can do this in your AndroidManifest.xml -->
<activity android:name="com.mixpanel.android.surveys.SurveyActivity"
android:theme="@style/MyMaterialSurveyTheme" />
@sam-ghosh
Copy link

This is really useful! Is there a way to see how the theme looks without waiting for an in-app notif from Mixpanel ?

@tamara-bain
Copy link

This is an awesome example of how to override their style. Thanks man 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment