1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Layouts and Animation for Android Apps

Landscape Layout

Start course
Overview
Difficulty
Intermediate
Duration
4h 7m
Students
1
Description

In this course, you'll start experimenting with XML code and diving deeper into layouts, namely linear and constraint layouts. We'll also look at animations and build a few fun features with them. Then, we'll take a deeper dive into the Kotlin programming language and constraint layouts, before building a fully functioning Tic-Tac-Toe game.

On top of that, we'll then build a second app which can play YouTube videos within it, and you'll learn how to work with APIs and API keys.

Intended Audience

This course is intended for beginners to Android app development or anyone who wants to master coding in Kotlin.

Prerequisites

Since this is a beginner-level course, there are no requirements, but any previous experience with coding would be beneficial.

Transcript

Hello and welcome back. In this video, I'll quickly show you how you can set up an alternate view for Landscape mode. And this is when the user will flip their phone. Right now, we have both portrait and landscape mode being served by the same activity main layout file which we have over here. And if you look at projects, it's under resources and then layout and there is our activity_main.xml and it's doing the job pretty well. If you look at our emulator and the video itself, if I play it it works, and if I flip it, switches to landscape mode, working pretty well. So, if you wanted the landscape mode right here to be served using a different layout, then you would have to create a different layout file. And right now as mentioned earlier, this layout file is doing the job pretty well. The width is wrap_content, so we have nice display of the video. What if you wanted the video to stretch all the way in landscape mode, right?

The entire screen? Then you'd want this to be different, but let's say you didn't want to make that change in your portrait mode. So, that is one of the reasons why you may want to have a different layout file serving landscape mode. So, let's find out how we can do that. We're going to go to 'Projects,' and we're going to create a different layout folder for landscape, okay? So, right here in resources, we're going to right click and then 'New', we're going to select 'Android Resource Directory', all right, because the layout file is a resource file. So, 'Android Resource Directory' and right here where it says, resource type, we're going to select 'layout' and directory name over here, we're going to say layout-land for landscape mode. And then, if you look at the available qualifiers, you have many to choose from. 

We're going to select 'Orientation'. We're going to add it to the chosen qualifiers. And for the orientation, we're going to select 'Landscape', click 'Okay,' alright? Our directory is created and you may not be able to see this over here, because it doesn't show this latest Android Studio. It's not going to show the layout-land folder here because it's part of layout. So, what you can do is over here 'Android.' If you select 'Project' over here. And right here, there is the 'VideoDemo' scroll down to 'App' and then 'Src' and you see 'Main' right there. And over here, there's my 'Res' folder. If I click it, you see there's my 'layout' folder which was there before and to the new one, 'layout-land' right there. So, in my layout folder, I have my activity_main.xml, what I'm going do is Command-C to copy this, and then in my layout-land folder, I'm going to do Command-V to paste it in, I'll use the same file to start. So, new name, activity_main.xml, 'Refactor', there you go. 

Now, my layout-land folder has an activity_main.xml as well. And you see by default, it's showing up in landscape mode, all right? Now if you wanted to go back to your previous view, you can go to 'Android' and you see, under 'layout', you have two files now, right? One is activity_main.xml and one is activity_main.xml(land) indicating that you have a landscape folder and within there, you have this activity_main.xml, all right. So, let's edit this. So, I'm going to click on 'Projects' to get rid of that. Here is my landscape mode and you can see over here, this is my layout/activity_main.xml, but this is my landscape mode and it has that land/activity_main.xml over there. So, you kind of know what you're working with. 

So, let's modify this a bit so we can tell a difference between the two. What we'll do is in the code, we'll switch the layout_width over here from wrap_content to match_parent. So, the video is going to be stretched to the whole width of the screen when it's in landscape mode and it'll be a bit distorted, but that'll illustrate the change properly for us. So, once we've made that change, let's run it. I'll pull up my app. I'll move it to portrait mode. There you go. You see portrait mode is working. Now if I switch to landscape mode now, check it out; it's stretched across the whole width of the screen. So, it's using this layout for landscape. Perfect. Now one thing to note about the switch to landscape mode is if you notice when I switch the mode to landscape, the activity stopped and it restarted from the beginning of the video. And that's because the default Android behavior is to drop everything in the view, in the mode it's in and then restart it from scratch. 

And this behavior can be changed. Let's say you wanted to start the video from where you had switched to landscape mode and just play it from that point. That is possible, especially when you're dealing with games or advanced video player functions like this, but that requires a slightly more advanced programming knowledge and the use of a couple of more methods which I feel is too much to do at this point. For now though, we've learned how to serve different layouts for different layout orientations and that's good enough for now. Next, we'll look at how to launch a YouTube video to play in the YouTube app. And following that, in the video after that one, we'll jump into a project to wrap up this part of the section and it'll be a video project where we'll implement a YouTube video player in our Android app that serves videos directly from YouTube. And this will definitely take our app development skills to the next level. We're going to be using APIs and such, which are the core of advanced app development. Hope you're excited and I'll see you in the next video.

 

About the Author

Mashrur is a full-time programming instructor specializing in programming fundamentals, web application development, machine learning and cyber security. He has been a technology professional for over a decade and has degrees in Computer Science and Economics. His niche is building comprehensive career focused technology courses for students entering new, complex, and challenging fields in today's technology space.

Covered Topics