Create an Android App with our App Template Create an Android App with our App Template

Create an Android App with our App Template

Andy Zheng Andy Zheng

Prerequisites

  1. Install Android Studio
  2. Create an Android App Profile in Zype

Downloading and Opening the Bundle

In order to generate an Android bundle using this SDK, you must first pull the latest source code from Zype's github repository. This can be found at https://github.com/zype/zype-android.

Click the green Clone or download button on the right, and select Download ZIP.

zype-android1.png

Next, pick a location on your computer to save the .zip file. Once the .zip file download is complete, unzip the file to reveal its contents.

Open the Android Studio platform and select Open an existing Android Studio projects when prompted.

Screen_Shot_2018-09-25_at_9.04.14_AM.png

You will want to find the location of the folder you unzipped and select to open that folder (the folder should be named zype-android-master when you first download and unzip).

Android Studio will open up your app code in a new window and begin setting up the project. Once it finishes you are ready to customize your application.

App Customizations (Required) 

Application ID

Navigate to Gradle Scripts > build.gradle (Module: app)

Find and replace <APPLICATION_ID> (see image below). The application ID is a unique identifier for your application and usually is a variation of the following "com.companyname.yourappname". Make sure that you choose a unique application ID to avoid receiving an error when uploading your app package to Google Play. 

If you are resubmitting your Android mobile app, you should use the same application ID that is associated with your existing live app. 

Note: Remember to delete the less-than "<" and greater-than ">" symbols. 

zype-android3.png

App Name

Navigate to app > res > values > strings > strings.xml (template) 

Replace <APP_NAME> with the publicly facing name that you would like to appear when users download your app. You will also need to enter an app name that is displayed in the Google Play Store during submission. 

Note: Remember to delete the less-than "<" and greater-than ">" symbols. 

zype-android9.png

Brand Color

There are two (2) places where the brand color needs to be updated. Navigate to app > res > values > colors 

And update these two files:

  • colors.xml (template)
  • colors.xml (night, template)

Replace <BRAND_COLOR> with the hex value of your brand color. For example, if your brand color is red, <BRAND_COLOR> with #FF0000.

Note: Remember to delete the less-than "<" and greater-than ">" symbols. 

zype-android8.png

Image Assets

For more information on image size requirements and in line examples, please reference our Android Mobile App Branding and Images documentation HERE

  • App Icon - The App Icon is what attracts attention in the App Store and stands out on the Home screen. You'll need to replace all image sizes within the ic_launcher folder. 

Navigate to app > res > mipmap > ic_launcher

Replace all four (4) sizes within the ic_launcher folder (mdpi, hdpi, xhdpi, xxhdpi)

Tip: We recommend replacing the images outside of Android Studio and from within the folder structure. To do this, right click on the image and select "Reveal in Finder" (see image below). Ensure that your images are saved with the same name as what is currently in the folders (e.g. ic_launcher) before replacing. 

zype-android4.png

Tip: Take advantage of this icon resizer for the App Icon images.

zype-android5.png

  • Splash Logo - The Splash Logo is an image that appears on your app's splash screen when the app is loading.

Navigate to app > res > drawable and replace the splash_logo.png. 

zype-android6.png

App Configurations

Navigate to app>java>com.zype.android (template)> ZypeSettings.java 

(zype-android/app/src/template/java/com/zype/android/ZypeSettings.java)

All placeholders inside this file must be updated even if you are not using the feature. 

zype-android10.png

App Key, Client ID and Root Playlist

Replace the APP_KEY, CLIENT_ID and ROOT_PLAYLIST_ID

These keys can be found in your Zype account by managing your Android app profile under the 'Video Apps' section. 

The root playlist ID is found in your Zype account under Playlists and should be the ID of your Primary Playlist where all your content pulls from. 

Social Media

Link your social media channels from within your Android mobile app by replacing FACEBOOK_ID, INSTAGRAM_ID and TWITTER_ID with the usernames of your social media accounts in the quotation marks.

You can also replace WEB_URL with a link to your company website. When the user clicks the link it will open that URL within the app. 

Screen_Shot_2019-05-01_at_5.40.52_PM.png

Monetization

Under ZypeSettings.java, you can enable or disable certain monetization types within your app by replacing the placeholders.

You must set the following placeholders to true or false:

  • NATIVE_SUBSCRIPTION_ENABLED - Requires configuration on Google Play Store. Requires the user to create an account. User's subscription persists to Zype platform and user's account can be used on multiple endpoints. 
  • NATIVE_TO_UNIVERSAL_SUBSCRIPTION_ENABLED - Requires configuration on Google Play Store and Zype platform. Requires the user to sign up and allows user to use new account to access content on other platforms.
  • SUBSCRIBE_TO_WATCH_AD_FREE_ENABLED - If the user is subscribed (natively or universally), they will not have to watch ads. If the user is not subscribed, they will experience ads. 
  • UNIVERSAL_SUBSCRIPTION_ENABLED - User subscribes on your website and signs in with same credentials to access entitled content. User's subscription persists to Zype platform and user's account can be used on multiple endpoints. 
  • UNIVERSAL_TVOD - User can see a "My Library" section when signed in for easy access to videos they have purchased.
  • DEVICE_LINKING - User links device by navigating to a web URL and entering an auto-generated code instead of signing in.

The DEVICE_LINKING_URL is the url where the user can link their device. If you are not using device linking, simply delete the <DEVICE_LINKING_URL> placeholder.

The PLAN_IDS are the ids for the subscription plans you want to use when enabling Native to Universal Subscription. If you are not using this monetization, delete the <PLAN_IDS> placeholder. 

Example: 

public static final String[] PLAN_IDS = new String[] { "myMonthlyPlanId", "myYearlyPlanId" };

Good To Know

  • If you are using Native to Universal Subscription, you should leave Native Subscription and Universal Subscription as false.
  • If Native to Universal Subscription is "true", you must replace <PLAN_IDS> with valid plan IDs inside the quotation marks. 

Features

Replace the placeholders for the following feature flags by setting them to true or false:

  • AUTOPLAY - Automatically play the next video within a playlist. 
  • BACKGROUND_AUDIO_PLAYBACK_ENABLED - Continue audio playback if the user switches to a different application.
  • BACKGROUND_PLAYBACK_ENABLED - Continue video playback if the user switches to a different application. 
  • DOWNLOADS_ENABLED - Enable downloads in the app. Users can only download videos they are entitled to.
  • DOWNLOADS_ENABLED_FOR_GUESTS - Allow downloads for all users, even if not signed in. Requires DOWNLOADS_ENABLED to be "true". 
  • PLAYLIST_GALLERY_VIEW - Display your playlists and videos in rows of thumbnails
  • PLAYLIST_GALLERY_HERO_IMAGES - Displays slider images at the top of the app that link to playlists or videos (more info here). Requires PLAYLIST_GALLERY_VIEW to be "true".
  • PLAYLIST_GALLERY_ITEM_TITLES - Display titles on the thumbnails in the playlist gallery view. Requires PLAYLIST_GALLERY_VIEW to be "true". 

Theme

Select a Dark or Light theme for your app:

Light Theme: ZypeConfiguration.THEME_LIGHT 

Dark Theme: ZypeConfiguration.THEME_DARK 

android-mobile-theme.png

Note: If you select "DARK" theme you may consider updating your launch screen background to be dark as well. The launch screen background is set to white (#FFFFFF) by default, but you can adjust the color

Navigate to app > res > values > colors > colors.xml (night)

Search for <color name="launch_background"><#FFFFFF></color>

Replace #FFFFFF with the color hex you would prefer. The below example is using #212121

  Screen_Shot_2019-05-21_at_1.53.26_PM.png