본문으로 건너뛰기

ListFragment – With Images and Text

ListFragment is a pre-built fragment in Android that is used to display a list of items. It is a subclass of Fragment and is used to display a list of items using ListView or RecyclerView. ListFragment is a powerful and flexible way to display a list of items in an Android application.

Creating a ListFragment​

Creating a ListFragment is a simple process. Here is an example of how to create a ListFragment in Kotlin:

class MyListFragment : ListFragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.fragment_list, container, false)
        return view
    }
}

In the above code, we create a new class called MyListFragment which extends ListFragment. We override the onCreateView method which is called when the fragment is created. In this method, we inflate the layout file fragment_list and return the view.

Displaying a List of Items​

Now that we have created a ListFragment, we can display a list of items. Here is an example of how to display a list of items in Kotlin:

class MyListFragment : ListFragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.fragment_list, container, false)
        
        val items = arrayOf("Item 1", "Item 2", "Item 3", "Item 4", "Item 5")
        val adapter = ArrayAdapter(requireContext(), android.R.layout.simple_list_item_1, items)
        listAdapter = adapter
        
        return view
    }
}

In the above code, we create an array of items and then create an ArrayAdapter to display the items in a ListView. We set the listAdapter property of the ListFragment to the adapter we just created.

Handling Item Clicks​

Now that we have a list of items displayed in our ListFragment, we can handle item clicks. Here is an example of how to handle item clicks in Kotlin:

class MyListFragment : ListFragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.fragment_list, container, false)
        
        val items = arrayOf("Item 1", "Item 2", "Item 3", "Item 4", "Item 5")
        val adapter = ArrayAdapter(requireContext(), android.R.layout.simple_list_item_1, items)
        listAdapter = adapter
        
        listView.setOnItemClickListener { parent, view, position, id ->
            Toast.makeText(requireContext(), "Clicked item $position", Toast.LENGTH_SHORT).show()
        }
        
        return view
    }
}

In the above code, we set an OnItemClickListener on the ListView and show a Toast message when an item is clicked.

More Examples​

Section 1 : MainActivity Class​

  • Simply sets the activity main layout.Otherwise has nothing
package com.tutorials.listfragmentimagestext;

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

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

}

Section 2 : PlayersFragment Class​

  • This class shall derive from the android.app.ListFragment class.
  • Contains our Custom ListView with images and text.
package com.tutorials.listfragmentimagestext;

import java.util.ArrayList;
import java.util.HashMap;

import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.SimpleAdapter;
import android.widget.Toast;

public class PlayersFragment extends ListFragment{

  String[] players={"Ander Herera","Diego Costa","Juan Mata","David De Gea","Thibaut Courtouis","Van Persie","Oscar"};
  int[] images={R.drawable.herera,R.drawable.costa,R.drawable.mata,R.drawable.degea,R.drawable.thibaut,R.drawable.vanpersie,R.drawable.oscar};

  ArrayList<HashMap<String, String>> data=new ArrayList<HashMap<String,String>>();
  SimpleAdapter adapter;

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    // TODO Auto-generated method stub

     //MAP
    HashMap<String, String> map=new HashMap<String, String>();

    //FILL
    for(int i=0;i<players.length;i++)
    {
      map=new HashMap<String, String>();
      map.put("Player", players[i]);
      map.put("Image", Integer.toString(images[i]));

      data.add(map);
    }

    //KEYS IN MAP
    String[] from={"Player","Image"};

    //IDS OF VIEWS
    int[] to={R.id.nameTxt,R.id.imageView1};

    //ADAPTER
    adapter=new SimpleAdapter(getActivity(), data, R.layout.model, from, to);
    setListAdapter(adapter);

    return super.onCreateView(inflater, container, savedInstanceState);
  }

  @Override
  public void onStart() {
    // TODO Auto-generated method stub
    super.onStart();

    getListView().setOnItemClickListener(new OnItemClickListener() {

      @Override
      public void onItemClick(AdapterView<?> av, View v, int pos,
          long id) {
        // TODO Auto-generated method stub

        Toast.makeText(getActivity(), data.get(pos).get("Player"), Toast.LENGTH_SHORT).show();

      }
    });
  }

}

Section 3 : Layouts​

ActivityMain.xml​
  • This is the activity layout that shall be responsible for hosting our fragment.
  • Add Fragment tag inside it.
<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    tools_context=".MainActivity" >

    <fragment
        android_id="@+id/fragment1"
        android_name="com.tutorials.listfragmentimagestext.PlayersFragment"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentTop="true"
        android_layout_centerHorizontal="true"
        android_layout_marginTop="81dp" />

    <TextView
        android_id="@+id/textView1"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentTop="true"
        android_layout_centerHorizontal="true"
        android_layout_marginTop="38dp"
        android_text="Fragment Custom ListView"
        android_textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>
Model.xml​
  • Our Fragment Layout.
  • This layout shall be inflated to our fragment.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android_layout_width="match_parent"
    android_layout_height="match_parent" >

    <ImageView
        android_id="@+id/imageView1"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentLeft="true"
        android_layout_alignParentTop="true"
        android_layout_marginLeft="30dp"
        android_layout_marginTop="28dp"
        android_src="@drawable/herera" />

    <TextView
        android_id="@+id/nameTxt"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentRight="true"
        android_layout_alignTop="@+id/imageView1"
        android_layout_marginTop="19dp"
        android_padding="10dp"
        android_layout_toRightOf="@+id/imageView1"
        android_text="Name"
        android_textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

Result​

Here is what you get:

ListFragment With Images and Text and OnItemClick

Conclusion​

ListFragment is a powerful and flexible way to display a list of items in an Android application. It provides a simple way to create a list of items and handle item clicks. With ListFragment, you can easily create a list of items and display them in a ListView or RecyclerView.