Android Single Frame Fragments

Single Frame Fragments: Single Frame Fragments are designed for small screen devices, such as handheld devices (mobile phones), and are supported in Android 3.0 and above.

Example

This example explains how to create your own fragments. Here, we create two fragments, one to be used when the device is in landscape mode and the other when the device is in portrait mode. Let's start by following the steps below.

Below is the content of the main activity file src/cn.uprogrammer.singlefragments/MainActivity.java:

package cn.uprogrammer.singlefragment;

import android.os.Bundle;
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.content.res.Configuration;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Configuration config = getResources().getConfiguration();

        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction =
                fragmentManager.beginTransaction();

        /**
         * Detect device orientation and perform corresponding actions.
         */
        if (config.orientation == Configuration.ORIENTATION_LANDSCAPE) {
            /**
             * Device is in landscape mode.
             */
            LandscapeFragment ls_fragment = new LandscapeFragment();
            fragmentTransaction.replace(android.R.id.content, ls_fragment);
        } else {
            /**
             * Device is in portrait mode.
             */
            PortraitFragment pm_fragment = new PortraitFragment();
            fragmentTransaction.replace(android.R.id.content, pm_fragment);
        }
        fragmentTransaction.commit();
    }
}

Create two fragment files, LandscapeFragment.java and PortraitFragment.java, under the cn.uprogrammer.singlefragments package.

Below is the content of the LandscapeFragment.java file:

package cn.uprogrammer.singlefragment;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class LandscapeFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        /**
         * Inflate the layout for this fragment
         */
        return inflater.inflate(
                R.layout.landscape_fragment, container, false);
    }
}

Below is the content of the PortraitFragment.java file:

package cn.uprogrammer.singlefragment;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class PortraitFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        /**
         * Inflate the layout for this fragment
         */
        return inflater.inflate(
                R.layout.portrait_fragment, container, false);
    }
}

Create two layout files, landscape_fragment.xml and portrait_fragment.xml, in the res/layout directory.

Below is the content of the landscape_fragment.xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#7bae16">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/landscape_message"
        android:textColor="#000000"
        android:textSize="28sp" />

    <!-- More GUI components go here  -->

</LinearLayout>

Below is the content of the portrait_fragment.xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#666666">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/portrait_message"
        android:textColor="#000000"
        android:textSize="28sp" />

    <!-- More GUI components go here  -->

</LinearLayout>

Below is the content of the res/layout/activity_main.xml file, which includes both fragments:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">

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

    &lt;fragment
        android:id="@+id/portrait_fragment"
        android:layout_weight="2"
        android:layout_width="0dp"

<LinearLayout
    android:layout_height="match_parent" />

</LinearLayout>

Ensure that the res/values/strings.xml file contains the following:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Single Fragment</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="landscape_message">This is the landscape mode fragment</string>
    <string name="portrait_message">This is the portrait mode fragment</string>
</resources>

Let's run the modified Single Fragments application. I assume you have already created an AVD during the installation environment setup. Open your activity file in your project and click on the toolbar.

Follow these steps to change the emulator screen orientation mode:

• fn+control+F11 to switch from landscape to portrait and vice versa on a Mac

• ctrl+F11 on Windows

• ctrl+F11 on Linux

When you change the mode, you will see the page implementation for the landscape mode:

By using this method, you can achieve different interfaces within the same activity by using different fragments. You can build interfaces with different types of interface components according to your needs.