Adapting to Display Orientation

Adapting to Display Orientation

One of the key features of modern
smartphones is their ability to switch screen
orientation

Android supports two screen orientations:

portrait and
landscape.
 By default, when you change the display
orientation of your Android device, the current
activity that is displayed will automatically redraw
its content in the new orientation.

This is because the onCreate() event of the

activity is fired whenever there is a change in
display orientation.
When you change the orientation of your Android
device, your current activity is actually destroyed and
then re-created.
Example
 As you can observe in landscape mode, a lot
of empty space on the right of the screen
could be used.

Furthermore, any additional views at the

bottom of the screen would be hidden when
the screen orientation is set to landscape.
Handling changes in screen orientation
In general, you can employ two techniques to
handle changes in screen orientation:
1. Anchoring The easiest way is to anchor your
views to the four edges of the screen. When the
screen orientation changes, the views can anchor
neatly to the edges.
2. Resizing and repositioning Whereas anchoring
and centralizing are simple techniques to ensure that
views can handle changes in screen orientation, the
ultimate technique is resizing each and every view
according to the current screen orientation.
 1. Anchoring Views
Anchoring could be easily achieved by using
RelativeLayout.

Consider the following main.xml containing

five Button views embedded within the
<RelativeLayout> element:
 Anchoring Views - Example
<?xml version=1.0 encoding=utf-8?>
<RelativeLayout
android:layout_width=fill_parent
android:layout_height=fill_parent
xmlns:android=http://schemas.android.com/apk/res/android
>

<Button
android:id=@+id/button1
android:layout_width=wrap_content
android:layout_height=wrap_content
android:text=Top Left Button
android:layout_alignParentLeft=true
android:layout_alignParentTop=true
/>
 Anchoring Views - Example
<Button
android:id=@+id/button2
android:layout_width=wrap_content
android:layout_height=wrap_content
android:text=Top Right Button
android:layout_alignParentTop=true
android:layout_alignParentRight=true
/>

<Button
android:id=@+id/button3
android:layout_width=wrap_content
android:layout_height=wrap_content
android:text=Bottom Left Button
android:layout_alignParentLeft=true
android:layout_alignParentBottom=true
/>
 Anchoring Views - Example
<Button
android:id=@+id/button4
android:layout_width=wrap_content
android:layout_height=wrap_content
android:text=Bottom Right Button
android:layout_alignParentRight=true
android:layout_alignParentBottom=true
/>

<Button
android:id=@+id/button5
android:layout_width=fill_parent
android:layout_height=wrap_content
android:text=Middle Button
android:layout_centerVertical=true
android:layout_centerHorizontal=true
/>
</RelativeLayout>
 Anchoring Views - Example
Observe the following attributes found in the various
Button views:
layout_alignParentLeft
Aligns the view to the left of the parent view
layout_alignParentRight
Aligns the view to the right of the parent view
layout_alignParentTop
Aligns the view to the top of the parent view
layout_alignParentBottom
Aligns the view to the bottom of the parent view
layout_centerVertical
Centers the view vertically within its parent view
layout_centerHorizontal
Centers the view horizontally within its parent view
Figure shows the activity when viewed
in portrait mode.
 When the screen orientation changes to
landscape mode
the four buttons are aligned to the four edges of
the screen, and
the center button is centered in the middle of the
screen with its width fully stretched
see Next Figure
Figure shows the activity when viewed
in landscape mode.
 2. Resizing and Repositioning
Apart from anchoring your views to the four
edges of the screen, an easier way to customize
the UI based on screen orientation is to create a
separate res/layout folder containing the XML
files for the UI of each orientation.

To support landscape mode, you can create a

new folder in the res folder and name it as
layout-land (representing landscape).
 Figure shows the new folder
containing the file main.xml.

Basically, the main.xml file

contained within the layout
folder defines the UI for the
activity in portrait mode,
whereas the main.xml file in the
layout-land folder defines the UI
in landscape mode.
 the content of main.xml under the
layout folder
<?xml version=1.0 encoding=utf-8?> <Button
<RelativeLayout android:id=@+id/button3
android:layout_width=fill_parent android:layout_width=wrap_content
android:layout_height=fill_parent android:layout_height=wrap_content
xmlns:android=http://schemas.android.com/apk/res/ android:text=Bottom Left Button
android> android:layout_alignParentLeft=true
android:layout_alignParentBottom=true
<Button />
android:id=@+id/button1
android:layout_width=wrap_content <Button
android:layout_height=wrap_content android:id=@+id/button4
android:text=Top Left Button android:layout_width=wrap_content
android:layout_alignParentLeft=true android:layout_height=wrap_content
android:layout_alignParentTop=true android:text=Bottom Right Button
/> android:layout_alignParentRight=true
android:layout_alignParentBottom=true
<Button />
android:id=@+id/button2
android:layout_width=wrap_content <Button
android:id=@+id/button5
android:layout_height=wrap_content android:layout_width=fill_parent
android:text=Top Right Button android:layout_height=wrap_content
android:layout_alignParentTop=true android:text=Middle Button
android:layout_alignParentRight=true android:layout_centerVertical=true
android:layout_centerHorizontal=true
/> />
</RelativeLayout>
 the content of main.xml under the layout-land folder
(the statements in bold are the additional views to display in landscape mode)
<?xml version=1.0 encoding=utf-8?>
<RelativeLayout <Button
android:layout_width=fill_parent android:id=@+id/button5
android:layout_height=fill_parent android:layout_width=fill_parent
xmlns:android=http://schemas.android.com/apk/res/android> android:layout_height=wrap_content
<Button
android:text=Middle Button
android:layout_centerVertical=true
android:id=@+id/button1 android:layout_centerHorizontal=true/>
android:layout_width=wrap_content
android:layout_height=wrap_content <Button
android:text=Top Left Button android:id=@+id/button6
android:layout_alignParentLeft=true android:layout_width=180px
android:layout_alignParentTop=true/>
<Button
android:layout_height=wrap_content
android:id=@+id/button2 android:text=Top Middle Button
android:layout_width=wrap_content android:layout_centerVertical=true
android:layout_height=wrap_content android:layout_centerHorizontal=true
android:text=Top Right Button android:layout_alignParentTop=true/>
android:layout_alignParentTop=true
android:layout_alignParentRight=true/>
<Button
<Button
android:id=@+id/button3 android:id=@+id/button7
android:layout_width=wrap_content android:layout_width=180px
android:layout_height=wrap_content android:layout_height=wrap_content
android:text=Bottom Left Button android:text=Bottom Middle Button
android:layout_alignParentLeft=true
android:layout_alignParentBottom=true/>
android:layout_centerVertical=true
<Button android:layout_centerHorizontal=true
android:id=@+id/button4 android:layout_alignParentBottom=true/>
android:layout_width=wrap_content
android:layout_height=wrap_content </RelativeLayout>
android:text=Bottom Right Button
android:layout_alignParentRight=true
android:layout_alignParentBottom=true/>
When the activity is loaded in portrait
mode, it will show five buttons
When the activity is loaded in landscape mode, there are now seven buttons
proving that different XML files are loaded when the device is in a different orientation
 Using this method, when the orientation of
the device changes, Android will automatically
load the appropriate XML file for your activity
depending on the current screen orientation.
Managing Changes to Screen Orientation

what happens to an activitys state (data)

when the device changes orientation

Understanding Activity Behavior when

Orientation Changes
<?xml version=1.0 encoding=utf-8?>
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
android:orientation=vertical
android:layout_width=fill_parent
android:layout_height=fill_parent
>

<EditText
android:id=@+id/txtField1
android:layout_width=fill_parent
android:layout_height=wrap_content />

<EditText
android:layout_width=fill_parent
android:layout_height=wrap_content />

</LinearLayout>
package net.learn2develop.Orientations;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;

public class MainActivity extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Log.d(StateInfo, onCreate);
}
@Override @Override
public void onStart() { public void onStop() {
Log.d(StateInfo, onStart); Log.d(StateInfo, onStop);
super.onStart(); super.onStop();
}
}
@Override
@Override public void onDestroy() {
public void onResume() { Log.d(StateInfo, onDestroy);
Log.d(StateInfo, onResume); super.onDestroy();
super.onResume(); }
} @Override
@Override public void onRestart() {
public void onPause() { Log.d(StateInfo, onRestart);
Log.d(StateInfo, onPause); super.onRestart();
}
super.onPause();
} } // Main Activity Ends
 Press F11 to debug

Enter some text into the two EditText views

 Change the orientation of the Android
Emulator by pressing Ctrl+F11.

Note that the text in the first EditText view is

still visible, while the second EditText view is
now empty.
 Observe the output in the LogCat
window
01-05 13:32:30.266: DEBUG/StateInfo(5477): onCreate
01-05 13:32:30.296: DEBUG/StateInfo(5477): onStart
01-05 13:32:30.296: DEBUG/StateInfo(5477): onResume
...
01-05 13:35:20.106: DEBUG/StateInfo(5477): onPause
01-05 13:35:20.106: DEBUG/StateInfo(5477): onStop
01-05 13:35:20.106: DEBUG/StateInfo(5477): onDestroy
01-05 13:35:20.246: DEBUG/StateInfo(5477): onCreate
01-05 13:35:20.256: DEBUG/StateInfo(5477): onStart
01-05 13:35:20.256: DEBUG/StateInfo(5477): onResume
 How It Works
From the output shown in the LogCat window,
it is apparent that when the device changes
orientation, the activity is destroyed:
01-05 13:35:20.106: DEBUG/StateInfo(5477): onPause
01-05 13:35:20.106: DEBUG/StateInfo(5477): onStop
01-05 13:35:20.106: DEBUG/StateInfo(5477): onDestroy
 It is then re-created:
01-05 13:35:20.246: DEBUG/StateInfo(5477): onCreate
01-05 13:35:20.256: DEBUG/StateInfo(5477): onStart
01-05 13:35:20.256: DEBUG/StateInfo(5477): onResume
 It is important that you understand this behavior
because you need to ensure that you take the
necessary steps to preserve the state of your activity
before it changes orientation.

For example, you may have variables containing values

needed for some calculations in the activity.

For any activity, you should save whatever state you

need to save in the onPause() event, which is fired
every time the activity changes orientation.
 Another important behavior to understand is that only views that
are named (via the android:id attribute) in an activity will have their
state persisted when the activity they are contained in is destroyed.

For example, the user may change orientation while entering some
text into an EditText view.
When this happens, any text inside the EditText view will be
persisted and restored automatically when the activity is re-
created.

In contrast, if you do not name the EditText view using the

android:id attribute, the activity will not be able to persist the text
currently contained within it.
 Persisting State Information during
Changes in Configuration
There are many methods
Using/implementing the onSaveInstanceState()
method
Another event handler that you can use is the
onRetainNonConfigurationInstance() event
Saving data in database
 detecting orientation changes
Sometimes you need to know the devices
current orientation during run time.

To determine that, you can use the

WindowManager class.

The following code snippet demonstrates how

you can programmatically detect the current
orientation of your activity:
import android.util.Log;
import android.view.Display;
import android.view.WindowManager;
//...
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//---get the current display info---
WindowManager wm = getWindowManager();
Display d = wm.getDefaultDisplay();
if (d.getWidth() > d.getHeight())
{
//---landscape mode---
Log.d(Orientation, Landscape mode);
}
else
{
//---portrait mode---
Log.d(Orientation, Portrait mode);
}
}
 The getDefaultDisplay() method returns a
Display object representing the screen of the
device.

You can then get its width and height and

deduce the current orientation
 Controlling the Orientation of the
Activity
Occasionally you might want to ensure that your
application is only displayed in a certain
orientation.

For example, you may be writing a game that

should only be viewed in landscape mode.

In this case, you can programmatically force a

change in orientation using the
setRequestOrientation() method of the Activity
class:
import android.content.pm.ActivityInfo;
public class MainActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//---change to landscape mode---
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
}
 To change to portrait mode, use the
ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
constant:

setRequestedOrientation(ActivityInfo.SCREE
N_ORIENTATION_PORTRAIT);
 Besides using the setRequestOrientation()
method, you can also use the
android:screenOrientation attribute on the
<activity> element in AndroidManifest.xml as
follows to constrain the activity to a certain
orientation:
<?xml version=1.0 encoding=utf-8?>
<manifest xmlns:android=http://schemas.android.com/apk/res/android
package=net.learn2develop.Orientations
android:versionCode=1
android:versionName=1.0>
<application android:icon=@drawable/icon
android:label=@string/app_name>

<activity android:name=.MainActivity
android:label=@string/app_name
android:screenOrientation=landscape >

<intent-filter>
<action android:name=android.intent.action.MAIN />
<category android:name=android.intent.category.LAUNCHER />
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion=9 />
</manifest>
 The preceding example constrains the activity
to a certain orientation (landscape in this
case) and prevents the activity from being
destroyed; that is, the activity will not be
destroyed and the onCreate() event will not
be fired again when the orientation of the
device changes.
 Following are two other values that you can
specify in the android:screenOrientation
attribute:
portrait Portrait mode
sensor Based on the accelerometer
Topic Ends