Skip to content
Michael Basil edited this page Jul 7, 2015 · 34 revisions

Customizing the app

  1. In main/build.gradle replace applicationId with your package name.

  2. In main/src/main/res/values/application_.xml update app_name and any other relevant settings.

  3. Define your tabs displayed at the root level of the app in Tabs.plist. You can add as many tabs as you want in the app, by adding items in the root array of this plist, for example

  • Magazines.plist?waupdate=30: displays the magazines grid view
  • file://localhost/: displays the list of downloaded magazines
  • http://www.mysite.com: displays mysite.com

Preparing the assets for customization

General design guidelines are given on the Android website.

On Android, unlike on iOS, graphic files with different sizes should have the same name, but be located in different directories (see Supporting Multiple Screens in the Android documentation). We use the following directories in main/src/main/res/:

  • drawable-normal-port-nodpi: elements for screens larger than 470dp x 320dp in portrait mode
  • drawable-normal-land-nodpi: elements for screens larger than 470dp x 320dp in landscape mode
  • drawable-large-port-nodpi: elements for screens larger than 640dp x 480dp dp in portrait mode
  • drawable-large-land-nodpi: elements for screens larger than 640dp x 480dp in landscape mode
  • drawable-xlarge-port-nodpi: elements for screens larger than 960dp x720dp in portrait mode
  • drawable-xlarge-land-nodpi: elements for screens larger than 960dp x720dp in landscape mode
  • drawable-port-nodpi: graphic elements for other screens in portrait mode
  • drawable-land-nodpi: graphic elements for other screens in landscape mode

We also use a directory called google-play for elements required when uploading to the Google Play Store.

Launcher Icon

The launcher icon should be created using the Android Asset Studio at http://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

Download the zip file and replace the current launcher icon in the main/src/main/res/mipmap-* folders

Also, generate a 512x512px image for the Google Play Store listing by clicking the "Generate Web Icon" button

Splash screen

The splash screen appears briefly when the app is launched. It needs to be named startup_background.png, and to be provided in 6 versions:

  • in directory drawable-port-nodpi: 320x480px
  • in directory drawable-normal-port-nodpi: 480x800px
  • in directory drawable-large-port-nodpi: 600x976px
  • in directory drawable-large-land-nodpi: 1024x552px
  • in directory drawable-xlarge-port-nodpi: 800x1232px
  • in directory drawable-xlarge-land-nodpi: 1280x752px

Grid background

The grid background needs to be named magazines_background.png and to be provided in 8 versions:

  • in directory drawable-port-nodpi: 320x480px
  • in directory drawable-land-nodpi: 480x320px
  • in directory drawable-normal-port-nodpi: 480x800px
  • in directory drawable-normal-land-nodpi: 800x480px
  • in directory drawable-large-port-nodpi: 600x976px
  • in directory drawable-large-land-nodpi: 1024x552px
  • in directory drawable-xlarge-port-nodpi: 800x1232px
  • in directory drawable-xlarge-land-nodpi: 1280x752px

It is advised to use a dark background, otherwise the title and subtitle of the magazines (in white color) will not be visible (although this can be customized in colors.xml).

Clone this wiki locally