White Label App - Android
Objective: Configure the Android source to feature a study from an organization with appropriate branding. Once configured, the source will be ready to be archived and submitted to Google Play for approval.
This walkthrough should take approx. 30 minutes (depending on whether you have your organization's branding assets handy)
Below is a checklist of information and images that you should have prior to beginning this process.
App Submission Checklist
What is it | How is it presented | Comments |
---|---|---|
Primary Color | HEX string | |
Secondary Color | HEX string | |
Tutorial Page 1 copy (optional) | String (about 150 chars) | |
Tutorial Page 2 copy (optional) | String (about 150 chars) | |
Tutorial Page 3 copy (optional) | String (about 150 chars) | |
Tutorial Page 1 image (optional) - Required if corresponding Tutorial page exists | mdpi 256x400 | |
Tutorial Page 2 image (optional) - Required if corresponding Tutorial page exists | mdpi 256x400 | |
Tutorial Page 3 image (optional) - Required if corresponding Tutorial page exists | mdpi 256x400 | |
App Icon | Follow Android guidelines | |
Research Organization Logo Color | High Res Image | To be used on white background |
Research Organization Logo White | High Res Image | To be used on secondary / primary colors |
Study Logo Color | High Res Image | To be used on white background |
Study Logo White | High Res Image | To be used on secondary / primary colors |
App Name | Short String | As it should appear on the device home screen |
Request the Template Project
The best way to get started is to request the template Flask app that's been formatted for white label purposes. Contact[email protected] for access to the white label app template source project.
Open the Flask
project with Android Studio.
Modify Org and Keys
Next, navigate to the connection.xml
file and enter the following four values that you need to set the app to your org.
- medable_base_url: this should match up with the environment type you're working on.
- medable_client_key: find this by going to Cortex > Settings > Apps > API Key (column)
- medable_study_id: find this by going to your researcher portal and clicking on Axon > Studies > Click Study Name. You can take the ID from the URL. See below for more info.
- medable_organization - find this by going to Settings > Organization > Name (field)
You can get #1 and #4 by simply looking at the URL of your researcher portal. For example, if I login to https://app.medable.com/example
to see my researcher portal, I know off the bat that my baseURL is api.medable.com
and my Organization is testorganization
.
The client key (or API key) is copy pasted from the Cortex App
section of my researcher portal.

You're going to need your study ID. Find this by opening your study on the Researcher Portal, then pulling the id from the URL. It will be the text right after ".../study/", like below.

Change App Name
Open strings.xml
and set the app_name
string value to whatever text you want to display under the icon on the user's device.
Set App Colors
Open colors.xml
and you'll find color variables you can set to match the colors of your organization's branding. Try setting the colorPrimary and colorAccent colors and see if it gives you the desired outcome. You can set other colors for even more customization.
Customize Launch Screen
Finally, if you open fragment_intro1.xml
, you'll see the screen that gets shown immediately when a user launches the app. To the developer’s discretion, customize the launch screen to use either a gradient with the provided colors or a solid color, then overlay the client’s white logo on top. If this doesn’t work, then a white background with the color logo of the client should suffice.
Replace Template Consent Document
In assets/documents you'll find consent.pdf
. Replace this file with your own PDF, while keeping the name the same. This will ensure that your study participants see the correct consent agreement. You can also delete the file and remove the links from the storyboard to show consent.
Assets
Open the various image directories (mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi) and replace all the logos and Flask images with your own custom images. Use the study logo color and study logo white assets in the checklist above.
Permissions
The permissions that we must include in Flask are:
- ACCESS_FINE_LOCATION
- CAMERA
- WRITE_EXTERNAL_STORAGE
You may want to add others, if your app needs them.
Test the App
- Connect to the study and smoke test the app to ensure that it works as expected.
- Make sure to check for any lingering Axon logos or other axon assets that should be removed.
Updated 4 months ago