Example of ListFragment in Android

Fragment class in Android is used to simplifies the task of creating UI for multiple screen sizes. Fragments should be used within the Activity, last can contain any number of fragments.

Let's initialize a string constant inside string.xml file under res/values directory

<resources>
    ...
    <string-array name="planets">
        <item>Sun</item>
        <item>Mercury</item>
        <item>Venus</item>
        <item>Earth</item>
        <item>Mars</item>
        <item>Jupiter</item>
        <item>Saturn</item>
        <item>Uranus</item>
        <item>Neptune</item>
    </string-array>
</resources>

Creating Fragment layouts in list_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="match_parent"
    android:layout_height="match_parent">
    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@android:id/list" />
</LinearLayout>

Create a class PlanetListFragment and extend it to ListFragment. Inside the onCreateView() method, inflate the view with above defined list_fragment.xml layout. Inside the onActivityCreated() method, create a ArrayAdapter from resource array R.array.planets and set this adapter to ListView and also set the onItemClick click listener. Inside the OnItemClickListener() method, display a toast message with item name which is being clicked.

public class PlanetListFragment extends ListFragment implements AdapterView.OnItemClickListener {
    ArrayAdapter<CharSequence> adapter;

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

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        adapter = ArrayAdapter.createFromResource(getActivity(), R.array.planets, android.R.layout.simple_list_item_1);
        setListAdapter(adapter);
        getListView().setOnItemClickListener(this);
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Toast.makeText(getActivity(), adapter.getItem(position), Toast.LENGTH_SHORT).show();

    }
} 

What exactly is an adapter? An adapter loads the information to be displayed from a data source, such as an array or database query and creates a view for each item. Then it inserts the views into the ListView. The adapter acts as the middle man between the ListView and data source, or its provider. It works kind of like this: the ListView asks the adapter what it should display, and the adapter jumps into action:

  • It fetches the items to be displayed from the data source.
  • It decides how they should be displayed.
  • It passes this information on to the ListView.

Our main layout (activity_main.xml) consists of one fragment which are displayed vertically. Fragment should link to the fragment class which is defined.

<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:orientation="horizontal"
    tools:context="me.proft.sandbox.MainActivity">

    <fragment
        android:id="@+id/fragment"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        class="me.proft.sandbox.PlanetListFragment"/>
</LinearLayout>

Our MainActivity just extends the FragmentActivity.

public class MainActivity extends FragmentActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Result

android_listfragment.png
comments powered by Disqus