Appstore Blogs

Appstore Blogs

Want the latest?

appstore topics

Recent Posts

Archive

Showing posts tagged with Tutorials

July 03, 2014

Paul Cutsinger

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.

A description...

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.

 

 

Grabbing Your Customer’s Attention

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.

A description...A description...A description...

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.

Macintosh HD:Users:cutsinge:Downloads:duke pics:notification.png

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.

What Developers are Already Building

Zillow

A description...

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

A description...

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

A description...

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.

Creating and Managing a Carousel Widget

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. 

Adding a Numeric Badge

// 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);

Reacting to User Taps

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)

Using the API Simulator Tool

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.

Now Is the Time to Submit Your Apps for Fire

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:

  • Amazon Developer Select: Optimize your apps for Fire phone and get enhanced merchandising and 500,000 Amazon Coins incentives for your customers. Get the details 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. Get the details here.
  • Amazon App Testing Service: Most Android apps just work on Fire mobile devices. Test your app's compatibility in 90 seconds by dragging and dropping your Android APK into our testing tool. Sign up for a free developer account to test your app's look and feel on devices and get the results within 6 hours.  Test your app now.

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:

Get a free Amazon Appstore developer account

Fire Getting Started Guide

SDK downloads

@PaulCutsinger

 

Want the latest?

appstore topics

Recent Posts

Archive