Android - How to Customize Your App's Look and Feel

Mag+ allows you to customize many aspects of your app's look and feel in order to match branding requirements. Not all items need to be customized, but you can read this article to see the different options available to you.

Where to Set App Customizations

1. Log in to the Mag+ Publish portal at <http://publish.magplus.com>.

2. Click on the "Apps" tab.

3. Click on the "Android" tab to specify settings for your Android apps.

4. Click on the link "Build Settings" to access look and feel customizations for your app.

5. Set your customizations in the sections that start with "Customization".

Available Android/Kindle Fire App Customizations

The list below shows all options for all Android devices (tablets and smartphones).

Application Texts

All the text in your Mag+ app can be customized, either to change the wording to fit your brand's style or to support a completely new language. To get started, download the example English template strings xml file and edit it in a plain text editor.

Note: It is best to avoid using Microsoft Word or Apple Pages when editing a strings file as these programs will try to read and edit the styling of the file. Plain text editors such as TextWrangler, BBEdit, or Notepad++ are recommended.

The text is defined as strings. Refer to the Android Developer article "String Resources" for information on formatting and styling.

Images

App Icon

The icon that represents your app on the user's home screen (Label 1).

  • Format: PNG
  • Dimensions: 96 x 96 pixels
  • Required: Yes

Branding Bar

This is the image used when the Main Menu is displayed (Label 1).

  • Format: PNG
  • Dimensions: 656 x 192 pixels max
  • Required: No

Symbols

Main Menu Symbols

  • Now Reading (Label 1)
    Takes the user to the content they are currently reading.
    • Format: PNG
    • Dimensions: 64 x 64 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Issues  (Label 2)
    Takes the user to the Issues screen.
    • Format: PNG
    • Dimensions: 64 x 64 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Favorites  (Label 3)
    Takes the user to the Favorites screen.
    • Format: PNG
    • Dimensions: 64 x 64 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • My Account  (Label 4)
    Takes the user to the My Account screen. Note that My Account is only available if using the Mag+ Subscription API. Read more about the Mag+ Subscription API.
    • Format: PNG
    • Dimensions: 64 x 64 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Help  (Label 5)
    Takes the user to the Help screen. Note that you must have a Help MIB uploaded for this icon to appear.
    • Format: PNG
    • Dimensions: 64 x 64 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Live  (Label 6)
    Takes the user to the Live screen. Note that you must have the Live option enabled in Build Options and the Live Settings fields configured for this icon to appear and work properly.
    • Format: PNG
    • Dimensions: 64 x 64 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • About  (Label 7)
    Takes the user to the About screen.
    • Format: PNG
    • Dimensions: 64 x 64 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Alerts  (Label 8)
    Takes the user to the Appboy Alerts screen. This icon is only displayed if Appboy is configured. Read more about Appboy.
    • Format: PNG
    • Dimensions: 64 x 64 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Feedback  (Label 9)
    (Not customizable)Takes the user to the Feedback screen. This icon is only displayed if Appboy is configured. Read more about Appboy.

Issue Reader Symbols

  • Menu Reader (Label 1)
    Displays the Main Menu on the screen. Note that there is a "Pressed" version of the icon which is displayed if it is uploaded to the Mag+ Publish portal.
    • Format: PNG
    • Dimensions: 64 x 64 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Table of Contents(Label 2)
    Takes the user to the Table of Contents in the Mag+ Issue. Displayed only if there is a Table of Contents included in the Issue. Note that there is a "Pressed" version of the icon which is displayed if it is uploaded to the Mag+ Publish portal.
    • Format: PNG
    • Dimensions: 64 x 64 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Playlist (Label 3)
    Takes the user to the Playlist screen in the Mag+ Issue. Displayed only if there is a Playlist included in the Issue. Note that there is a "Pressed" version of the icon which is displayed if it is uploaded to the Mag+ Publish portal.
    • Format: PNG
    • Dimensions: 64 x 64 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Share (Label 4)
    Takes the user to the Sharing screen in the Mag+ Issue. Displayed only if Sharing is enabled in the app. Note that there is a "Pressed" version of the icon which is displayed if it is uploaded to the Mag+ Publish portal.
    • Format: PNG
    • Dimensions: 64 x 64 pixels
    • Required: No (Default icon is used if no custom icon is specified)
  • Favorites Reader (Label 5)
    Takes the user to the Favorites screen in the Mag+ Issue. Displayed only if an Issue has been favorited. Note that there is a "Pressed" version of the icon which is displayed if it is uploaded to the Mag+ Publish portal.
    • Format: PNG
    • Dimensions: 64 x 64 pixels
    • Required: No (Default icon is used if no custom icon is specified)

Colors

Important Information

Colors entered in these fields can be in a valid CSS format. CSS color names, however, are not supported. Supported syntax includes:

  • 0.0,1.0,0.5
  • rgb(0.0,1.0,0.5)
  • rgb(0,255,127)
  • rgba(0.0,1.0,0.5,1.0)
  • #00ff7f
  • #0f7

Brand Color

Sets the color for the following assets:

  • Badge (Label 1)
  • Filter Bar (Label 2)
  • "Remove Issue" Button (Label 3)
  • Sash (Label 4)
  • Purchase/Download Buttons (Label 5)
  • Favorites Icon (Label 6)

Miscellaneous Colors

  • Brand Background color (Label 1)
    This color will be used behind all elements in your app.
  • Brand Secondary Background color (Label 2)
    This color will be used for the box drawn behind all content (Mag+ Issues) available for download or purchase.
  • Brand Text color (Label 3)
    This color will be used for the title text of an item.
  • Brand Text color dimmed (Label 4)
    This color will be used for smaller text of an item.
  • Brand Tab Bar color (Label 5)
    This is the color that will be used for the tab bar.

Scrubber Colors

  • Brand Scrubber color (Label 1)
    This color will be used as the color behind the Navigation Scrubber.
  • Brand Scrubber Text color (Label 2)
    This color will be used as the color for the text on the Navigation Scrubber.
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk