Android UI Tutorial - Android Fragments

• « Previous
• Next »

In a small-screen device, an activity typically fills the entire screen. And the activity is a container for views.

To better organize UI on a tablet we can use "mini-activities". Each mini-activities contains its own set of views.

An activity can contain one or more of these mini-activities. These mini-activities are known as fragments.

Fragments can contain views, just like activities. And fragments are always embedded in an activity.

Fragments form the atomic unit of your user interface, and they can be dynamically added or removed to activities.

We can think of the concept of a fragment in Android as the panel in a Desktop user interface.

Add fragment

The following code shows you the basic usage of fragments.

In the res/layout folder, add a new file and name it fragment1.xml. Populate it with the following:

<?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="#00FF00"
    >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="This is fragment #1"
        android:textColor="#000000"
        android:textSize="25sp" />
</LinearLayout>

Also in the res/layout folder, add another new file and name it fragment2.xml. Populate it as follows:

<?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="#FFFE00"
    >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="This is fragment #2"
        android:textColor="#000000"
        android:textSize="25sp" />
</LinearLayout>

In activity_main.xml, add the following code:

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

    <fragment
        android:name="com.java2s.myapplication3.app.Fragment1"
        android:id="@+id/fragment1"
        android:layout_weight="1"
        android:layout_width="0px"
        android:layout_height="match_parent" />
    <fragment
        android:name="com.java2s.myapplication3.app.Fragment2"
        android:id="@+id/fragment2"
        android:layout_weight="1"
        android:layout_width="0px"
        android:layout_height="match_parent" />

</LinearLayout>

Under the com.java2s.Fragments package name, add two Java class files and name them Fragment1.java and Fragment2.java

Add the following code to Fragment1.java:

package com.java2s.myapplication3.app;

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

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

Add the following code to Fragment2.java:

package com.java2s.myapplication3.app;
//  w  w w. j a  v a2s  . c  o m
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

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

Note

A fragment behaves very much like an activity: it has

• a Java class
• it loads its UI from an XML file.

The XML file contains all the usual UI elements that you expect from an activity: TextView, EditText, Button, and so on.

The Java class for a fragment needs to extend the Fragment base class:

public class Fragment1 extends Fragment {
}

Besides the Fragment base class, a fragment can also extend a few other subclasses of the Fragment class, such as DialogFragment, ListFragment, and PreferenceFragment.

To draw the UI for a fragment, you override the onCreateView() method. This method needs to return a View object.

You can use a LayoutInflater object to inflate the UI from the specified XML file.

      <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:orientation="horizontal" >
/*  www .j  a  v a 2s . com*/
          <fragment
              android:name="com.java2s.Fragments.Fragment1"
              android:id="@+id/fragment1"
              android:layout_weight="1"
              android:layout_width="0px"
              android:layout_height="match_parent" />
          <fragment
              android:name="com.java2s.Fragments.Fragment2"
              android:id="@+id/fragment2"
              android:layout_weight="1"
              android:layout_width="0px"
              android:layout_height="match_parent" />

      </LinearLayout>

Each fragment needs a unique identifier.

• Next »
• « Previous