Monday, February 9, 2015

Manage Layout for Different Screen Orientation in Android

Continue from previous lesson, Set Dimension For Multiple Screen in Android.
In this post I will share the knowledge about manage layout for different screen orientation in android.

Before get confuse with different type of layout, let's me introduce it first...
In android, there are five different layouts,

FrameLayout the layout will divided into nine regions,
top-left, top, top-right,
left, center, right,
bottom-left, bottom, bottom-right,

Linear Layout The view inside the layout arranged according queue.
Have two orientation, vertical or horizontal
Relative Layout The view plot according the rule(or view) will it follow.
Table Layout The view arrange like a table, use row to adding new line.
Tab Layout This layout already deprecated

For more information about layout, please click on this link : Android Layouts: Linear Layout, Relative Layout and Table Layout and Android Tab Layout Tutorial


Okay, now I will begin the tutorial..

Android device have two orientation Landscape and Portrait, certain app in Google Play can view in both orientation and otherwise only fix for one orientation like Instagram.

How to make it fix for only one orientation?
It can be done by put this line in your Activity class for Landscape,

this.setRequestedOrientation(SCREEN_ORIENTATION_LANDSCAPE);

and this for Portrait,

this.setRequestedOrientation(SCREEN_ORIENTATION_PORTRAIT);

Simple..okay,next phase.

There also an app have different view or layout arrangement for different orientation,
like Google Play (Maybe).

The easy way is same like previous lesson create new resource file but this time for layout.

Right-click on layout folder > New > Layout resource file


Select Orientation as qualifier



Screen orientation is Landscape and file name must be same as default layout. Then, click OK.




Now, we have two activity_main.xml...and begin construct layout for land\activity_main.xml,
First, just copy and paste the code from default layout, then make some adjustment...Ta-Da...

Here the code for land\activity_main.xml,



And here Sample Running :



Landscape Interface




Portrait Interface


Only that for this post, this is the end of this post..short...hmmm
Below the link to download the full code,

Tutorial 5.zip
Tutorial 5 (Landscape).zip
Tutorial 5 (Portrait).zip

If you have problem or something to ask that related to java...
you can email or comment on this post...
I will try to find the solution and share it with you..












you can test it by your self..
i hope you like this souce code...
and please give some comment....
                                                                                                                                                      Created By : Z-man, 2015

No comments:

Post a Comment