Layout change drastically on orientation change

Question

I have created a layout for an activity. The layout contains some image buttons and text views. The problem is that when I am setting the orientation of my device to portrait, its working fine, but when I am changing the orientation to landscape, the layout is giving unexpected results.

Here is my layout file:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true"
    android:padding="50dp" >


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/settings_imageView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:src="@android:drawable/bottom_bar" />

    <TextView
        android:id="@+id/settings_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"
        android:text="@string/my_settings"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <ImageView
        android:id="@+id/myProgramming_imageView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/settings_imageView"
        android:layout_alignParentLeft="true"
        android:src="@android:drawable/bottom_bar" />

    <TextView
        android:id="@+id/myProgramming_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/myProgramming_imageView"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="14dp"
        android:text="@string/my_programming"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <ImageView
        android:id="@+id/library_imageView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/myProgramming_imageView"
        android:layout_alignParentLeft="true"
        android:src="@android:drawable/bottom_bar" />

    <TextView
        android:id="@+id/library_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/library_imageView"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"
        android:text="@string/library"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>
</ScrollView>

Here is the output of the portrait mode on device, and this is the output which is expected on both portrait and landscape modes:

Portrait mode

Here is the output for the landscape mode on device, this is unexpected:

Landscape mode

I want the layout to look alike in portrait and landscape modes.

is it compulsory to use relative layout ? – Chintan Khetiya Nov 02 '12 at 06:01 — Chintan Khetiya, Nov 02 '12 at 06:01

score 2 · Answer 1 · answered Nov 02 '12 at 06:28

first you have to create following folder for different layout.....

Folder Name                       

layout-ldpi                           
layout-land-ldpi                    

layout-mdpi                           
layout-land-mdpi                      

layout-hdpi                           
layout-land-hdpi                      

layout-xlarge                        
layout-xlarge-land

1...Change in AndroidManifest.xml

android:configChanges="orientation|keyboardHidden"

2....Create layout_land.xml in layout Folder.

3....Create layout_port.xml in layout-land Folder.

4...Create Following Method

@Override
public void onConfigurationChanged(Configuration newConfig) 
{
    super.onConfigurationChanged(newConfig);


    if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) 
    {
        setContentView(R.layout.layout_land);
        set_all_id();
    } 
    else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT)
    {
        setContentView(R.layout.layout_port);
        set_all_id();
    }
}

5....Change in OnCreate Method (only this content)

@Override
public void onCreate(Bundle savedInstanceState)
{

    super.onCreate(savedInstanceState);
    if (getResources().getConfiguration().orientation == 1)
    {
        setContentView(R.layout.layout_port);
    }
    if (getResources().getConfiguration().orientation == 2)
    {
        setContentView(R.layout.layout_land);
    }
    set_all_id();

}

6...Create set_all_id() method for initialization of view objects

public void set_all_id()
{
    //define id for all view objects..
    //textview = (textview)findViewById(R.id.textview);
}

Okay, suppose I have a two layouts for medium sized screen and two layouts for large sized screens, then how should I call the different sized layouts for the different screen sizes, based on the device orientation? Should the layouts have the same file name? (eg. main_portrait.xml for both large and mediun screens) — kittu88, Nov 03 '12 at 05:48
automatic select different sized layouts for the different screen sizes when change in orientation...you have to call only PORTRAIT.xml and LANDSCAPE.xml.. — Parag Ghetiya, Nov 03 '12 at 12:25
And what about the file names? Will all the layouts for portrait have the same name and all layouts for landscape have the same name? — kittu88, Nov 03 '12 at 12:44
yes..... all the layouts for portrait have the same name and all layouts for landscape have the same name — Parag Ghetiya, Nov 03 '12 at 12:51

score 1 · Answer 2 · answered Nov 02 '12 at 05:38

1

Due to less height in the landscape mode, the layout will display like this.

According to me the good way is maintain the layout-land in the res folder and design the layout for the landscape mode. so that it will be nice look

answered Nov 02 '12 at 05:38

Ram kiran Pachigolla

20,897
15
57
78

Okay, can you suggest me a good tutorial for that. I dont know how to add multiple layouts for the same activity. Another thing is how will the System understand which layout to call? Will I have to do that manually? – kittu88 Nov 02 '12 at 05:40
Check [link1](http://android.programmerguru.com/android-landscape-layout-example/) [link2](http://android-er.blogspot.in/2012/01/apply-different-layout-on-different.html) – Ram kiran Pachigolla Nov 02 '12 at 05:48

score 1 · Accepted Answer · answered Nov 02 '12 at 05:39

- It seems you screen size is creating a problem here.

- You will have to create another folder under res directory as layout-land, and in it create a .xml file just like you did in layout folder, and make it look the way you want it in landscape mode.

- When your app goes into landscape mode, automatically this .xml file will be selected (ie from the layout-land) folder.

score 1 · Answer 4 · answered Nov 02 '12 at 05:50

1

create folder /res/layout-land (here you will keep your landscape adjusted layouts)
copy chooseActivity.xml there
make necessary changes to it

answered Nov 02 '12 at 05:50

QuokMoon

4,387
4
26
50

Layout change drastically on orientation change

4 Answers4

Linked