By building an app for Fire tablets, you can connect with customers around the world, and grow your revenue . This article explains how you can build your first app for that can run seamlessly across the entire Fire tablet family of devices. The tutorial below draws on a ‘Hello World’ sample that I recently published on GitHub. I have picked out code snippets from the sample to save you time if you don’t want to read through the entire code base!

Because Fire Tablets are so popular, Amazon has made them available in a wide variety of form factors. This makes device orientation an important factor for Fire tablet app developers to fully utilize the available screen space. For this tutorial, we will use Google Jetpack Compose to design and implement layouts that adjust themselves to render content differently across a variety of sizes.

The example below features a single code base that can be used on Android and the Amazon Appstore. A bonus: the example also features one of my two awesome pugs Katsu (wearing a red harness in the picture below!)

Prerequisite

To get the most out of this tutorial, check to see if you have a Fire TV tablet, and two photos of your pet. If you don’t have a tablet, you can use the Android tablet emulator. 🐱🐶 Needless to say, if you don’t have a pet, any photo will do.

Without further ado, let’s get started with the three simple pointers needed to build your Amazon Appstore app.

Check for Google Play Service

In MainActivity.kt file, there is a check if the app is using Google Play Service. This is one of the two checks to verify whether the app supports Google Play Service and/or Amazon Appstore.

By using GoogleApiAvailability class, we create a new private function called isGooglePlayServicesAvailable to verify if Google Play Services are available.

private fun isGooglePlayServicesAvailable(): Boolean {
    val googleApiAvailability: GoogleApiAvailability = GoogleApiAvailability.getInstance()
    val status: Int = googleApiAvailability.isGooglePlayServicesAvailable(this @MainActivity)
    return status == ConnectionResult.SUCCESS
}

Check for Amazon Appstore

We also implemented a check to verify if the app is installed from Amazon Appstore.
If the installer package name is equal to com.amazon.veneziathen it is indeed installed from Amazon Appstore! Just like we did with Google Play Service, let’s create a private function called isInstalledFrom AmazonAppstore.

private fun isInstalledFromAmazonAppstore(): Boolean {
    val installerPackageName = getInstallerPackageName()
    return installerPackageName == getString(R.string.amazon_appstore_identifier)
}

Display your pet photos

Now for the fun part! You might be wondering where what the purpose of your optional pet photos were. Now is the time 🐶
To sprinkle some fuzziness into this app, we will be using two different photos.

Use one of your photo to display if the Google Play Service is available
Use provided Appstore logo to display if the app is installed from Amazon Appstore
Use your second photo to display if it doesn’t fall into either of the above cases

Drop your photos into app/src/main/res/drawable folder. Refer to this doc for supported file types. Add the code snippet below back in the MainActivity.kt file.

@Composable
fun IdentifierImage(
    isGooglePlayServicesAvailable: Boolean,
    installedFromAmazonAppstore: Boolean,
    modifier: Modifier
) {


    if (isGooglePlayServicesAvailable) {
        Image(
            painter = painterResource(id = R.drawable.younger_katsu_in_chair),
            contentDescription = stringResource(id = R.string.android_content_description),
            modifier = modifier
        )
    } else {
        if (installedFromAmazonAppstore) {
            Image(
                painter = painterResource(id = R.drawable.appstore_logo),
                contentDescription = stringResource(id = R.string.fos_content_description),
                modifier = modifier
            )
        } else {
            Image(
                painter = painterResource(id = R.drawable.older_katsu_in_chair),
                contentDescription = stringResource(id = R.string.other_content_description),
                modifier = modifier
            )
        }
    }
}

Determine device orientation

The fun doesn’t end there. Remember how I mentioned about the importance of tablet orientation earlier? This section talks through also code snippet to add a text that will have a different string depending on the window width (landscape vs portrait.)

In order to determine the device orientation, we will be utilizing calculateWindowSizeClass, if it returns WindowWidthSizeClass of Expanded, we know that the device is in landscape mode and can adjust the position of the image and text accordingly.

val isExpandedScreen =
    calculateWindowSizeClass(this).widthSizeClass == WindowWidthSizeClass.Expanded

With isExpandedScreen , we can place the text accordingly!
If WindowWidthSizeClass is not expanded, meaning it would represent majority of tablets in portrait , we will place the image at the top and text at the bottom. If it’s expanded, we will place the image on the left with text on the right!

HelloWorldFireTabletTheme {
    Surface(
        modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background
    ) {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            IdentifierImage(
                isGooglePlayServicesAvailable(),
                isInstalledFromAmazonAppstore(),
                Modifier.align(
                    if (isExpandedScreen) {
                        Alignment.CenterStart
                    } else {
                        Alignment.TopStart
                    })
            )
            Text(
                style = MaterialTheme.typography.headlineLarge,
                text = textToShow,
                modifier = Modifier
                .align(
                    if (isExpandedScreen) {
                        Alignment.CenterEnd
                    } else {
                        Alignment.BottomCenter
                    }
                )
                .padding(30. dp)
            )
        }
    }

Test it out!

Build and run your app either on emulator or on your own Fire tablet. Make sure to have your device setting so that it auto-rotates! Below is an example of toggling on the Auto-rotate from the drop down menu.

Now try rotating the tablet to see the sample in action!

Conclusion

Today, we went over how to check whether Google Play Service is available and/or if the app was installed from the Amazon Appstore. We also displayed photos to indicate the status for the above in the app. In addition, we also added text to determine the device orientation for the tablet.

Stay tuned for the second tutorial for building a Fire TV app with my second pug, TOMO! 😈 In the interim, you can check out these tutorials for building next-level Fire TV tablets, and growing your business on the Amazon Appstore.

Stay connected

Stay up to date with Amazon Appstore developer updates on the following platforms:

📣 Follow @AmazonAppDev on Twitter
📺 Subscribe to our Youtube channel
📧 Sign up for the Developer Newsletter

Build your first app for the Amazon Appstore with three simple (and very cute) pointers