Designing Portrait for phones and Landscape for Tablets. Using Fragments

Question

In my application - which was just designed for phones I have implemented Fragment tabs. I want to port this application to cater for tablet devices. I want the orientation set to Landscape if it is a Tablet and to Portrait if it is a phone. As I am using fragments already I want to leverage the facility of displaying my fragments side by side on a single page and navigate to a different fragment in a Phone as described below:

Phone:

Tablet:

So far I am using a Main activity and defining my tabs here:

MainActivity

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ActionBar actionBar = getActionBar();
        actionBar.setDisplayShowHomeEnabled(true);
        actionBar.setDisplayShowTitleEnabled(true);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        Tab1 = actionBar.newTab().setIcon(R.drawable.tab1);
        Tab1.setTag("Tab1");
        Tab2 = actionBar.newTab().setIcon(R.drawable.tab2);
        Tab2.setTag("Tab2");
        Tab3 = actionBar.newTab().setIcon(R.drawable.tab3);
        Tab3.setTag("Tab3"); 



        Tab1.setTabListener(new TabListener(fragmentTab1));
        Tab2.setTabListener(new TabListener(fragmentTab2));
        Tab3.setTabListener(new TabListener(fragmentTab3));

        actionBar.addTab(Tab1);
        actionBar.addTab(Tab2);
        actionBar.addTab(Tab3);

    }

Layout MainActivity: (activity_main)

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">        
</FrameLayout>

I have set a tab listener like follows:

public class TabListener implements ActionBar.TabListener {

    Fragment fragment;

    public TabListener(Fragment fragment) {

        this.fragment = fragment;

    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {

        ft.replace(R.id.fragment_container, fragment);
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {

        ft.remove(fragment);
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {


    }
}

The first tab fragment class signature:

public class FragmentTab1 extends Fragment 

The first Tab (FragmentTab1) OnCreateView:

public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {


        final View rootView = inflater.inflate(R.layout.fragmenttab1, container, false);

    }

XML for the FragmentTab1: (fragmenttab1.xml):

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:facebook="http://schemas.android.com/apk/res-auto"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:id="@+id/realtabcontent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_app" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="14dp"
        android:layout_marginRight="03dp"
        android:layout_marginTop="45dp"
        android:cacheColorHint="#00000000"
        android:fastScrollEnabled="true"
        android:listSelector="@android:color/transparent" >
    </ListView>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="0dp" >

        <AutoCompleteTextView
            android:id="@+id/editText1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:background="@drawable/search"
            android:ems="8"
            android:hint="Search Contacts"
            android:paddingLeft="36dp"
            android:textColor="#FFFFFF" >
        </AutoCompleteTextView>
    </RelativeLayout>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|top"
        android:layout_marginTop="10dp"
        android:visibility="invisible" />



</FrameLayout>

Now in the above I have set an onCLick listener to the listview row -- In phones I open a new fragment, but in tabs I want to show the FragmentTab1 and this fragment side by side in Landscape mode. How do I achieve this?

Answer 1

You need to create a separate layout for the tablet sized screens in res/layout-large/. or in res/layout-large-land/. The latter is if you only want the alternate layout for a tablet when it is held to display in landscape. In it you create two place holders for you fragments, typically a list in the first and the detailed view in the second, just as the image in your question.

In your onClick Listener you can check for the exists of the second fragment place holder with something along the lines of the following:

if (findViewById(R.id.second_fragment_container) == null)
{
    // the single fragment view is displayed - execute as your current listener
    // replacing the fragment container
}
else
{
    // Your duel fragment specific version.
    // replace only the second container, leaving the first displayed.
}

You may find the following sections of the android developer site helpful:

• Supporting Tablets and Handsets
• Providing Resources
• Supporting Multiple Screens