Thursday, April 14, 2011

landscape android



How to change your layout in Android landscape / portrait mode

08.25.2009 · Posted in Quick and dirty
In the res folder we are used to having a layout folder, in which we keep the XML files which describe our application’s layouts. This trick will show you how to improve the view in landscape or portrait mode, whichever you might need.

How do I quickly change my emulator from portrait to landscape and viceversa?

Use Ctrl + F11 to test around.

Can I only improve the layout and use no extra code?

The short answer is yes, definitely.
The layouts in /res/layout are applied to both portrait and landscape, unless you specify otherwise. Let’s assume we have /res/layout/home.xml for our homepage and we want it to look differently in the 2 layout types.
  1. create folder /res/layout-land (here you will keep your landscape adjusted layouts)
  2. copy home.xml there
  3. make necessary changes to it
  4. run the application in the emulator and test it using the Ctrl + F11 combination

 URL:http://blog.nelsondev.net/?p=341

Fish Gotta Swim, Birds Gotta Fly

Android Layout Orientation

Android doesn’t care what your orientation is. There’s no telling whether a user will prefer to hold his Android phone or other portable device in a vertical (“portrait”) or horizontal (“landscape”) orientation.
To accomodate this Android allows you to define two different layouts using the same IDs so the Java code can access them without needing to know what orientation it’s in. The “portrait mode” layout goes in the regular res\layout folder, and the landscape mode layout files go in res\layout-land .
I’m currently writing an app that presents the user with different displays depending on which orientation it’s in. In the vertical (“portrait”) mode I just use a simple LinearLayout and it looks like this:
Vertical with LinearLayout
But in the horizontal (“landscape”) mode it has a more complex layout involving tables and rows. The XML for both cases is shown below.
Horizontal example
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="#303080"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 
   <CheckBox android:id="@+id/check1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text=" "/>
   <CheckBox android:id="@+id/check2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text=" "/>
   <CheckBox android:id="@+id/check3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text=" "/>
   <CheckBox android:id="@+id/check4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text=" "/>
   <CheckBox android:id="@+id/check5"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text=" "/>
   <CheckBox android:id="@+id/check6"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text=" "/>
 
   <EditText
      android:id="@+id/notesEditText"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:hint="type in some notes"
    />
 
   <Button android:id="@+id/SaveButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:onClick="saveEventButtonHandler"
      android:text="Save">
  </Button>     
 
</LinearLayout>
. . . and here’s the horizontal case . . .
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:stretchColumns="*"
  android:background="#303080"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
   <TableRow android:layout_height="wrap_content"
        android:layout_width="fill_parent">
     <CheckBox android:id="@+id/check1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text=" "/>
     <CheckBox android:id="@+id/check2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text=" "/>
   </TableRow>
   <TableRow android:layout_height="wrap_content"
        android:layout_width="fill_parent">
     <CheckBox android:id="@+id/check3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text=" "/>
     <CheckBox android:id="@+id/check4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text=" "/>
   </TableRow>
   <TableRow android:layout_height="wrap_content"
        android:layout_width="fill_parent">
     <CheckBox android:id="@+id/check5"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text=" "/>
     <CheckBox android:id="@+id/check6"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text=" "/>
   </TableRow>
 
   <EditText
      android:id="@+id/myEditText1"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:inputType="textMultiLine"
      android:singleLine="false"
      android:text=" "
    />
 
<TableRow>
    <FrameLayout
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/SaveButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:textSize="20sp"
            android:onClick="saveEventButtonHandler"
            android:text="Save">
        </Button>
    </FrameLayout>
</TableRow>
</TableLayout>
Notice that the control ID’s are the same in both so the Java code-behind doesn’t have to worry about what orientation the display is in.
Also, be aware that the Activity onCreate() is called whenever the phone’s orientation is changed.

    No comments:

    Post a Comment