July 10, 2014
David Isbitski
With the launch of the Fire, Amazon’s first Android-based phone, you can now create experiences where customers interact in an entirely new way with your apps. With Dynamic Perspective, apps can have peek, tilt and zoom capabilities all based on customer head movements. You can also use the Firefly button to identify virtually anything and enable actions your customers can take based on what they identify. By enhancing or optimizing your apps for Fire, you have the opportunity to enable experiences that combine realistic visuals and bring new depth to what customers can do on a phone. And while you think about the new experiences you can offer your user, you can get the current version of you app running on Fire with little or no modification. Here are 10 tips to help you get your apps running on Fire phone today!
Fire uses the Amazon Appstore exclusively, and we’ve streamlined the process to make it easy to submit your app. Registration is free, fast, has no annual subscription cost, and supports both free and paid apps. Once your Fire phone app is submitted you also have the option to distribute the apps across Kindle Fire, Fire TV and Android devices simply by selecting those device targets in the developer console. The boxes indicating your intent to publish on other devices will be pre-checked in the console. Most Fire apps will also work on Kindle Fire tablets and Android devices, so just keep those checked if you are not sure. To get started:
Fire phone development APIs fall into two categories: Dynamic Perspective SDK and Firefly SDK. Both SDKs are available through the standard Android SDK Manager as a single add-on and support a variety of programming languages.
To download the add-on simply open the Android SDK Manager from a command line or from within Android Studio and do the following:
The SDK includes everything you need to get started including multiple sample projects and Android Studio gradle support.
You also have the option to download the Fire Phone SDK directly without installing the add-on here.
Fire is based on the latest version of Fire OS 3.5, which is based on Android API level 17. Android app compatibility is supported on Fire OS, so if an app runs on Android it can run on Fire with little or no effort. Simply drag and drop your Android APK and receive feedback on your app's compatibility within 90 seconds. You will also have access to additional Fire phone test results that enable you to see how your app looks and performs on Fire phone. The test results are presented in 6 hours and include carousel, peek and tilt actions.
Checking APK compatibility and submitting can be done in just a few steps:
Fire represents a huge leap forward in mobile user experiences. As a developer, you’ll want to design the best customer experience possible for this new platform. To help you achieve that, we’ve outlined the core design principles that will allow you to take advantage of Fire’s unique Dynamic Perspective features in our guide here.
The good news is that if you are an Android developer your app will work on Fire with little or no work, and as you will see, just a few modifications to your app’s user experience will let it better take advantage of all that the Fire SDK has to offer.
For additional best practices for designing Fire phone user experiences check out our blog post here.
The quickest optimization you can make is to set the application Theme in your Android app’s AndroidManifest.xml file. This updated Amazon theme will set app fonts, color pallet and skinned controls to match Fire phone’s design guidelines.
Simply set the android:theme argument to the application section of the Android Manifest to Theme.DeviceDefault, as introduced in Android 4.0, and your application will pick up the skinned controls that match Fire phone.
The Fire Foundation Controls are included in the Dynamic Perspective SDK and give your app 2D controls designed and built for use with the device. These controls currently include SidePanel, HeaderNavigationBar, TabBar, ToolBar and MediaController. All of these controls can be implemented in three steps just as you would with any Android control.
Step 1: Prepare the Android Manifest
The Android manifest needs to be modified to include a <uses-library> tag to load the Foundation Controls library (in addition to setting the theme as mentioned in Tip 3).
Step 2. Place the control in your XML Layout file
In this example Android layout file we are referencing the new header navigation bar and utilizing two additional files. Strings.xml will contain the names of our menu items and header_menu.xml file defines the menu items for the HeaderNavigationBar's actions menu.
XML layout for HeaderNavigationBar inside of a RelativeLayout view:
Strings.xml containing menu item names:
Header_menu.xml containing action menu items:
Step 3. Implementing the Control
All of the APIs for Fire phone will be installed into your <Android_SDK>/sdk/add-ons/addon-amazon_fire_phone_sdk_addon-amazon-17 folder including the SDK samples. To access the controls you will need to reference them from your own app. For example, to implement the HeaderNavigationBar make sure you reference the amazon.widget.* package and implement the control. The following code shows how to inflate the XML layout into a view, obtain a reference to the HeaderNavigationBar, use the reference to set a click listener on the actions menu, and implement up navigation.
In the case of the HeaderNavigationBar we will also disable the Android title bar before inflating the layout. We can also programmatically change menu items by setting properties directly on the HeaderNavigationBar like so:
For more details on implementing Foundation Controls in your Android app check out our Implementing Foundation Controls for Fire phone guide here.
One easily identifiable layout characteristic of Amazon Fire apps is the Side Panel layout included as part of the Fire Foundation Controls. Implementing the Side Panel layout will go a long way to giving your app that Fire phone look and feel.
With this control, no matter what the current view in your app, a user can always access your menu or a context aware page just by executing a quick swipe or gesture.
For example, doing a quick right-flick of the phone (or swiping in from the left) can expose a navigation pane. You can also put a context-sensitive pane a flick away in the other direction. In the picture above, the middle content panel is a Music Store. The left panel is a navigation panel, and the right panel is context sensitive, and when the user is looking at music in the content panel, the right panel will show recommendations.
SidePanel Layout works very similar to the HeaderNavigationBar described above. You will need to reference the EAC library in your Android Manifest like above, reference the same amazon.widget library in your java code and then define the left, right and content panels in your XML layout file.
A full Side Panel sample project is included with the Fire SDK under the /Samples/SidePanels folder and you can get more details about implementing a Side Panel layout here.
If you don't have a Fire phone you can also use the simulator included in the SDK to test your SidePanel implementations.
In addition to the 2D Foundation Controls, Dynamic Perspective includes a rich set of APIs and Controls to help developers incorporate peek, tilt and zoom capabilities within their apps while adding a sense of realistic depth and perspective. These controls work behind the scenes with Fire’s advanced camera and sensors to automatically adjust their appearance based on how your application is being viewed. These new UI Controls are part of the Euclid package included in the Fire phone SDK.
For the most part, Euclid controls are very similar to their Android and Foundation Controls counterparts. Euclid controls retain the name of the original base control, but with a "Z" prepended to the name. For example, a Button control becomes a ZButton control.
Figure 1- Example of Euclid Controls. From left to right: ZCheckbox, ZButton, ZSwitch and ZRadioButton
Euclid simplifies the process of adding 3D effects to your Android apps. Because most Euclid layout and widget classes are derived from either standard Android or Amazon Foundation Control classes, you are probably already familiar with the most common methods and attributes of Euclid controls and should be able to convert your app to use the new Dynamic Perspective UI with few code updates.
The following aspects of a control remain unchanged when you swap a stock Android control for its Euclid equivalent, such as changing a Button to a ZButton:
The biggest difference between Euclid and 2D widgets is how their visual assets are produced and rendered. These differences provide new behaviors but also set some limits on what you can change. Euclid widgets are artist-created textured mesh files, including collections of vertices, edges and faces that define the shape of 3D objects.
Although you can set the color of a 3D widget, you cannot add a border, set a custom background, or make changes in View.OnDraw(). However, 3D controls do provide the same access to behaviors such as animations and head tracking without additional code.
The following summary highlights the changes between 2D and 3D controls:
For more information on implementing Euclid controls be sure to check out our Dynamic Perspective UI Migration Guide here. For suggestions on when to use the standard Android widgets, 2D controls and the new Euclid controls check out our comparison matrix here.
With the Firefly SDK, developers can build apps that recognize real world objects - QR and bar codes, artwork, songs, movies and more - and let customers interact with them. Firefly combines Amazon's deep catalog of physical and digital content with multiple image, text and audio recognition technologies to quickly identify over 100 million movies, TV episodes, songs and products. It can also recognize URLs, email addresses and phone numbers. Customers simply press the Firefly button to discover helpful information and take action in seconds. You can use the Firefly SDK to supplement item identification or build actionable options for customers after an item is recognized. For example, iHeartRadio used the Firefly SDK’s built-in music recognizer and music database to identify a song playing. Then they built their own Firefly action to create a station based on the song Firefly recognized.
Integration with Firefly requires the creation of a plug in. You can get complete details on implementing a Firefly plugin on our developer portal here.
The immersive apps you create for Fire phone are also eligible for new developer promotions. We have updated Appstore Developer Select and Amazon Mobile Ads API with more incentives.
Now is the time to submit your apps and games! Apps that are submitted and approved by July 18 will be in the Amazon Appstore when Fire ships on July 25.
Be sure to check out these additional Fire phone developer resources:
-Dave (@TheDaveDev)
Fire proactively brings your apps and content to customers with the enhanced home carousel.
Fire’s home screen includes several capabilities to help customers do things quickly. Beyond fast and predictable navigation with the right and left panels and the app grid, the home carousel helps customers get right back into your app.
Weather app showing the next three day’s weather |
In the screenshot to the left, the built in weather app is shown within the home carousel. Each app has the ability to show a list or grid of information and actions in the carousel widget. You can see this right below the weather app’s icon. Because it gives you nearly half the screen, an app can easily show three items on the screen and the customer can scroll to more. The Weather app has designed their widget to show the weather for the next three days. You can see the day, the temperature and a visual forecast. Tapping the Weather app widget triggers the action associated to it, which takes you straight to that day’s weather in the app. You can drive customer engagement for your app by designing a widget to have the information and actions that are most interesting to your customers.
|
The carousel widget enables you to expose content related to your app without the customer needing to launch your app. You customize the user interface to keep customers informed even when they’re not in your app and then, give them easy access back into your app.
Developers often track engagement metrics like 1-day, 7-day and 30-day retention and they work to increase the number of people that use their app day to day. Of course this starts with interesting content, but it’s also important to draw people back into the app using a devices services like Game Circle and Notifications . Now, with the release of Fire, there are two new ways to augment your app: Firefly and the Active Carousel Widget.
The Active Carousel Widget contains a list or grid and you can also configure it to show more information when the customer uses peek. The examples below show how a widget might look as a simple list or with more detail like icons, descriptive text or star ratings.
Beyond seeing information from your app, customers can also tap an item in the widget to launch your app. The widget communicates with your app through intents that you define. Your app manages all changes to the widget, including the information shown and the behavior it invokes. When the customer taps an item, they are taken directly to the right place in the app – it can start an activity, or broadcast the intent.
|
Your app can also display a numeric badge on your icon for things like unread messages, new deals or fresh content. |
So, with Fire, you have more ways to attract your customer’s attention and to engage with them.
Zillow shows a list of nearby and recently searched homes |
Zillow is a home and real estate marketplace helping customers find and share information for making home-related decisions and connecting with professionals.
The Zillow widget shows an updated list of open houses in the area and up-to-date details on homes from a customer’s saved searches.
This is a great example of bringing engaging information to the surface. When customers notice an interesting house, they can tap it and be taken right to it’s listing within the app so they can immediately learn more it.
Zillow also integrated with Dynamic Perspective, the right and left panels and peek.
|
StubHub shows a list of recently viewed events |
StubHub allows fans to buy and sell event tickets.
In StubHub’s widget, customers can see recently viewed and upcoming events. They can tap to see all the details. So, you can imagine a scenario where a customer was browsing upcoming shows but wasn’t really ready to make a purchase. With the design that StubHub chose, customers will be reminded of events and given the opportunity to get right back into the app to make a purchase.
StubHub also extended Firefly so that they can connect people to events when they’re listening to music. If you’d like to learn more about Firefly and how StubHub integrated with it, you can read about them in the Firefly blog post. |
Terraria shows a list of active worlds |
Terraria is an action-packed adventure game that recently came to Fire TV and Kindle Fire.
They use the widget to give customers one tap access to their saved worlds. If you’re building a game, you may choose to do something like this or show leaderboard and achievements or even things such as which friends are on-line.
Terraria took full advantage of the new APIs in the phone. They support the Right and Left Panels to give customers one-handed shortcut access to their inventory. They used Dynamic Perspective to enable looking around the map and zooming just by moving closer or farther from the screen.
|
The designs for each of the examples above are intentionally different. They’re tailored to that app and it’s customers. Because this is about how you can engage with your customers, it’s important to think through the scenarios that would interest and bring them back to your experience.
For carousel widget development, you’ll be interacting with the HomeManager to create a widget, update a widget, react to taps, define the empty widget behavior and add numeric badges to your app icon.
Here’s an overview of the code you’ll need to create a widget. Please see more detail in the SDK documentation.
//Instantiate your widget
GroupedListHeroWidget listWidget = new GroupedListHeroWidget();
//create list entries
ListEntry listEntry = new ListEntry(); listEntry.setVisualStyle(SHOPPING); listEntry.setPrimaryText("Hello, world!"); listEntry.setPrimaryIcon(ICON_URI);
//add your list entries to a list
List listEntries = new ArrayList(); listEntries.add(listEntry);
//add your list to a group and add the group to the widget
Group group = new Group(); group.setListEntries(listEntries); listWidget.addGroup(0, group);
//finally, add your widget to the Carousel by replacing the default system widget
private HomeManager mHomeManager; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // ... create widget mHomeManager = HomeManager.getInstance(this); mHomeManager.updateWidget(listWidget); }
You can then update the content of your app widget at any time. If the widget is in focus when you update it, the new data appears immediately. Otherwise, the new data appears the next time the widget is created. If you are using a list display, you can add, update, or remove items from the list incrementally without forcing a refresh of the entire list. Incremental updates are animated.
// Pass a value (int) to the HomeManager’s updateNumericBadge method.
mHomeManager.updateNumericBadge(38); //numbers over 99 are shown as 99+
// hide numeric badge by setting value to zero
mHomeManager.updateNumericBadge(0);
At the time you create an item you can define an intent that gets sent when that item is tapped. You can optionally include extra string data that identifies your item to give the receiving activity the ability to know which item was tapped. Use the item's setContentIntent(HeroWidgetIntent) method to set an intent.
HeroWidgetActivityStarterIntent intent = new HeroWidgetActivityStarterIntent( FULLY_QUALIFIED_CLASS_NAME, EXTRA_STRING_DATA ); listEntry.setContentIntent(intent);
If you use a HeroWidgetIntent intent, you need to declare a broadcast receiver in the AndroidManifest.xml. A broadcast receiver registered at runtime does not receiveHeroWidgetIntent intents. (See example Manifest and broadcast handling code)
The Fire Phone SDK includes an API Simulator tool for developers who do not have access to a Fire phone. The API Simulator enables you to test basic app features, such as side panels and home carousel widgets using a regular Android device or emulator.
The API Simulator Tool page explains, step by step, how to configure your app for use with the API Simulator and test your app's use of Peek, Tilt, panels and the home carousel widget on a stock Android device or emulator.
Create immersive apps that respond to the way a customer holds, views and moves the phone. We have updated Appstore Developer Select, Amazon Mobile Ads API, and Amazon Testing Services with more incentives:
Now is the time to submit your apps and games! Apps that are submitted by July 18 and approved will be in the Amazon Appstore when Fire ships on July 25.
Get a free Amazon Appstore developer account
@PaulCutsinger
Fire, the first smartphone designed by Amazon, introduces a new technology called Firefly which enables customers to quickly identify printed web and email addresses, phone numbers, QR and bar codes, plus over 100 million items, including movies, TV episodes, songs, and products. Customers simply press and hold the dedicated Firefly button to discover useful information and take action in seconds.
With the Firefly SDK, developers can build apps that recognize real world objects—music, movies and more—and let customers interact with them. As a developer, you can create more immersive experiences that increase both engagement and the frequency of app use. The Firefly SDK comes with built-in recognizers and databases for products, music, movies, URLs, and websites, as well as built-in actions such as dialing a phone number, looking up an object on Amazon or going to a website. Developers can use the Firefly SDK to take advantage of the built-in recognizers, databases and actions.
An important success metric for any app is engagement, a measure of how frequently and how long people use your app. You need to find ways to bring customers back day after day. Building a Firefly-enabled app is a new technique you can use to get customers to discover your app, sign up and then to come back frequently.
A Firefly-enabled app delivers actionable options (for example, customers can buy concert tickets for a recognized artist) or supplemental item information (for example, the amount of calories in a drink). Customers then have fast and easy access back to your apps, services and brand when they’re actively engaged and interested.
Here are a few examples of how iHeartRadio, StubHub and MyFitnessPal have made use of Firefly to give their apps greater exposure to both new and returning customers. All of these examples start when the customer activates Firefly. They do this by pushing and holding the Firefly button on the left side of Fire. Once an item is identified, a list of actions showing the Firefly-enabled apps is offered.
iHeartRadio enables customers to listen to live radio stations, create their own artist or song-based custom station from a catalog of more than 19 million free songs, or tune in to thousands of shows and personalities on demand for free. When paired with Firefly, the customer can identify a song with one button press and then directly launch iHeartRadio to create their own station based on that artist.
The team at iHeartRadio utilized the Firefly SDK’s built-in music recognizer and music database to identify songs. They built their own Firefly action to create iHeartRadio Custom Stations based on the artist and song that Firefly recognizes. “Our integration allows listeners using Firefly to seamlessly discover music in a whole new way,” said Brian Lakamp, President of Digital for Clear Channel/iHeartRadio. “The Firefly SDK implementation enables music lovers to quickly dive into an iHeartRadio custom experience featuring a variety of songs similar to the one they just heard with just a touch of a button.”
StubHub allows fans to buy and sell event tickets. StubHub used the Firefly SDK to let customers identify songs playing in the background and take various actions. “StubHub used the FireFly SDK and the built-in song recognizer, added a Firefly database of concerts and created a ticket purchase action so when customers hear a song in the background they can find out if the band is playing in their area and buy tickets,” said Brendan Weinstein, Android Development Lead at StubHub. “We extended the experience further by using the Dynamic Perspective SDK to bring users right into the concert—letting them look around a stadium or arena to get the feel for the specific seat they are interested in.”
This is a new way for customers to use the StubHub services. When they use Firefly to identify a song or an artist, they have direct access to the Firefly-enabled StubHub app and can be browsing upcoming events before the song is even over.
MyFitnessPal is a free and easy health and fitness system that helps you attain fitness goals. Using Firefly’s built-in product recognizers, the team at MyFitnessPal has added custom actions to give customers nutrition information and to help them easily track their daily calorie intake.
When a customer scans a physical product, barcode or QR code for a food item, MyFitnessPal’s actions and extra information about that food are offered to the customer. They can then tap the item and go directly and add that food item to their diary in the MyFitnessPal app.
In all of these examples, the app and its services were activated in the context of the customer’s activity. They didn’t need to open an app and navigate to the right screen. Instead, they were able to identify a song, product, barcode, QR code or movie soundtrack, and then launch directly into the app they wanted to use.
Firefly-enabled apps have more options for bringing in new customers and then engaging with them more frequently. Better engagement leads to higher customer satisfaction and ultimately, to better revenue.
The SDK for Firefly includes the library, developer guides, docs and several samples to get you going.
Paul Cutsinger
@PaulCutsinger
Fire represents a huge leap forward in mobile UX (user experience). As a developer, you’ll want to design the best customer experience possible for this new platform. To help you achieve that, we’ve outlined the core design principles that will allow you to take advantage of Fire’s unique Dynamic Perspective features. The good news is that if you are an Android developer your app will work on Fire with little or no work, and as you will see, just a few modifications to your app’s UX will let it better take advantage of what the Fire SDK has to offer.
At the core of the Fire UX is the following principle: connect the real world to the digital world, with immersive experiences and rewarding moments. While it’s easy to dive into the deep end and use everything the Dynamic Perspective SDK and Firefly SDK have to offer, the real question you should be asking yourself is: “how will each Fire feature improve the user’s experience?”
Here are three best practices for designing with the Dynamic Perspective SDK.
One way users will interact with the UI elements in Fire-optimized apps is through one-handed shortcuts. You are probably already familiar with incorporating gestures into your UX designs, but what makes Fire unique is the one-handed shortcuts that are driven by a user’s physical interaction with the device. The unique head tracking capability tracks the position of the user’s head relative to the device and when combined with other sensor inputs enables the entire UI to respond to how the device is held, moved and where the user looks.
To help illustrate this, let’s look at the orientation of the device itself.
Here you can see we have the three axes you’ve come to expect in 3D space: x, y and z. By moving the phone along a particular axis the user is able to trigger a gesture. There are three main gestures the user will come to rely on.
A Peek is triggered when the user subtly rotates the phone around the Y-axis. By slightly angling the device, the perspective of the Dynamic Perspective UI shifts to reveal contextual content.
Here you can see on the home screen, the device is being held at the default orientation directly facing the user and the top status bar is hidden.
When the user angles the phone to the right, it enables the peek gesture, which will begin to display contextual information such as the top status.
It’s important to keep the following in mind when adding peek experiences to your own app:
Rotating the phone around the Y-axis will trigger a Tilt. While Peek is a subtle movement, Tilt is at the far end of the movement’s spectrum. Tilt is designed to pull open the left and right panels.
Tilting the phone to the far right on the home screen you will pull up the Left panel. Left panels are typically used for menus and navigation, such as in the below example from the Fire home screen:
For many, this will represent a totally new way of interacting with a digital device and its intention is to invoke a sense of playfulness and delight for the user. In addition to the left panel, there is a right panel, which we’ll talk about more in the next section. You can use a tilt gesture in the opposite direction, moving the right side of the phone towards you, to pull up the right panel. These gestures become intuitive for users since they are facsimiles of how we would interact with physical objects in the real world.
While it’s important to be playful in your design, it’s critical that you don’t make the user work too hard to understand your app’s UX. The key goal is to make the primary UI clean and visually easy to scan by distilling it down to only the essential information.
Fire apps consist of three different panels that help tie the entire experience together for the user. These are the Left Panel, Primary Panel and Right Panel. Let’s take a look at each one and how they work.
The primary panel is the main application space where most of the action takes place. Here you can see in the Maps app that we are presented with a standard Android View that displays the main UI of the App.
As we discussed in the previous section, the left panel contains quick navigation, refinement controls, sort controls, and other contextual controls. User actions on this panel change the view in the primary panel.
The left panel should contain your app’s actions that are not key to the primary interaction of the app. Core UX should always be contained within the primary panel.
The right panel helps users discover new things or perform essential tasks more quickly without leaving the current context.
The right panel is always contextual whereas the left panel is constant throughout the app. This means that the right panel can also be used for quick summaries, actions tied to what is being displayed on the primary view, or additional shortcut actions that wouldn’t make sense to be exposed in the left panel. The right panel is a good place to positively surprise the user with information that is delightful in the moment, but which they didn’t know to expect. For example, the Amazon MP3 app surfaces song lyrics in the right panel.
By taking advantage of these panels, you’ll also be integrated into the system-wide gesture events. A great place to start is by going through the phone’s default apps such as Email, Maps, Messaging and even the Silk Browser to see how they are setup.
The next important thing to also consider is how your app will look on the home screen carousel. Each app is represented in the carousel with two parts—an icon on top and a widget below the icon.
In the image above, the highlighted red area is your app icon and the area highlighted in green is the widget area. The widget allows you to expose content without needing the user to launch the app. Text and images can be presented in a grid or list.
The widget communicates with your app using an intent. When the user taps an item in the grid or list, the intent you defined for the item is sent. If you do not provide a widget for your app, the system displays a default widget that shows “Customers Also Bought” content related to your app.
Be creative with this space and use it to drive user engagement. You could use it to help users quickly launch your app. Or, use the space to expose a summary of past activity the user may be searching for again.
Create immersive apps that respond to the way a customer holds, views and moves the phone. We have updated Appstore Developer Select, Amazon Mobile Ads API, and Amazon Testing Services with more incentives:
Now is the time to submit your apps and games! Apps that are submitted by July 18 and approved will be in the Amazon Appstore when Fire ships on July 25.
Fire Developer Resources:
Jesse Freeman (@jessefreeman)
June 18, 2014
David Isbitski
Today in Seattle, Amazon founder Jeff Bezos unveiled Fire, the first phone designed by Amazon. Fire is the first and only smartphone with Dynamic Perspective and Firefly. Dynamic Perspective is an entirely new technology that responds to the way a customer holds, views and moves the phone. For example, Zillow is using the Dynamic Perspective SDK to create the ability to zoom in on pictures within their app by just moving the phone closer to the user. The revolutionary Firefly technology already recognizes movies, music and more and with the Firefly SDK developers can extend the use of the Firefly button to enable new actions their users can take based on what they can identify. As a developer, these new technologies enable you to create more immersive experiences in your apps and games that increase user engagement.
The Fire SDKs are available now, and make it easy for developers to take advantage of these features in their apps. These SDKs were designed to offer developers power and flexibility with pre-built controls, low level APIs, and complete UI frameworks. You can download both SDKs here.
Fire apps are built with the same familiar Android development environment you are used to. Fire provides a powerful set of hardware to bring your apps alive. With 2 gigabytes of RAM, a powerful Qualcomm Snapdragon 800 Quad-core 2.2 GHz CPU and an Adreno 330 GPU, Fire will support the high performance game experiences customers crave. For detailed technical specifications of Fire, click here.
Zillow used the Dynamic Perspective SDK to integrate real-time information into their app’s user experience. In the Zillow app for Fire, customers can view new listings or nearby homes for sale and rent, right on the Fire carousel without having to open the Zillow app. In addition, Zillow brought a new photo experience to the device so users can use their head to zoom in on a bedroom or peek to see what's around the kitchen corner. “Real estate shopping is an inherently mobile experience so any chance we have to bring listings or new information to a home shopper while they're out on the go is a great thing,” said Jeremy Waxman, Vice President of Marketing and Mobile, Zillow. “Photos are incredibly impactful for home shoppers—it is the most common activity for users of our app. We are thrilled to be able to go one step beyond static images and offer our users the opportunity to zoom in on the photos and then peek around the room with the Dynamic Perspective SDK.”
Ezone.com, the creators of Snowspin and Crazy Snowboard, used the Dynamic Perspective SDK to allow a customer to navigate the endless runner game with just their head—no tapping on the screen necessary. Using head and hand movements, users can control direction and speed. Users can interact with games in a more immersive way – without their hands getting in the way of game play. Additionally, Ezone.com created a special flip jump in Snowspin currently exclusive to Fire customers with just a flick up of the head. “Porting our existing Android versions of Snow Spin and Crazy Snowboard to Fire couldn’t have been easier, and we were able to add new innovative game moves such as a double backflip with just the flick of your head, enabling even higher scores,” said Simon Edis, CEO of Ezone.com. “The Amazon team had all the tools ready to go, making it super easy for us to just drop them in our games and publish.”
CrowdStar used the Dynamic Perspective SDK to create the ability for Covet Fashion users to select their favorite fashion choices for their model. Using zoom and tilt, players can see details of outfits to vote on looks. “Dynamic Perspective is so innovative we’ve just begun to figure out how to take advantage of all the technology has to offer. The simplicity of the user interface and design around a one handed experience will really allow us full creativity as we look ahead in our portfolio of apps and games,” said Jefferey Tseng, CEO of Crowdstar. “Dynamic Perspective has unlocked capabilities we’ve always wanted to create in our game—incorporating zoom and pan in an incredibly natural way without having to touch the screen, is the first example.”
Firefly understands your surroundings, instantly helping you to learn more, discover new things, and take action on the world around you. It can scan physical objects, identify them, and obtain related information about them. Everything from book covers, album covers, bar codes, QR codes, movies, television shows, songs and more. Developers can use the Firefly API to supplement item identification or build actionable options for customers after an item is recognized. For example, iHeartRadio used the Firefly SDK’s built-in music recognizer and music database to identify a song playing. Then they built their own Firefly action to create a station based on the song Firefly recognized.
Because phones are often used with only one hand, Fire also offers one-handed shortcuts that go above and beyond touch. These shortcut gestures allow you to simply angle the device and “peek” into additional information that your apps can display on screen. For example, customer ratings in the Amazon Appstore instantly appear over each app’s icon when the device is tilted. Navigation is enhanced with gestures: moving back is as simple as flicking up on the screen with a finger, while tilting the device in either direction brings up two additional panels for navigation and contextual information. Gestures can even be integrated inside your games so that users can experience the game in a more intuitive way. Imagine moving a character on screen simply by titling the device instead of having to cover what’s on the screen with your finger.
Fire enables new ways of interacting with your phone by simply rotating the device around X, Y and Z axes. These gestures were designed to be used with only a single hand, a common scenario when using a phone. We’ve created a framework that integrates directly with these gestures and Fire’s new sensors, making it a simple process to integrate within your own apps.
Fire SDKs and APIs
The underlying technology for Dynamic Perspective and Firefly is sophisticated, but Amazon makes it simple for developers to harness their capabilities. See a full breakdown of the SDKs and their contents here.
Dynamic Perspective SDK
The Dynamic Perspective SDK includes a series of APIs and Controls to help developers create peek, tilt and zoom capabilities within their app based on customer head movements, create multi-dimensional game play, or provide quick navigation menus by tilting the device to the left or right. These experiences are created through a variety of visual effects including adding shadows, depth and tracking head and motion gestures. For example, you could create an app that allows you to peek at how many pages are left in the book you are reading, or browse your apps as if you were flipping through a physical file drawer. Flat cartoonish icons and graphics could be replaced with realistic visuals that use lighting, shadows and motion to create an experience you would want to show off at every opportunity.
Firefly SDK
With the Firefly SDK, developers can build apps that recognize real world objects—music, movies and more—and let customers interact with them. As a developer you can create more immersive experiences that increase both engagement and the frequency of app use. The Firefly SDK comes with built-in recognizers and databases for products, music, movies, URLs, and websites, as well as built-in actions such as dialing a phone number, looking up an object on Amazon or going to a website. Developers can use the Firefly SDK to take advantage of the built-in recognizers, databases and actions.
Fire is based on Fire OS so if an app runs on Android it can run on Fire with little to no work. For a developer who just wants to get started with Fire they can do a simple port, or they can use the Fire SDKs to easily integrate UI features such as shadows or hovering images within the app or game, or creating left and right panels based on Fire’s three-panel UI design.
Fire uses the same familiar Android development environment, and while Android Studio is fully supported IDE, you can also use Eclipse and other IDEs. Android Studio Gradle support is also supported for builds. An API simulator for the Side Panels and Carousel is included to test code on stock Android emulators and devices without needing a physical Fire device.
We know that many Android apps and games are built with various technologies so the Fire SDK includes support for those as well. Unity, HTML5 and C++ are all supported. For additional details on using third-party frameworks click here.
By optimizing your apps for Fire, you have the opportunity to create compelling experiences that combine realistic visuals, with both depth and perspective allowing customers to use their smartphone in ways never done before. Starting today we are updating Appstore Developer Select offerings, Amazon Mobile Ads API, and Amazon Testing Service with special Fire incentives.
Amazon Developer Select: Amazon will offer 500,000 Amazon Coins ($5,000 value) for each of your qualifying paid apps or apps with in-app purchasing that meet the additional program requirements for Fire Phone. You can create campaigns via the Promotions Console to give these Coins away to consumers purchasing any of your paid apps or in-app items. For more details on the Amazon Developer Select program for Fire click here.
Amazon Mobile Ads API: Developers earn $6 for every thousand interstitial ads displayed across any supported device in August and September (up to one million impressions per app per month) when they distribute their apps on Fire phones and send the first ad request from a qualified app. For more details on the Amazon Mobile Ad Network Interstitial CPM Offer promotion click here.
Amazon App Testing Service: We have also expanded our testing tool to Fire. Developers can now test their Fire apps before submitting them to the Amazon Appstore. Developers simply drag and drop an app and most will receive feedback about their app’s compatibility within 90 seconds. Additionally, registered developers have access to additional Fire test results that check the app’s experience. These tests enable developers to see how an app looks and performs on an actual device sitting in an Amazon device lab.
With the launch of Fire, Amazon now offers a complete device and apps ecosystem spanning across tablet, phone and TV. Customers pay for your apps once and interact with the experiences you create across all their screens. As a developer, you only need to submit your app once and with few changes make it available to your customers across all Amazon devices. Now is the time to submit your apps and games!
Additional Fire Developer resources:
-Dave (@TheDaveDev)
This quick video will give you an overview of the Amazon GameCircle API. It will cover why developers should use GameCircle, how Whispersync for Games helps preserve player progress between devices, what experience points / cross-game achievements are, and cover the process for viewing engagement analytics through GameCircle’s Achievement Reports. Whether you are completely new to GameCircle, or have achievements already integrated into the existing gameplay of your app, this video will provide you a quick introduction on how to increase player engagement, improve retention, and enhance the customer experience.
For more information about player profiles and mobile development, see our online documentation:
Amazon Fire TV offers an exciting opportunity for game developers to reach more customers, by making your apps and games accessible in the living room.
This quick video will give you an overview of Amazon Fire TV. It will cover how Fire TV can help Android developers (big and small) increase their customer base, how to monetize on Fire TV, how to optimize for a 10-foot experience, and cover how to qualify for 500K Amazon Coins ($5,000 value) for promotion for each of your qualifying paid apps or apps with in-app purchasing. For more information about getting started with Amazon Fire TV, see our online documentation:
Amazon Fire TV offers your existing Android apps an entirely new set of potential customers to engage with. It also gives your customers the ability to experience your app across Kindle Fire Tablets, Android phones and tablets, and now Amazon Fire TV – all through the same Amazon Appstore. If a customer has already bought your app that you have made available for Fire TV, they can download it onto their new Amazon Fire TV instantly, without having to purchase an additional version.
Adding Amazon Fire TV support to your existing Android App is as simple as following a few guidelines, compiling and uploading a new TV version of your apk, and then adding Amazon Fire TV as one of your app’s device targets inside the Developer Console.
Amazon Fire TV opens up new discoverability possibilities for your app across many new customers. Most updates to your apps for Amazon Fire TV should be minor, and if you have been following the guidelines from Android on Designing for Multiple Screens all along, your app may already be ready for a large TV resolution.
While you may be familiar with targeting Android tablets and phones, there are a few things you need to consider for your app to run correctly on Amazon Fire TV. This includes understanding the layout, dimensions and orientation of Amazon Fire TV views, changes to the user experience when interacting with a TV (10’ away on average), UI and navigation patterns, as well as some other TV-specific gotchas such as overscan and color reproduction.
You can think of the Amazon Fire TV screen as an Android device that is locked to landscape orientation, with a constant width of 960dp and with a height of 540dp. The rendering surface is always 1920x1080 with a screen density of 320dpi. Output is automatically scaled for 720p and 480p output resolutions.
The following table shows how the various video outputs of Amazon Fire TV map to their Android counterparts.
TV setting |
Output resolution (pixels) |
Render surface (pixels) |
Density identifier |
screen density (dpi) |
Display resolution (dp) |
Screen size identifier |
1080p |
1920 x 1080 |
1920 x 1080 |
xhdpi |
320 |
960x540 |
large |
720p |
1280 x 720 |
1920 x 1080 |
xhdpi |
320 |
960x540 |
large |
480p |
640 x 480 |
1920 x 1080 |
xhdpi |
320 |
960x540 |
large |
By following the Android best practices guide for Supporting Multiple Screens, you can create a different layout configuration just for Amazon Fire TV so that your existing layout adapts when it runs on the device. This is the same process you are most likely already using for generating different drawables and layouts and including them in your app’s /res directory.
You can get a detailed overview of the resource configurations available for Amazon Fire TV here.
TV interfaces in general are often referred to as 10-Foot User Interfaces (10-ft UI) because the user is viewing the screen from 10 or more feet away. Although the screen itself can be very large, the screen resolution is lower, and distance from the screen means a smaller angle of view.
The design choices you would make for an application or web page running on a desktop computer, tablet, or phone are fundamentally different from those of a TV, as users typically view those screens from much closer distances. In addition, as the television is used in a more relaxed fashion than a computer, a tablet or a phone, the UI on the TV should not require as much attention and precision. 10-ft UI may require you to rethink the design, layout, and navigation of an existing app.
Keep the design of your screen in a 10-ft UI simple and clean, with low information density. Limit the number of design elements or UI components (menus, buttons, images) on the screen, and ensure that those elements are large enough and spaced far enough apart to be read from a distance. Present a clear set of actions or options for each screen. Minimize the amount of text, as users do not read a lot of text on a television screen. Avoid requiring the user to input a lot of information and provide reasonable defaults where possible.
In your existing Android app for a phone or tablet, you can assume that touch is always present, and your UI elements reflect that. For example, if I run the existing Android Snake Game from my AWS re:Invent 2013 demo on a Kindle Fire, tapping the menu button with my finger brings up the standard Android options menu.
Figure 1- Android Options Menu for Touch on Kindle Fire
However, running the same app on an Amazon Fire TV shows a slightly different experience when interacting with the options menu. Instead of tapping our finger on a screen, we press the Menu button on the Amazon Fire TV remote or game controller, which brings up the Android options menu with the first item in the ListView (“New Game”) automatically highlighted.
Figure 2- Android Options Menu on Amazon Fire TV automatically highlights currently selected item for the user
This allows your users to know exactly where they are in the options menu. Pressing the SELECT button on the remote (the A button on a game controller) raises that UI element’s ItemSelected event .
Note that all of this works automatically, and you do not have to wire up any of the on screen highlighting for any of your user interface elements – that is done for you by FireOS itself. This does, however, affect the flow of interaction your customer has with your app when using a remote or a controller. Thoroughly test your app running on a TV screen with a remote or controller and make changes to the interaction where appropriate.
For more helpful tips on modifying your app to work with remote and controllers be sure to check out our post with helpful tips.
The Amazon Fire TV screen is always displayed in landscape orientation, with a display resolution of 960dp wide and 540dp high. In terms of Android supported screen size configurations, you should target large. If you have not created any large-screen assets, you need to verify that your existing sizes scale well.
Depending on the orientation you are using for your existing Android app, you may see some inaccurate screen sizing when running against the TV screen for the first time. In the example below I am using the code from my previous Ad Mediation post, which was set to run in portrait.
Figure 3- App scaling and running in forced landscape
The first time the app runs you can see the scaling that occurs to accommodate the device screen size for an app forced into portrait mode. To fix this, call setRotation on any View like so:
myView.setRotation(90f);
This rotates the current view 90 degrees and places it into landscape mode. Another way to do this is to set the orientation of your main view inside of its layout file so that all children are rotated as well.
In fact, simply updating the orientation of the View of my main activity to run horizontally instantly fixed all of my screen issues and my app ran perfectly.
Figure 4- App scaled correctly and set to landscape
When testing out the Snake Game from the above example, I encountered a similar scaling and rotation issue.
Figure 5- Snake Game Demo running incorrectly
Instead of setting the orientation of the entire View you can also change the orientation of your activity itself. For example, inside the androidmanifest.xml file for my game, I provided an attribute for the orientation of the SnakeGameActivity.
Setting the android:screenOrientation to be landscape fixed all scaling issues with the game and made it instantly playable.
Figure 6- Snake Game fixed and running in landscape
With just a few adjustments to your apps’ Android Views and updates to their associated resource images, your apps can be displayed on an Amazon Fire TV connected screen with minimal changes.
Overscan is the physical space TV hardware manufactures reserve around the displayable area of a TV screen and something you should be aware of when targeting Amazon Fire TV with your app. This space can exist on TVs of any size and limits the area in which your app is able to render its user interface.
Figure 7- TV Overscan examples.
To avoid any issues with overscan, I recommend that you avoid placing any of your app's UI elements within the outer 5% of any edge on the screen.
Any onscreen text or UI elements should be fully within the inner 90% (the safe zone) of your user interface. Your text should also use larger type sizes (at least 14sp) so that they are viewable on large screens. Amazon Fire TV uses Helvetica Neue Regular as the system font throughout all of the system’s interfaces.
When testing your app you may also find that the colors are not represented the same when shown on a TV display as they are on a tablet. Because TV screens have a higher contrast, they have a tendency to make colors seem more saturated, brighter, and vibrant. The range of colors that can be displayed is also less than that of a PC or mobile device screen. Cool colors (blue, purple, grey) work better than warmer colors (red, orange) on a TV and a good rule to follow is to avoid using less saturated colors in your apps.
Figure 8- Color Saturation on TV Displays
If you choose to add an updated user interface to your app to better match that of Amazon Fire TV’s UI, there are a couple of guidelines you should follow.
Figure 9- Navigation Screen Types on Amazon Fire TV
All navigation starts with the home screen which consists of a global navigation menu on the left and a set of content tiles on the right.
Figure 10 - Home Screen
The global navigation menu is the primary system menu. It appears in a row on the left side of the screen. The global navigation menu allows the user to choose major content categories or other options including Search, Home, Movies, TV, Music, Games, Apps, and so on. Each item in the global navigation menu can be selected with the Up and Down directional buttons.
When the user focuses on any item in the global navigation menu, the home view for that node appears on the right side of the screen. Each node has its own home view with its own content. The overall system home view, sometimes called the launcher, is accessible with the Home key on the Amazon Fire TV remote, or by selecting Home from the global navigation menu.
Figure 11- Outer Space Has Been Focused on by User
Each home view contains multiple horizontal content rows. The title tile for the row indicates the type of content (for example, Most Popular, My Movies, Recommended for You). The remaining tiles show examples of that content. From these content rows, the user can:
Be sure to check out the Design and User Experience Guidelines for additional information on all of the screen types and important tips on creating an engaging user experience for Amazon Fire TV.
In addition to the global navigation, menu notifications are also displayed in a certain way within the base Amazon Fire TV user interface.
Figure 12- Informational Notification
Amazon Fire TV includes three kinds of notifications you can use inside of your own apps: Informational, Media and Modal. Informational Notifications can be used for general messages to the user, with optional actions. Media Notifications are used when the user is interacting with media inside your application (music with artist and title for example). Modal notifications are used for alerts that require user input. Modal notifications may appear at any time over your application. A modal notification takes the focus and the user must take actions to dismiss that notification.
Note: Modal notifications can only be generated by the Amazon Fire TV user interface in response to critical issues (such as an unavailable network connection). System-wide modal notifications cannot be generated by individual apps. You can use alert dialogs (AlertDialog) to create modal alerts within your app.
Figure 13- Modal Notification
Amazon Fire TV Notifications are slightly different from standard Android Notifications. Although the API for Android notifications is available in the Amazon Fire TV SDK, and apps that use that API will compile, standard Android notifications do not appear in any way on Fire TV. You must convert your app to use the Fire TV notifications API.
One you have installed the Amazon Fire TV SDK Add-on, you will then need to import the Amazon device notification namespaces:
import com.amazon.device.notification.AmazonNotification; import com.amazon.device.notification.AmazonNotificationManager;
Next, use AmazonNotification.Builder to create a notification object, as you would a standard Android Notification. The AmazonNotification.Builder class has a new required method, setType(), which indicates the type of notification. You have these notification types to choose from -- TYPE_INFO maps to Information Notifications and TYPE_MEDIA corresponds to Media Notifications.
Once you decide on the type of Notification to create you need to set up the Builder object like below:
AmazonNotification.Builder builder = new AmazonNotification.Builder(getApplicationContext()); builder.setSmallIcon(R.drawable.notification_icon); builder.setContentTitle(title); builder.setContentText(text); builder.setType(AmazonNotification.Builder.TYPE_INFO);
Lastly, register the Notification object with the AmazonNotificationManager, as you would a standard Android Notification. You should also assign it an ID to update or cancel the Notification later.
AmazonNotificationManager notificationManager = (AmazonNotificationManager) getSystemService(Context.NOTIFICATION_SERVICE); notificationManager.notify(notificationId, builder.build())
Please note that unlike the Kindle Fire, there is currently no Notification Tray on Amazon Fire TV so if your customer is in an immersive mode app, they will not see the Notification.
For full details and more sample code on implementing notifications, check out our developer documentation here.
If your app contains any web content, you will need to do some slight modifications. By default, Amazon Fire TV does not include a Web Browser, but web content is allowed using the Android’s WebView. To use web content, set the WebClient of the WebView and override url overloading. This can be done by calling the setWebViewClient method of the WebVew to a new WebViewClient whose shouldOverrideUrlLoading property has been set to return false.
This code ensures that your app does not attempt to load an external browser with web content and instead loads it into the WebView. You can see the url being loaded successfully into the WebView below.
Figure 14- WebView HTML content loaded successfully
Note that if you attempt to do a direct call to WebView.loadUrl without setting a new WebViewClient whose shouldOverrideUrlLoading method returns false like above you will see an error like this one:
Figure 15- webview.loadUrl security message
If you would like to link to other apps on the Amazon Appstore, for example, to cross-promote your own offerings, you can also use Android Intents with amzn:// urls, just as you can on the Kindle Fire. If you “deep link” to an app that is not ready for Amazon Fire TV we still show the detail page for the app, but customers are not able to download it. Check out this post for more information.
Once your app is updated for Amazon Fire TV, your app’s listing on the Amazon Appstore runs across all the available devices you chose when you submit your app. Customers pay for your app once and begin to engage across all of their Kindle Fire tablets, Android phones and tablets, and now Amazon Fire TV. The opportunities for your customers to discover and engage with your app continue to grow!
In addition to the tips I’ve included here, be sure to check out these additional resources:
Amazon Fire TV SDK Frequently Asked Questions
Design and User Experience Guidelines
Android Developer Multiple Screen Guidance
Supporting Different Screen Sizes
Supporting Different Densities
-Dave (@TheDaveDev)
Amazon WebView (AWV) is a Chromium-derived web runtime exclusive to Fire OS. AWV makes better performing and more powerful apps possible by providing support for a faster JavaScript engine (V8), remote debugging, and hardware optimizations for Kindle Fire devices including an accelerated 2D Canvas. Enabling your Cordova project to support AWV gives you access to HTML5 features not supported by Android’s built in WebView such as: CSS Calc, Form Validation, getUserMedia, IndexedDB, Web Workers, WebSockets and WebGL.
For developers who are not familiar with Cordova, it is an open source solution that provides tools and templates that wrap web code and assets, allowing you to publish your web code and assets as if they were native apps. Cordova is also customizable via its plugin architecture which allows developers to extend the framework in order to access OS level APIs like the built-in contact list, as well as physical hardware on the device itself like the camera. Cordova also makes it possible for two way communication from the web app wrapper to the device’s native language.
To ensure that all core Cordova plugins will be natively supported, Amazon worked with the Apache community when adding Cordova support for the Amazon Fire OS platform. Here is how to set it up on your local computer, enable Amazon Web View and create a project from scratch.
You need to make sure you have all the required tools and libraries needed to compile and package an Android application. Download and install the following (please note these links will take you to third-party sites):
You'll need to have Java installed, and the Android SDK from developer.android.com/sdk which includes the Android Developer Toolkit (adt). You may be presented with a choice of where to install the SDK, otherwise move the downloaded adt-bundle tree to wherever you store development tools.
For Cordova command-line tools to work, you need to include the Android SDK's tools and platform-tools directories in your PATH environment:
To modify the PATH environment on Mac, Linux, etc.:
export PATH= $ {PATH}:/Development/adt-bundle/sdk/platform-tools:/Development/adt-bundle/sdk/tools
You will also need to enable Java, Ant and/or Node from the command line. Open a command prompt and type "java", then "ant" then "node". Reinstall, or append to the PATH whichever fail to run.
This will expose the tools in newly opened terminal windows. Otherwise run this to make them available in the current session:
$ source ~/.bash_profile
To modify the PATH environment on Windows 7:
;C:\Development\adt-bundle\sdk\platform-tools;C:\Development\adt-bundle\sdk\tools
You will also need to enable Java, Ant and/or Node from the command line. Open a command prompt and type "java", then "ant" then "node". Reinstall, or append to the PATH whichever fail to run:
;%JAVA_HOME%\bin;%ANT_HOME%\bin
Make sure you are able to invoke npm (Node Package Manager) on your command line; it's added as a part of Node.js. (You can install Node.js from the nodejs.org homepage and type NPM in the command line to validate the installation.)
To install Cordova, open a command prompt/terminal and use:
$ npm install -g cordova
On Unix-like systems, you may need to append "sudo" to ensure it is installed correctly. See Cordova's documentation for the Command-Line Interface for more details.
Create project. Open a command line/terminal in a directory where you'd like to have your project stored and run the following commands to create a project and add the files needed to build for Amazon Fire OS:
$ cordova create hello com.example.hello HelloWorld
Add Amazon Fire OS platform. Change into the newly created project directory and add the files needed for the amazon-fireos platform target.
$ cd hello $ cordova platform add amazon-fireos
The first time you try to add the amazon-fireos platform you will be instructed add the Amazon WebView SDK. Download and extract the Amazon WebView SDK zip file from the Amazon Developer Portal.
Copy awv_interface.jar from the unzipped folder into the amazon-fireos directory found in Cordova's global working directory. Note: You'll need to create the libs/ folder manually.
On Mac/Linux:
$ mkdir ~/.cordova/lib/amazon-fireos/cordova/3.4.0/framework/libs $ cp awv_interface.jar ~/.cordova/lib/amazon-fireos/cordova/3.4.0/framework/libs/
On Windows:
> mkdir %USERPROFILE%\.cordova\lib\amazon-fireos\cordova\3.4.0\framework\libs > cp awv_interface.jar %USERPROFILE%\.cordova\lib\amazon-fireos\cordova\3.4.0\framework\libs
Then you will need to remove and re-add the platform:
$ cordova platform rm amazon-fireos $ cordova platform add amazon-fireos
Add HTML5 assets. Your web app's assets - HTML, CSS, JavaScript, images, etc. - should be placed in the project's www folder. You can use the sample placeholder files installed as a template, or you can replace them completely with your web apps's files.
Add support for Android devices if needed. If your app is going to be used on non-Fire OS devices running Android, you can provide a fallback to the stock Android WebView engine by adding the awv_android_factory.jar file found in the AWV SDK bundle into your Cordova project under the platform libraries folder. For example:
./hello/platforms/amazon-fireos/libs/awv_android_factory.jar
Adding the code above will allow you to submit the app to the Amazon Appstore and target non-Kindle Fire devices as well as all Kindle Fire devices.
Build and deploy your project. Make sure that USB debugging is enabled on your device as described on the Android Developer Site, and use a mini USB cable to plug it into your system. (Note: Currently, testing via an emulator is not supported for Amazon WebView based apps.)
Then you can build and deploy the app to the device with the following single command:
$ cordova run
With Amazon Web View support enabled for Cordova, you can build higher performance apps with tools like WebGL, CSS Calc and Web Workers, debug your app remotely, and see performance gains through a faster JavaScript engine and access to accelerated hardware on Kindle Fire devices.
To learn more, follow these links (some of which will take you to third-party sites):
Today, Amazon announced Amazon Fire TV, a new device that makes it easy for users to stream movies, TV shows, and music as well as download apps and play games right on the HDTVs they already own. For developers, Fire TV can help you increase your customer base by putting your app in the living room, in front of people who enjoy entertainment and may not have seen your apps before. To promote rich user experiences, Fire TV enables full-featured game controllers, Dolby Digital Plus Certified surround sound and more. Android developers will find that developing for Fire TV is familiar, and optimizing their apps for the new controllers and TV display will not require learning a new language or new frameworks. Click here to learn more about how to setup your Fire TV developer environment.
A room with a large screen TV and surround sound audio is a great environment for gaming, and Fire TV has the performance to deliver a great gaming experience. From its inception, Fire TV has been designed around optimizing HDTV displays and powering demanding applications. It uses a Qualcomm Quad Core Snapdragon Krait 300 processor with Adreno 320 GPU and 2GB of RAM to support high performance game experiences. (See all the tech specs here).
Fire TV also supports a variety of controllers to let you design the best experience for your users. Fire TV supports a d-pad remote control, along with multi-function game controllers. Multi-function game controllers enable much more engaging gameplay for the TV than a typical d-pad remote can.
Second Screen is a technology that allows your Amazon Fire TV app to interact with other mobile devices using DIAL, an open standard that enables customers to discover and open apps on their television right from their tablet or phone. For example, a user can sit on their couch and use their Kindle Fire HDX to control an app running on their TV screen.
Running apps on a television opens up unique experiences for customers. Users are (on average) 10 feet away from the screen with different viewing habits and expectations. For example, users don’t need to stop what they are doing to view your app. Users can see the TV screen while they are making breakfast, unlike when they’re on phones or tablets. It is also easy for multiple people to have a good view of the TV at the same time, something which can be hard on PCs or mobile devices. There are several ways to use these large-screen characteristics to your advantage. One idea is to use the TV display productively during times it would otherwise be turned off. For example, you could display traffic and weather information on the TV or even show a family calendar or bulletin board app on the TV. Another idea is to use the screen size to support multi-player games in which the users can play concurrently, each able to see the screen without difficulty, each with their own game controller.
There are two kinds of controllers available for the Amazon Fire TV. They are:
The Fire TV remote and game controllers trigger logical default events, so the game controller will work predictably in standard Android UI widgets. For example, the Menu button on the controller will pass through to Android and invoke the Android context menu (OptionsMenu), and the Back button on the controller will be ingested like the back button in the Android UI. Events for the remote and game controller can be customized, and trigger special events you can detect.
Fire TV remote (shown below) comes with Amazon Fire TV. The remote supports the remote input events shown here. The D-pad on the remote fires keycode events (like KEYCODE_DPAD_UP) and navigates through standard Android controls, moving UI focus up, down, left and right. In many cases, navigation around your UI will work right out of the box and won’t require any special event handling. Since the remote is the default controller that ships with Amazon Fire TV, you should test to see that your app is functional with Amazon Fire TV remote, even if you have optimized for a game controller.
The Game Controller - Multiplayer support comes to your TV
The Amazon Fire game controller offers the same level of default support for standard Android navigation controls as the remote does, but optimizing your game for the game controller offers a lot of additional options; just take a look at the game controller controls in the picture below. Up to 7 game controllers can connect via Bluetooth to an Amazon Fire TV at any one time and each controller can be associated with a player ID, so multi-player support is a real option for you.
When a customer buys a Fire TV and registers with their Amazon Account, they are already set up with their verified Amazon Payment profile. Your user is ready to purchase apps or in-app items with no further effort. Amazon Fire TV supports the Amazon In-App-Purchasing API so you can offer consumable items, permanently entitled items, and even subscriptions for sale in your app.
To help you tune your gameplay and monetization implementation, Amazon offers A|B Testing and Analytics tools that can help you hone your app for maximum user retention and optimized monetization. And all of these tools work on Fire OS devices and Android devices, and most will work on iOS devices as well.
To make your app look sharp on a TV, you’ll want to make sure you have a layout for tvdpi and xhdpi to support the resolution on living room TV screens. Unlike most Android devices, Amazon Fire TV will render your app on 720p or 1080p screens of any size, so you should plan for a range of screen sizes. It is also important to remember that your user will typically be 10 feet away from the screen, and may appreciate larger controls and dialog boxes. Common tweaks to make apps look better on TV include:
Because you can use the Android code you’ve already written, getting started is easy.
Here are three steps you take to make your game or app available on Fire TV:
Once submitted and approved, depending on your app’s compatibility, a user may be able to purchase your app on Amazon Fire TV, Kindle Fire, the Amazon Appstore website, or on the Amazon Appstore of other compatible devices. This means that if your app is available for Kindle Fire devices, Android phones, and Amazon Fire TV, your user will be able to purchase your app once on any of those devices and use it across any of the other compatible devices. Not only does this expose your app to new users, it also makes your app available on more screens so it can be in front of your existing customers more often.
When you launch your app on Fire TV, you will be considered for the Appstore Developer Select program. As part of the Appstore Developer Select program, developers who support Fire TV can receive 500,000 Amazon Coins and create campaigns where customers earn those Coins when they purchase apps and games. This is in addition to the regular program benefits that include 500,000 mobile ad impressions, enhanced merchandising, AWS credits, and additional Amazon Coins incentives. See this blog post for more details on Appstore Developer Select.
While you can develop Android apps for Amazon Fire TV without an SDK, Amazon does provide an SDK you can download that includes sample code, Javadocs, two .jar files for controller support and messaging, and guidelines for fine-tuning formatting for HDTVs.
Amazon Fire TV resources
Amazon Appstore resources
We recently posted an update to the Appstore SDK here.
This update introduces two material changes. These are:
Please download the latest SDK to get the latest UNITY and Adobe plug-ins and remove the old plug-ins.
Setting up your Kindle Fire device for testing and debugging is a simplified process thanks to Android Debug Bridge (ADB) support. Since questions around ADB driver support have come up on Stack Overflow and our developer forums I thought it would be beneficial to walk through the setup process.
Note – this post was updated on April 16th, 2014 to reflect changes in the Amazon Android SDK addon.
First, ensure your development computer has at least one package of Kindle Fire system images installed. This is critical because the package includes the vendor identification needed for ADB to recognize any of the physical Kindle Fire tablets. This is done through the following steps:
For complete information about setting up your development computer and installing the SDK packages, see Setting Up Your Development Environment.
If you installed a previous version of the Kindle Fire USB driver then take the following steps to remove the previous USB device driver and force re-installation of the driver.
Next, we need to turn on ADB support on our actual Kindle Fire device. Follow these steps:
As a security precaution, you should set Enable ADB to Off when you are not trying to connect to the Kindle Fire tablet to your development computer.
First, ensure you have enabled ADB on the Kindle first as described above. For the USB driver to install correctly, Windows must recognize the device as Android Composite ADB Interface during installation. If ADB is not enabled, Windows instead recognizes the device as Portable Devices.
Do the following to install the Kindle Fire USB driver:
Next, do the following to detect your Kindle Fire tablet through ADB:
adb kill-server adb start-server adb devices |
If the serial number does not appear after running adb devices, do the following:
android update adb |
adb kill-server adb start-server adb devices |
If your Kindle Fire device still does not show up you may need to reboot your development machine and then try again.
Perform the following steps if your development computer runs OS X:
./android update adb |
4. In the terminal shell, navigate to your Android SDK platform-tools directory.
5. Run the following commands and confirm that the serial number for your Kindle Fire tablet appears in the list of devices.
If your Kindle Fire device does not show up in the list of devices you may need to reboot your development machine and then try again.
You should now be able to fully test with your Kindle Fire device over the Android Debug Bridge. For additional information on enabling ADB for Kindle Fire Devices, see Setting Up Your Kindle Fire Tablet for Testing.
-Dave (@TheDaveDev)
Last week, I wrote to tell you about the new Dolby SDK that makes it easy for you to optimize the sound on the device to match the different kinds of audio you use in the course of your app. This week, we have some feedback from a developer who has implemented the Dolby Plug-In for their app on Kindle Fire.
Luxurious Animals is a game developer in New York. They wrote the casual game Lux Ahoy!, a netmagazine.com Top-10 game. Before working with Dolby Digital Pro, they didn’t consider audio to be a key component. However after using the Dolby Plug-in, Luxurious Animals had this to say: “The API created a much richer and more immersive experience, making the game feel more exciting and absorbing. It really took our game to the next level.”
Overall, Luxurious Animals found the Dolby Plug-in to be easy to work with and required no changes to the overall workflow:
“Adding the Dolby magic to our app was as easy as linking a JAR file with our project and calling Dolby-specific methods from our app. We used the Game audio profile inside the API, which creates a ‘live’ space to best bring out the effect of fast-moving objects in the audio. The API also offers Music, Movie and Voice profile options. We had Dolby capabilities in the game up and running in less than 15 minutes. The API package comes with a Javadocs and a quick-start guide along with a sample application showing how Dolby APIs should be invoked.
Today, we have a fun casual game that not only has great-looking graphics, but also a rich soundtrack that pulls users in and holds their attention. We are confident these enhancements have increased the overall experience for our customers on the Kindle Fire HD.”
I’m thrilled that Luxurious Animals has been able to improve the customer experience for relatively little effort; it speaks well to the smart API design by the Dolby development team.
To learn more about the Dolby Digital Plus SDK, please read the previous blog post on the topic here, or get the SDK directly from Dolby here.
Amazon allows you to distribute your web apps and mobile-optimized HTML5 websites to millions of Amazon Appstore customers in nearly 200 countries across the globe. With Amazon’s In-App Purchasing API for JavaScript you can increase revenue by enabling compelling monetization strategies. This includes a "freemium" model for your app where the app itself is free but you charge a premium for advanced services or functionality. Your web app can offer customers in app currency, subscriptions and entitlements all through the secure Amazon checkout process.
The first step in implementing In-App Purchasing in your web apps is to download the Amazon Mobile App SDK, then you will submit a new web app to the portal and then finally add a reference to the Amazon Web API libraries in your html.
The latest versions of the Amazon Web API libraries are hosted by Amazon for you. The current urls can always be found in the LATEST_URLS.txt file located in the Amazon Mobile App SDK folder.
<!DOCTYPE html>
<html>
<head>
<title>Button Tester</title>
<!-- Use of this sample code involves calling jQuery from Google
Hosted Libraries and is subject to the terms located here:
https://developers.google.com/speed/libraries/terms
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://amazon-web-app-resources.s3.amazonaws.com/v0/latest/Amazon-Web-App-API.min.js" type="text/javascript"></script>
<script src="https://amazon-web-app-resources.s3.amazonaws.com/v0/latest/Amazon-Web-App-API-tester.min.js" type="text/javascript"></script>
<script src="js/buttonclicker.js" type="text/javascript"></script>
<link rel="stylesheet" href="buttons.css"/>
</head>
Once you have referenced these JavaScript files you will have everything you need to access the Amazon In-App Purchasing API from your web app.
Before you can make any In-App Purchase calls you need to have a catalog of SKUs set for your web app to use. You can add SKUs to your web app’s catalog by opening the Developer Console, selecting Apps & Services, choosing the web app submission you want to add SKUs to and then clicking on the In-App Items link, which will take you to the list of SKUs currently offered in your web app.
There are three types of SKUs you can offer to your customers.
· Consumables – This type of purchase is available only on the device it was purchased on. Some consumable examples include in-game currency or an extra power up in a game.
· Entitlements – This is content that requires access rights such as unlocking additional game levels or offering specific magazine issues. Entitlements do not expire, are tied to a customer’s Amazon account and are available on any device they access the content from.
· Subscriptions – These are entitlements that are bound by a period of time which auto-renews at the end of the period and is tied to the customer’s Amazon account. Subscriptions are available on any device a customer accesses the content from. You are allowed to have multiple subscriptions for purchase within your app.
Simply click on the type of SKU you would like to add and you will be taken to a new screen where you can provide information about the SKU. For example, if I wanted to offer an Entitlement purchase for my World of Warcraft Realm Status app to track a single realm I would click Add an Entitlement and then enter a Title and SKU.
Next you will need to enter pricing information for your new SKU. In this case, I want to sell a Track Single Realm for $1.00. Amazon gives you the option of setting your own list price for each marketplace or it can match the prices based on your entered base price.
You can also enter a detailed description, along with keywords for the Entitlement. Descriptions can be provided in multiple languages and if no translations are given the default English description will be used.
You also need to provide images of the item for users along with the image you want displayed upon a successful purchase.
Once you have completed this, click Save, and then Submit In-App Item. You will be taken back to our In-App Items screen with the new SKU now listed. In the upper right corner will be a button to download a JSON Data file.
This JSON file will include a list of our SKUs that will be used by the SDK Tester Tool when we want to simulate a purchase in our development environment.
The SDK Tester Tool is included in the Amazon AVD Launcher emulators or it can be installed on a device via the APK included in the Amazon Mobile App SDK under the /Android/InAppPurchasing/tools.
The Button Clicker example includes a similar JSON file that covers all of the purchasable item types.
The JavaScript In-App Purchasing API is designed to encapsulate the complexity behind the purchase process while providing a fully featured API. While building your app, it is important to understand which parts of the purchase flow the app must implement, and which parts are handled by the Amazon Services library.
Note: In order to protect customers, we also require that you serve the page of your app that uses In-App Purchasing over SSL/HTTPS. For more information, please refer to the Making Your Web App Safe documentation
Below is a simplified chart explaining responsibilities during the purchase flow.
In-App Purchasing API for JavaScript is comprised of three elements:
The process workflow between your JavaScript calls and the Amazon Services JavaScript library looks something like this:
You can deliver static content stored locally or dynamic content that is updated over time for customers. For more details about the Purchase Process workflow and the types of deliverable content you refer to the Understanding In-App Purchasing for JavaScript API documentation here.
Now that you understand the process flow, have referenced the proper JavaScript libraries and have created a list of SKUs (or local JSON file) it’s time to call out to the Amazon Services in your own JavaScript.
Every call you initiate via the Amazon Services JavaScript Libraries results in a response received by the corresponding response handler specified in registerObserver(). Each of these responses makes use of a response object and includes the following:
There are also purchase handlers, similar to the In-App Purchasing API for Android that have already been implemented for you inside the Amazon Services JavaScript files. They include the following:
Implementation of the Amazon Services JavaScript library is as follows:
For example, the Button-Clicker example starts off by calling an initialize() function which will set up an IAP observer using amzn_w.IAP.registerObserver() and then checks the response object to see if the web app is in debug mode. If it is an alert box is generated telling the user the app is in development mode. If not it will check for updated Purchases.
Finally, the function sets up handlers for Purchase Response and Purchase Updates Response objects.
// Setup function initialize() { loadPageState(); amzn_wa.enableApiTester(amzn_wa_tester); refreshPageState(); // Setup button press handlers $("#theButton").click(function() { buttonPressed(); }); $("#redButton").click(function() { redButtonPressed(); }); $("#greenButton").click(function() { greenButtonPressed(); }); $("#blueButton").click(function() { blueButtonPressed(); }); // Ensure we can call the IAP API if (amzn_wa.IAP == null) { console.log("Amazon In-App-Purchasing only works with Apps from the Appstore"); } else { // Registers the appropriate callback functions amzn_wa.IAP.registerObserver({ // Called the the IAP API is available 'onSdkAvailable': function(resp) { if (resp.isSandboxMode) { // In a production application this should trigger either // shutting down IAP functionality or redirecting to some // page explaining that you should purchase this application // from the Amazon Appstore. // // Not checking can leave your application in a state that // is vulnerable to attacks. See the supplied documention // for additional information. alert("Running in test mode"); } // You should call getPurchaseUpdates to get any purchases // that could have been made in a previous run. amzn_wa.IAP.getPurchaseUpdates(state.lastPurchaseCheckTime != null ? state.lastPurchaseCheckTime : amzn_wa.IAP.Offset.BEGINNING); }, // Called as response to getUserId 'onGetUserIdResponse': function(resp) {}, // Called as response to getItemData 'onItemDataResponse': function(data) {}, // Called as response to puchaseItem 'onPurchaseResponse': function(data) { onPurchaseResponse(data); }, // Called as response to getPurchaseUpdates 'onPurchaseUpdatesResponse': function(resp) { onPurchaseUpdatesResponse(resp); } }); } } $(function() { initialize(); });
Once initialization is done you can make purchase calls by passing in your SKU title. The example code here is making a call to purchase the more “sample.clicks” SKU.
function buyClicks() { if (amzn_wa.IAP == null) { alert("You are out of clicks, however Amazon In-App-Purchasing works only with Apps from the Appstore."); } else if (confirm("Buy more clicks?")) { amzn_wa.IAP.purchaseItem("sample.clicks"); }
The purchaseItem function will return a response object you need to handle and check for success or failure.
// purchaseItem will cause a purchase response with one receipt function onPurchaseResponse(e) { if (e.purchaseRequestStatus == amzn_wa.IAP.PurchaseStatus.SUCCESSFUL) { handleReceipt(e.receipt); } else if (e.purchaseRequestStatus == amzn_wa.IAP.PurchaseStatus.ALREADY_ENTITLED) { // Somehow we are out of sync with the server, let's refresh from the // beginning of time. amzn_wa.IAP.getPurchaseUpdates(amzn_wa.IAP.Offset.BEGINNING) } refreshPageState(); }
If it gets back a status of PurchaseStatus.SUCCESSFUL it will handle the receipt returned in the response object like so:
// purchaseItem will cause a purchase response with one receipt function onPurchaseResponse(e) { if (e.purchaseRequestStatus == amzn_wa.IAP.PurchaseStatus.SUCCESSFUL) { handleReceipt(e.receipt); } else if (e.purchaseRequestStatus == amzn_wa.IAP.PurchaseStatus.ALREADY_ENTITLED) { // Somehow we are out of sync with the server, let's refresh from the // beginning of time. amzn_wa.IAP.getPurchaseUpdates(amzn_wa.IAP.Offset.BEGINNING) } refreshPageState(); }
In this Button-Clicker example we are setting a Boolean value to true based on a successful purchase. In a real web app you would want to save the purchase receipt to local storage or back to your own cloud storage so you can verify purchase receipts in the future.
If you are running in the development Sandbox Mode we mentioned above calls to the Amazon Services will go through the local SDK Tester App instead of to the Amazon Cloud.
This allows you to simulate purchasing SKUs in your web app without having to spend any actual currency. You have the option to test a purchase inside the browser itself using the included Amazon Service JavaScript Libraries.
In this scenario you need to ensure your JSON file holding the SKUs is located in the same folder as you web app. If you want to test the In-App Purchase on a device you can do so using the SDK Tester tool and a JSON file that has been copied to the SD Storage.
For a complete video walkthrough of the purchase process and SDK Tester tool you can watch the following screencast on our Youtube Channel.
By utilizing the Amazon In-App Purchasing API for JavaScript you are able to quickly implement and test purchases through your existing web app. Customers can take advantage of in app items, subscriptions and entitlements you might offer all through the secure Amazon checkout process.
Be sure to check out our HTML5 Web App materials on the developer portal to get started today!
-Dave (TheDaveDev)
![]() |
This post discusses how Android apps can use Amazon Web Services (AWS) to send e-mail without additional infrastructure. The sample code presented here uses Amazon Simple Email Service to record feedback from users but this same method could be used in the following scenarios:
Amazon Simple Email Service (Amazon SES) is a highly scalable and cost-effective bulk and transactional email-sending service for businesses and developers. Amazon SES eliminates the complexity and expense of building an in-house e-mail solution or licensing, installing, and operating a third-party e-mail service.
This post shows a sample for the Android platform. The complete sample code and project files are included in the AWS SDK for Android. A link to the SDK is available at the end of this post.
To use the AWS SDK for Android, you will need AWS credentials, that is, an Access Key ID and Secret Access Key. If you haven't already signed up for Amazon Web Services, you will need to do that first to get your credentials. You can sign up for AWS here. After you sign up, you can retrieve your credentials at this page.
The sample application described here demonstrates how Android apps can record feedback from their users through Amazon SES. It requires that you already have a verified e-mail address; this address will be used as both the sender and recipient of the message, so it is not necessary to get production access to Amazon SES before using this sample application. You can verify an e-mail address on the AWS console and read more about verification and production access in the Amazon SES Getting Started Guide. Amazon SES can also be used to create other types of e-mails not shown here.
Making requests to Amazon SES requires creating a client for the service. The code below shows how to create a client on both the iOS and Android platforms.
AWSCredentials credentials = new BasicAWSCredentials( PropertyLoader.getInstance().getAccessKey(), PropertyLoader.getInstance().getSecretKey() );AmazonSimpleEmailServiceClient sesClient = new AmazonSimpleEmailServiceClient( credentials ); |
SES will accept both regular and raw e-mails. Our application makes use of the regular method, meaning we do not have to construct our own headers. Regular e-mails require a source, destination (list of to, cc, and bcc addresses) and a message, which itself comprises a body and subject. The code below shows how to create the various parts of the email on both the iOS and Android platforms.
String subjectText = "Feedback from " + nameField.getText();Content subjectContent = new Content(subjectText); String bodyText = "Rating: " + ratingBar.getRating() + "\nComments\n" + commentsField.getText();Body messageBody = new Body(new Content(bodyText)); Message feedbackMessage = new Message(subjectContent,messageBody); String email = PropertyLoader.getInstance().getVerifiedEmail();Destination destination = new Destination().withToAddresses(email); |
Once we've constructed our e-mail components, it simply becomes a matter of creating a SendEmailRequest
and passing this to the SES client we created earlier. The code below shows how to create a SendEmailRequest
and send it with Amazon SES on both the iOS and Android platforms.
SendEmailRequest request = new SendEmailRequest(email,destination,feedbackMessage);SendEmailResult result = clientManager.ses().sendEmail(request); |
A sample application that includes this code is provided in the AWS SDK for Android. The download link can be found on the following pages:
For more information about using AWS credentials with mobile applications see the following article:
Please feel free to ask questions or provide comments in the Mobile Development Forum.