Optimize Your Android App User Interface for Amazon Fire, Fire HD 8 and Fire HD 10 Tablets
The new line of Fire tablets set an entirely new standard for low-cost tablets, with the Fire 7’’ Tablet being sold at less than $50. Amazon has already sold millions of tablets, so it’s a great time for you to submit your apps and games to the Amazon Appstore.
In order to provide a great experience to users, the first thing you have to think about is the user interface (UI) of your app. Designing the UI and UX (user experience) of an app could become a very challenging and time-consuming task, but there are some simple steps that you can follow to make your app look great on the new Fire tablets. Also, keep in mind that Fire OS 5, available on all the new Fire tablets, is based on Android 5.1, so all the standard approaches to develop Android apps UI also apply to Fire OS apps!
In this post, we’ll deep dive into understanding screen resolution and density of Fire tablets, disclose the best strategies to properly create and size the layouts and graphical resources of your app, teach you how to provide a correctly-size app icon for Fire OS 5, and how to explicitly declare support for Fire tablets in your Android app manifest.
Understanding Screen Resolution and Density on Fire Tablets
The general best practice for Android apps is to provide a flexible layout which is able to adapt to different resolutions. You can do this in different ways.
For example, you can use RelativeLayout when creating the hierarchy of containers in your XML layout, since using RelativeLayout elements can be placed and sized relative to other elements. Also remember to use wrap_content and match_parent XML attributes when defining the height and width of your elements, where possible, since this will allow more flexibility when creating the layouts for different screen sizes.
It’s entirely up to you to decide how to structure the layout of your app, just keep in mind that the more flexible you create your layout, the better it will support different screen formats. You can find more information about how to properly define a flexible layout here: Use Flexible Layout
Screen Density is Key
An important metric to consider when defining your flexible app layout and graphical assets is screen density. Density represents how many pixels are condensed in a certain amount of space on a device display. It’s important to correctly understand and use density-specific metrics, since directly indicating pixels could result in very differently-sized elements on different screens, caused by the different amount of pixels condensed in the same physical area.
When you are defining the size of the elements of your layout, remember to use density-independent pixels (dp) rather than absolute pixels. If you use density-independent pixels you will secure a layout component that will approximately have the same physical size across different devices, no matter the screen density and the size of the display. This is because at runtime, the system automatically scales the dp units based on the actual pixel density of the display. The baseline density is 160 DPI (defined “medium density”) and the scaling for dp is calculated accordingly.
It’s quite simple to calculate the amount of pixels (px), density-independent pixels (dp) or Dots Per Inch (DPI) available on a display, using the formula:
px = dp * (DPI / 160)
Android provides some generalized density qualifiers, which are really helpful to group similar devices together. This qualifiers depend on the density of the screen, and help you create graphical assets which can be re-used across multiple devices.
There are two densities categories you should address when targeting Fire tablets:
- medium (mdpi) for Fire and Fire HD10.
- tv (tvdpi) for Fire HD8. However, tvdpi is to be treated as a secondary density category, so developers addressing Fire HD 8 should create graphical assets for the higher hdpi category, the graphical assets will be automatically scaled accordingly.
The explanation for this is Fire HD 8 having the same resolution of the HD 10 (1280x800 px) but the display on HD 8 is actually smaller (8’’) and so it has a higher pixel density (189 DPI on Fire HD 8 against 149 DPI on Fire HD 10).
As a reference, here’s the actual physical DPI metric for the three new tablets:
- Fire: 171 DPI
- Fire HD 8: 189 DPI
- Fire HD 10: 149 DPI
Screen density is fundamental when designing layouts for different screen sizes. It’s always good practice to verify the density of the devices you want to specifically target with your layouts in order to understand what qualifier you need to use for your resources.
General Screen Size Qualifiers for Fire Tablets
Another strategy to define layout or assets is to use the general size qualifiers defined by the Android platform. They are based on the physical screen size (small, normal, large, xlarge).
Since this metric is defined with 4’’/5’’ phones as a base point for normal, tablets usually fall under large or xlarge qualifiers. That’s the case for Fire tablets.
Here’s the general size qualifiers for Fire Tablets:
- large for Fire and Fire HD 8
- xlarge for Fire HD 10
Using general screen size qualifiers as a metric is a good approach when conceiving flexible layouts, because it allows you to target ranges of similar devices. However, this approach does have one downside; its categories are quite broad. For example, “large” goes from 4’’ to 8’’, and you would probably want to provide radically different layouts for a 4’’ phone and an 8’’ tablet. A good way to define layouts is to use screen smallest width qualifier ad described in the next section.
Using Screen Smallest Width to Define Layouts
One of the most effective strategies when defining layouts is to use the screen smallest width qualifier. The smallest width qualifier, added in Android 3.2 (Honeycomb), defines the width of the smallest side of a tablet in dp units. This strategy combines the two previous approaches — density and screen size qualifiers — so it’s a good way to specifically target layouts from a screen-and-density-wise perspective. Using smallest width is generally preferable to just using general screen size qualifiers as it enables you to more specifically target a given screen type.
This qualifier takes the form swXXXdp where XXX is the given width in density-independent pixels.
Let’s use an example, to demonstrate how it works: if we want to target Fire HD 10 using Smallest Width qualifier, we need to calculate the size of the smallest width in dp. Let’s apply the formula:
px = dp * (DPI / 160)
It becomes, applying Fire HD 10 parameters:
800 (px of smallest side) = dp * (149 (DPI of smallest side) /160)
This results in dp= 800/0.9 = 860 dp (approximated) on smallest width, so Fire HD 10 falls under sw800dp smallest width qualifier.
The smallest width qualifiers for Fire Tablets are as follows:
- sw600dp for Fire and Fire HD 8
- sw800dp for Fire HD 10
Using screen smallest width qualifiers reduces the time defining multiple screen layouts and allows the creation of flexible layouts that target really specific screen formats. If you are interested in more information about the different qualifiers, take a look at Provide Multiple Layouts for Different Screens
Build Your Layouts for Fire Tablets in Multiple Ways
As we’ve seen, there are multiple ways of targeting different screen sizes, and different approaches possible even with the three Fire Tablets. You can combine the usage of density/screen size qualifiers and screen smallest width qualifier.
To help you define your strategy for layout and assets, here’s a simple scheme that explains which metric applies to each tablet, and which are shared across more than one:
Here is also the complete table of the metrics about the Fire tablets we discussed in this article:
For example, you could decide to use the density category for the graphical assets and smallest width qualifier for the layouts for your Fire tablets-targeted app, which would convert in having the following in your resources folder:
res/drawable-hdpi (Fire HD 8)
res/drawable-mdpi (Fire and Fire HD 10)
res/layout-sw600dp (Fire and Fire HD 8)
res/layout-sw800dp (Fire HD 10)
If you want more information about how to create a layout for the new tablets and for the previous generation of devices, take a look here: Screen Layout and Resolution on Fire Tablets
App Icons for Fire Tablets
Even though the new tablets have mdpi (Fire and Fire HD 10) and tvdpi (Fire HD 8) densities, the icon assets that are fetched for apps on these devices respond to different resolutions. This is because in Fire OS 5 the icons in the “Recent” tab of Fire OS Launcher are bigger than the launcher icons displayed in the “Home” tab, so it needs to be higher quality than the launcher icons.
Here’s a table of the density of fetched launcher icons:
For more information about icons, take a look at Launcher Icon Guidelines
If you’re interested in how to create great app icons for your Fire OS apps, take a look at the advices given by a great UX Designer here Tools to Help You Make Great App Icons
Declare Support for Fire Tablets in Your Manifest
After you have defined a flexible layout and provided alternative layouts and graphics resources to accommodate different screen sizes, you should also declare the supported screen sizes in your Android manifest with the <supports-screens> element for your app to be recognized as officially supporting Fire Tablets.
For example, adding the following snippet to your Manifest, you will target only “large” and “xlarge” screens, and those with a minimum width of 600dp, in other words, you will specifically targeting only the Fire tablets.
<supports-screensandroid:smallScreens=”false”android:normalScreens=”false”android:largeScreens=”true”android:xlargeScreens=”true”android:requiresSmallestWidthDp=”600"/>
If you want to target a broader scope of devices, including non-Amazon devices, you can add something like this:
<supports-screensandroid:smallScreens=”true”android:normalScreens=”true”android:largeScreens=”true”android:xlargeScreens=”true”/>
This will still ensure your app will target Fire Tablets, but at the same time will support other device formats.
Submit Your App to Amazon Appstore and Start Targeting Millions of Fire Tablets and Android Devices
Once your app is fully tuned for Fire tablets, it’s time for publishing it and start engaging with millions of users!
If you haven’t already, register for a free Amazon Developer Account and submit your app!
Here you can find more information about designing apps for Fire Tablets and publishing apps on Amazon Appstore:
Developing for Fire Tablets
Setting Up your Development Environment for Fire Tablets
Creating your First Fire Tablet App
Submitting your Apps on Amazon Appstore
Mario Viviani - Technology Evangelist at Amazon Appstore
(Follow me on Twitter! @mariuxtheone)
Originally published at developer.amazon.com
