Your First Kotlin Android App: Polishing the App

The bullseye game is going to be a full screen app that will be played in landscape mode.

So far, you’ve been working with the live preview in portrait mode but its time to start building the layout with the final look in mind. You will set the device orientation for the MainActivity inside the AndroidManifest.xml file. Now you might ask: What is an AndroidManifest?

Well, every android application must have an AndroidManifest.xml file.

This file contains all the essential information for the configuration of the app. It contains references to the activities and other components of the app.

It also contains information used by the Android operating system for example, if an Activity’s orientation should be in portrait or landscape mode. It also contains information like the app icon.

It provides information that can be used by Play Store.

For instance if you want your app to access the device location or have access to the network, you specify it in this file as permissions.

Then playstore reads this file and displays these permissions on an app’s detail page. The AndroidManifest.xml file supplied that configuration information.

So it’s simply a file that contains the details of all the components and configuration for an android app.

Let’s dive straight into using it and you’ll visit this file as you progress in this course.

Inside Android Studio, open up the starter project for this episode by clicking on the Open button in the welcome window. Then you browse to the folder and open it up.

If you’ve been following along, you could just open up your project by selecting it from the list of projects. I’ll do that now.

The AndroidManifest.xml file is located inside the manifest folder in the app directory. Go ahead and open it up. It might look intimidating at first but if you look closely, its plain and simple.

First, we have the manifest element which is the root node of the manifest file. Every branch or element in an XML file is called a node and this is because XML follows a node-tree document structure.

Next is the application node which is a child of the manifest because it is contained inside it. In here, you have app related information like the app icon to display and the label which would be shown wherever the app name needs to be displayed like on the home screen.

The application node also has a theme which contains the styling for the application.

Inside the application node, we have the activity node with the name tag. We only have one activity which is the main activity. Whenever we create a new activity, Android Studio will automatically add the new activity node. But since we’re working with Jetpack Compose for this project, we’ll be need only one Activity which is composed of different composables functions that’ll serve as screens for the App.

Inside the activity node we have an intent-filter as its child. For now, just see an Intent as an object that carries a message to perform an action.

In this case this intent-filter states that the MainActivity is the main entry point for the application and that it should be listed in the launch screen thanks to the launcher category. If you remove the launcher category then the app would not be visible in the launcher. It would act like a hidden app. You can go ahead and comment out that launcher line and try running your app to see what happens.

Okay, enough talk. Let’s set the orientation of the main activity to landscape. Add in the following code in the activity node:

android:screenOrientation="landscape"

Run your app. And you can see, the app is set to landscape mode even when the device is in portrait mode. Go ahead and rotate the device to landscape mode.

Next, lets hide the status bar also known as the notification bar. Head over to the themes.xml file. I’ll open up the project panel then head over to res > values > themes.xml.

The themes.xml file contains Android based styling configurations for our app. We have another kotlin theme file in our project but that will be used to style our Composables. This theme file is focused on Android related styling like what we want to do now.

Currently, we have a style node that has the name of the theme for our app, in this case Bullseye. It also has a parent theme. It is important for your app’s theme to have a parent theme as the parent has the basic styling and configurations that your theme depends on. It is set to android:Theme.Material.Light.NoActionBar. This means it is a material based light theme which is the design standard for Android apps. It also says that it should not have an action bar which is the top app bar that is in most Android apps.

Alright update the parent theme to become full screen by adding the following code:

<style name="Theme.Bullseye" parent="android:Theme.Material.Light.NoActionBar.Fullscreen" />

Run your app once again.

The status bar is gone and Bullseye is now a full screen app.

Finally, we need to start designing our app with a landscape-first approach inside the live preview. Open up the GameScreen.kt file. Scroll down to the preview composable.

Then update the @Preview annotation to the following:

@Preview(showBackground = true, device = Devices.AUTOMOTIVE_1024p, widthDp = 864, heightDp = 432)

We set the device to automotive to force the preview to be in landscape mode. Then we set the width and height to match a landscape dimension. I simply just used the landscape width and height of the emulator I’m testing out the app on.

You can see the updated landscape preview.

Now we got this setup, let’s add the remaining UI components to our app.