Your First Kotlin Android App: Polishing the App
Leave a rating/review
Notes: 02. Set App Orientation
In Android Studio versions after Bumblebee, the “Create Landscape Variation” option has been renamed and moved out of the “Orientation for Preview” menu. It is now in the “Switch and Create Qualifiers for Layout Files” menu which shows the current layout file name and it is located in the layout editor toolbar as the first item.
To create a Landscape variation, click on it, then select “Create Landscape Qualifier.”
The bullseye game is going to be a fullscreen app that will be played in landscape mode.
So far, you’ve been working with the layout designer 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 main activity 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 a reference 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 can also contain information like the app icon.
It also provides information that can be used by playstore.
For instance if you want your app to access the device location or maybe have access to the network, you specify it in this file as permissions.
Then playstore reads this file and displays these permissions whenever you want to install an app.
I know you must have seen this screen when you’re about to install an app, right?
The AndroidManifest.xml supplied that configuraiton information.
So it’s simply a file that contains the details of all the components and configuration for an android app.
So let’s dive straight into using it and you’ll be visiting this file often 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 node which defines the unique package name for the application. This is the reverse domain name you set when you were creating the project.
Next is the application node which is a child of the manifest. In here, you have app related information like the app icon to display and the label which would be shown whereever the app name needs to be displayed like in home screen.
The application node also has something called 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.
Inside the activity node we have an intent-filter as its child. We’ll talk about Intents later on in this course but 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 main activity 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 laucher 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 main activity is set to landscape mode. I’ll change the orientation to portrait. And it still maintains the landscape orientation.
Next, lets hide the app bar.
Head over to the MainActivity.
Then add the following code before the call to the parent’s class onCreate method.
supportActionBar?.hide()
Run your app once again. As you can see, the app bar is now hidden. Do note that this is just a temporary fix to hide the app bar.
Later on in the course, I’ll show you a more robust way of removing both the app bar and the status bar. As you can see the status bar is still visibile but at least we can conitnue building our UI without any major obstruction.
Finally, we need to start designing our app with a landscape-first approach inside the layout editor. Open up the main activity’s layout file.
Click on the “Orientation for Preview” button in layout editor’s toolbar. This brings out a menu of different display settings for the Design editor. Go ahead and select “Create Landscape Variation.” This creates a new layout file for the landscape design for your app.
And if you look at the navigation bar, you can see that the layout filename is prefixed with “land” which signifies landscape. From now on, you’ll be working with this file as your main layout file.
A new folder structure was also created.
To see it, open up the project window by the side if you dont have it open already.
Then head over the layout folder.
You can see that a new folder called activity_main is created and it contains the two layout files for both
portrait and landscape mode.
The idea of having different layout files is not just limited to device orientation. You can have different layout files for tablets and even different screen sizes. This helps you as a designer not to be limited in your design approach. Let’s face it, your apps wont run on just one screen size. Having different layout files makes you deliver your apps in a way that looks good and adapts well on different screens.
Now we got this setup, let’s add up the other views to our app.