Portrait mode and landscape mode views display adjustment with phone size

Question

I want to adjust the layouts according to the Landscape mode and portrait mode.

In my 7' tablet device the portrait mode is too small and Landscape mode is quite large. Due to small portrait mode, the list items and some text is mixing like button size got reduced, one text crossed the other one, etc..

So for the same view layout, I want to have different setups according to the modes.

For example consider this SO post of One Layout over the Top of Other. I want this scenario for the portrait mode. However for the Landscape mode, I don't want overlapping of one view on top of other. Rather I want one view on one side of the other.

My xml layout file for different modes-

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
              android:id="@+id/news_fragment"
              android:layout_weight="1"
              android:layout_width="0dp"              
              android:layout_height="match_parent" />

    <FrameLayout
              android:id="@+id/channel_fragment"
              android:layout_weight="2"
              android:layout_width="0dp"
              android:layout_height="match_parent" />

</LinearLayout>

The problem is this seems good for landscape mode but when it comes to portrait mode, I need news_fragment to get overlapped over channel_fragment.

How to achieve this behavior considering the layout file is same. Or do I have to create new one for portrait too?

score 2 · Answer 1 · edited Jun 13 '13 at 11:43

2

You simply create 2 different layout files. You should read the developer guides on this subject.

Basically you make 2 res/layout folders: res/layout and res/layout-land

Then you add a layout for landscape to the land folder and the portrait version to the other.

edited Jun 13 '13 at 11:43

sjain

23,126
28
107
185

answered Jun 13 '13 at 07:35

Warpzit

27,966
19
103
155

Actually I have 2 res/layout files: `res/layout/activity_main` and `res/layout-large/activity_main`. But the former is for tablet device and the latter one is for mobile device. Do I still have to create 2 more - 1 for portrait and 1 for landscape? The above xml in question is for tablet device. – sjain Jun 13 '13 at 07:40
@SaurabhJain, yes but you can have multiple options at the same time like: res/layout-large-land (there is an order of it, not sure this was the correct, but you can read about it on the developer guides) – Warpzit Jun 13 '13 at 07:53
This is quite confusing at first. Do you know what is the name for the layout file in portrait mode for the tablet device Or do you have any documentation to look at? Is it `res/layout-large-port` ? – sjain Jun 13 '13 at 07:58
@SaurabhJain If you have one for land the regular one will be for port so you don't need to make a folder for port. – Warpzit Jun 13 '13 at 08:11
But if I don't make a folder for port then how can I get the one view overlapping the other one affect ? The one for land is having one view after other and is not overlapping. Without making other folder for port Is it possible? – sjain Jun 13 '13 at 08:13
@SaurabhJain You got res/layout-large-land and res/layout-large. 2 folders. 1, 2 HAHAHAHAA <-- (like the count from sesam street) – Warpzit Jun 13 '13 at 08:17
AHA..got it. But me got res/layout/activity_main for mobile device. And res/layout-large/activity_main for both tablet(Portrait and Landscape). So can't distinguish the Portrait with Landscape. What about making res/layout-large-land/activity_main and res/layout-large-port/activity_main to get it distinguished? – sjain Jun 13 '13 at 08:27
@SaurabhJain you should really go read the link I gave you. Go read the chapter "Using configuration qualifiers" right now, I demand it. Your understanding on this subject will be so much better afterward. – Warpzit Jun 13 '13 at 08:42

score 0 · Answer 2 · answered Jun 13 '13 at 11:52

So according to the scenario:

I kept three layout folders viz..

res/layout/activity_main (for mobile devices)
res/layout-large/activity_main (for tablet devices with Portrait Mode)
res/layout-large-land/activity_main (for tablet devices with Landscape Mode)

All the three layout files contains there own containers as needed to display accordingly.

The trick is:

Since the activity_main of layout-large-land is taking care of Landscape orientation of tablet devices, therefore the activity_main of layout-large will by default will be for portrait mode.

So for mobile devices views, for tablets different orientations--the above scenario is best and is working great!

Portrait mode and landscape mode views display adjustment with phone size

2 Answers2