Menu
Menu Sheet Overlay
Search
Search Sheet

Mobify Native App Feature Considerations

In this section understand some of the design details with Mobify native app features.

During any native app project, there are a number of assets that are required to submit your build to the app store. As a starting point, Astro provides a number of native features and plugins. Before the build begins, it's a good idea to understand the pre-built Astro Components and how they can be customized.

Astro Components

http://astro.mobify.com/latest/api-reference/

Alert View

ios alert view
iOS alert w/ one button
android alert view
Android alert w/ one button
iOS two button alert view
Android alert w/ two button
Android two button alert view
Android alert w/ two button

Description

The alert view plugin allows you to create a simple one or two button modal that blocks input to the rest of the screen. Alert views are useful when you want to display a popup to the user with an Ok and/or Cancel button.

Purpose

Customizations

Usage Tips

Documentation

See Astro Docs

Counter Badge

Counter badge

Description

The counter badge plugin allows you to overlay an icon with a rounded badge in it’s top right-hand corner. The badge defaults to having a red background with white text. The badge number can contain an integer of zero or greater. By default, the badge is not shown when the number is set to zero.

Purpose

Customizations

Usage Tips

Documentation

See Astro Docs

Default Loading Spinner

iOS Spinner Animation Android Spinner Animation
iOS (left), Android (right)

Description

The DefaultLoaderPlugin uses a system-provided progress indicator to show that loading is happening.

Purpose

Customizations

Usage Tips

Documentation

See Astro Docs

Drawer Plugin

Drawer interaction example

Description

The drawer plugin allows you to add left and right fly-out views.

Purpose

Customizations

Usage Tips

Documentation

See Astro Docs

Header Bar

iOS and Android header bar example

Description

The header bar plugin allows you to add icons in the left, center, and right positions.

Purpose

Customizations

Usage Tips

Documentation

See Astro Docs

List Select (Action Sheet)

Example of list select with Cancel
List Select w/ Cancel
Example of list select without Cancel
List Select w/o Cancel

Description

The list select plugin allows you to present a list of two or more options to the user with an optional Cancel button. The input to the rest of the UI will be blocked until the list select is dismissed, either by cancelling or selecting an option.

Purpose

Customizations

Usage Tips

Documentation

See Astro Docs

Modal View

Example of Modal View

Description

The modal view plugin allows you to create a modal with a plugin’s view. A modal view is useful when you want to display content to the user that blocks interaction with the main screen.

Purpose

Customizations

Usage Tips

Documentation

See Astro Docs

Prompt View Plugin

iOS promt view plugin Android prompt view plugin

Description

The prompt view plugin allows you to show a popup that asks the user for text input. The popup will block input to the rest of the screen and there is a Cancel and customizable Submit button, both of which close the popup. The Submit button can only be pressed if some text has been entered, otherwise the button is disabled.

Purpose

Customizations

Usage Tips

Documentation

See Astro Docs

Review Plugin

User is prompted for their experience
how is your experience screen
Negative Track
provide negative feedback screen
Positive Track
provide positive information screen
If user selected “Other”
Enter your feedback screen
Thank you for your feedback screen
Enter your feedback with options screen

Description

The review plugin displays a modal, allowing you to gather data from users on their experience using your app by reviewing it in the app store.

As users are interacting with your app, there is the possibility for them to attain points. Points can be issued arbitrarily. For example, when a user purchases a product, or favorites an item, they will collect X number of points. When a user accumulates a specified number of points, they are presented with the review modal.

Purpose

Customizations

Usage Tips

Documentation

See Astro Docs

Search Bar

iOS Inactive state example Android Inactive state example
Inactive state, iOS (left) and Android (right)
iOS Active state example Android Active state example
Active state, iOS (left) and Android (right)

Description

The search bar plugin allows you to display a native search bar and receive events when the user interacts with it.

Purpose

Customizations

Usage Tips

Documentation

See Astro Docs

Segmented Controls

iOS segmented controller example Android segmented controller example
iOS (left) and Android (right)

Description

The segmented plugin allows you to add a segmented bar (a.k.a. mutually exclusive radio buttons) and set unique events for each segment to send when it is selected. This bar usually appears directly below the header bar. Within the control, all segments are equal in width.

Purpose

Customizations

Usage Tips

Documentation

See Astro Docs

Sharing Plugin

iOS Share panel example Android Share panel example

Description

The sharing plugin allows you to share data from your app with other apps on the device.

Purpose

Customizations

Usage Tips

Documentation

See Astro Docs

Tab Bar Plugin

iOS Tab Bar example Android Tab Bar example
iOS (left) and Android (right)

Description

The tab bar plugin allows you to add a bar with customizable items and to get notified when an item is selected. The tab bar appears at the bottom of an app screen and has a fixed position.

Purpose

Customizations

Usage Tips

Documentation

See Astro Docs

Icon Assets

App Icon

An icon, that will be displayed on the device’s homescreen, will need to be designed for your app. When working with brands, it is common for the app icon to be of that brands logo, but this should not be a limiting factor.

Your app icon should be:

Unique

Clear

Simple

Creating your App Icon

Use the App Icon Sketch Template to create your icon and export it in all of the appropriate sizes.

We recommend creating two versions of the icon: the original icon and a beta icon. The beta icon will be used when your app is in progress; and the final icon will be used when you app launches.

App icon example Beta app icon example

iOS

The App Store requires the following images (these will all be auto-generated using the above .sketch file):

Image Size File Name Used For
512px × 512px iTunesArtwork App list in iTunes
1024px × 1024px iTunesArtwork@2x App list in iTunes on devices with retina display
120px × 120px Icon-60@2x.png Homescreen on iPhone/iPod Touch with retina display
180px × 180px Icon-60@3x.png Homescreen on iPhone 6 Plus
76px × 76px Icon-76.png Homescreen on iPad
152px × 152px Icon-76@2x.png Homescreen on iPad with retina display
40px × 40px Icon-Small-40.png Spotlight
80px × 80px Icon-Small-40@2x.png Spotlight on devices with retina display
120px × 120px Icon-Small-40@3x.png Spotlight on iPhone 6 Plus
29px × 29px Icon-Small.png Settings
58px × 58px Icon-Small@2x.png Settings on devices with retina display
87px × 87px Icon-Small@3x.png Settings on iPhone 6 Plus

Your icon artwork should be taken to the edge of the artboard. Important! It will be automatically cropped with rounded corners by the App Store and device.

For more info on creating iOS icons:

Android

The Google Play Store requires the following images (these will all be autogenerated using the above .sketch file):

Image Size File name Used For
48px × 48px ic_launcher_APP@MDPI.png Launcher icon - mdpi (baseline) devices (1x)
72px × 72px ic_launcher_APP@HDPI.png Launcher icon - hdpi devices (1.5x)
96px × 96px ic_launcher_APP@XHDPI.png Launcher icon - xhdpi devices (2x)
144px × 144px ic_launcher_APP@XXHDPI.png Launcher icon - xxhdpi devices (3x)
192px × 192px ic_launcher_APP@XXXHDPI.png Launcher icon - xxxhdpi devices (4x)
512px × 512px ic_launcher_APP.png Google Play store

You should crop your icon to the desired shape, and may include a drop shadow. Important! The device will not crop the image for you.

You will also need to create a Feature Graphic. The feature graphic is displayed at the top of your Store Listing page in the Play Store app.

Image Size File name Used For
1024px × 500px No requirement Google Play Store feature graphic

For more info on creating Android icons:

App Screenshots

Screenshots of your app are required in order to submit your app to the App Store / Google Play Store. Screenshots should give the user an idea of what your app is about, and they should feature the main screens in your app.

iOS

Use the largest device size of your supported device family. For instance, for an iPhone app, use the iPhone 6S Plus or 7 Plus when taking the screenshots. If your app supports iPad, a separate set of screenshots will be required. You may submit up to four images.

iPhone Screenshot requirements are:

iPad Screenshot requirements are:

For more information, see the Apple Developer Guide

Android

You may include up to 8 screenshots for each supported device type. Two images are required as a minimum.

Requirements:

For more information, see the Google Developer Console