How to use Fragments in Android Applications

The Android Application will make use of the layouts with different fragments that depends on portrait and landscape mode.

In portrait mode, we have the RssfeedActivity that will show one Fragment from which the user can navigate to anotherActivity which contains another Fragment. On the other hand, in landscape mode RssfeedActivity will display both Fragments side by side.

Creation of a new Project

A new Android project with the following data is to be created.

Android Project

Property	Value
Application Name	RSS Reader
Project Name	com.example.android.rssfeed
Package name	com.example.android.rssfeed
Template	BlankActivity
Activity	RssfeedActivity
Layout	activity_rssfeed

Creation of Standard Layouts

One needs to Create or modify the following layout files in the res/layout/ folder. Create a new layout file known by the name of fragment_rssitem_detail.xml and this file will used by the DetailFragment.

Listing 1: Creating the fragment_rssitem_detail.xml

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

    <TextView
        android:id="@+id/detailsText"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal|center_vertical"
        android:layout_marginTop="20dip"
        android:text="Default Text"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="30dip" />

</LinearLayout>

The next step is to create a new layout file known by the name of fragment_rsslist_overview.xml which will be used by the MyListFragment.

Listing 2: Creating the fragment_rsslist_overview.xml

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Press to update"
         />

</LinearLayout>

We need to change the existing activity_rssfeed.xml file now and this layout will be the default layout for RssfeedActivity and displays two Fragments.

Listing 3: Creating the activity_rssfeed.xml

<?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:id="@+id/listFragment"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:layout_marginTop="?android:attr/actionBarSize"
        class="com.example.android.rssfeed.MyListFragment" ></fragment>

    <fragment
        android:id="@+id/detailFragment"
        android:layout_width="0dp"
        android:layout_weight="2"
        android:layout_height="match_parent"
        class="com.example.android.rssfeed.DetailFragment" >
        <!-- Preview: layout=@layout/details -->
    </fragment>

</LinearLayout>

As far as the RssfeedActivity is concerned, it will remain unmodified.

Listing 4: RssfeedActivity

package com.example.android.rssfeed;

import android.app.Activity;
import android.os.Bundle;

public class RssfeedActivity extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_rssfeed);
  }

}

Creation of Fragment classes

It’s time now to create now the Fragment classes and the DetailFragment class.

Listing 5: Creating Fragment class

package com.example.android.rssfeed;

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

public class DetailFragment extends Fragment {

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_rssitem_detail,
        container, false);
    return view;
  }

  public void setText(String item) {
    TextView view = (TextView) getView().findViewById(R.id.detailsText);
    view.setText(item);
  }
}

We will be creating the MyListFragment class now and despite its name, a list of items will not be displayed. Rather it will just have a button that will permit to send the current time to the details fragment.

Listing 6: Creating the MyListFragment class

package com.example.android.rssfeed;

import android.app.Fragment;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

public class MyListFragment extends Fragment {

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_rsslist_overview,
        container, false);
    Button button = (Button) view.findViewById(R.id.button1);
    button.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        updateDetail();
      }
    });
    return view;
  }

  // May also be triggered from the Activity
  public void updateDetail() {
    String newTime = String.valueOf(System.currentTimeMillis());
    DetailFragment fragment = (DetailFragment) getFragmentManager()
        .findFragmentById(R.id.detailFragment);
    if (fragment != null && fragment.isInLayout()) {
      fragment.setText(newTime);
    } else {
      Intent intent = new Intent(getActivity().getApplicationContext(),
          DetailActivity.class);
      intent.putExtra("value", newTime);
      startActivity(intent);

    }
  }
}

Time to Run The Example

Let us run our example now, the output of the same is displayed below.

Figure 1: Output of example

Hope you liked the article, see you next time.