Every mobile screen have two orientations, one is Portrait and the other is Landscape.
Whenever you will run your application on the mobile device, you can see it in either orientations. You may want to have different screen layout in the different screen orientations.
Now to make your App screen to work in both orientations as expected, please follow the below steps:
- As shown in the below screenshot, under “res” folder, create a new folder with the name “layout-land”, -land appended for landscape orientation.
- For landscape orientation, create layout xml under “layout-land” folder with the same name as of the layout xml under “layout” folder. Note that name of the xml file in layout and layout-land folder should be same.
Having done the above steps, now when you will run your Android App in the Simulator or the actual device, when you will keep the screen in the portrait orientation, layout xml under layout folder will be picked up and when you will put the screen in the landscape mode, layout xml under layout-land folder will be picked up.
Note: To change the orientation of the screen in simulator, press Ctrl + F11.
Example from my latest App: Below are the screenshots from both the orientations. Please note the placement of the UI components in both the screens. I have created separate XML for the modes.
In Portrait mode:
In Landscape mode: