Handle different layout for phone and tablet, in seperated layout folder

For the first generation of tablets running Android 3.0, the proper way to declare tablet layouts was to put them in a directory with the xlarge configuration qualifier (for example, res/layout-xlarge/). In Android 3.2 introduces a new way to specify resources for more discrete screen sizes. The new technique is based on the amount of space your layout needs (such as 600dp of width), rather than trying to make your layout fit the generalized size groups (such as large or xlarge).

For other cases in which you want to further customize your UI to differentiate between sizes such as 7” and 10” tablets, you can define additional smallest width layouts:
  • res/layout/main_activity.xml:
    # For handsets (smaller than 600dp available width)
  • res/layout-sw600dp/main_activity.xml:
    # For 7” tablets (600dp wide and bigger)
  • res/layout-sw720dp/main_activity.xml:
    # For 10” tablets (720dp wide and bigger)
Read more: Supporting Multiple Screens

Exercise:

Create a new Android Application Project with Minimum Required SDK of API 13: Android 3.2 (Honeycomb).



Modify /res/layout/activity_main.xml for normal device.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Normal" />

</LinearLayout>


Run on normal Android devices


Create /res/layout-sw600dp/activity_main.xml to define layout for tablet.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="sw600dp" />

</LinearLayout>

Run on tablet devices



More: Step-by-step to create dual mode app, single-pane for phone/dual-pane for tablet.


Related:
- Replace Fragment dynamically