Android ListFragment - With Images and Text

android listfragment

This is an android ListFragment tutorial.A ListFragment can show a ListView by default.Our ListView is going to be a custom one containing both images and text.

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 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: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 xmlns:android="http://schemas.android.com/apk/res/android"
    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>

ListFragment With Images and Text and OnItemClick

Good day.

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think

Dear readers drop us your comments below. We are building a community of students and learners. Start by dropping us your suggestions below. What tutorials do you want us to do for example? Where can we improve? What are some awesome resources out there? Do you have any code you want to share with us?
By the way that example or snippet you have lying in your computer can really help beginner programmers. We can share it here with other students.

Previous Post Next Post