Android Custom ListView Texts and Images Tutorial

In this tutorial, you will learn how to create a custom listview with texts and images in your Android Application. Using a custom listview adapter allows to you to customize listview item layouts. We will create a listview to show texts and images and on listview item click will show the selected results in a new activity. So lets begin…

Create a new project in Eclipse File > New > Android Application Project. Fill in the details and name your project CustomImageListView.

Application Name : CustomImageListView

Project Name : CustomImageListView

Package Name : com.androidbegin.customimagelistview

Open your MainActivity.java and paste the following code.

MainActivity.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

packagecom.androidbegin.customimagelistview;

import android.os.Bundle;

import android.app.Activity;

import android.content.Intent;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.ListView;

import android.view.View;

publicclassMainActivityextendsActivity{

// Declare Variables

ListView list;

ListViewAdapter adapter;

String[]rank;

String[]country;

String[]population;

int[]flag;

@Override

publicvoidonCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);

// Get the view from listview_main.xml

setContentView(R.layout.listview_main);

// Generate sample data into string arrays

rank=newString[]{"1","2","3","4","5","6","7","8","9","10"};

country=newString[]{"China","India","United States",

"Indonesia","Brazil","Pakistan","Nigeria","Bangladesh",

"Russia","Japan"};

population=newString[]{"1,354,040,000","1,210,193,422",

"315,761,000","237,641,326","193,946,886","182,912,000",

"170,901,000","152,518,015","143,369,806","127,360,000"};

flag=newint[]{R.drawable.china,R.drawable.india,

R.drawable.unitedstates,R.drawable.indonesia,

R.drawable.brazil,R.drawable.pakistan,R.drawable.nigeria,

R.drawable.bangladesh,R.drawable.russia,R.drawable.japan};

// Locate the ListView in listview_main.xml

list=(ListView)findViewById(R.id.listview);

// Pass results to ListViewAdapter Class

adapter=newListViewAdapter(this,rank,country,population,flag);

// Binds the Adapter to the ListView

list.setAdapter(adapter);

// Capture ListView item click

list.setOnItemClickListener(newOnItemClickListener(){

@Override

publicvoidonItemClick(AdapterView<?>parent,View view,

intposition,longid){

Intenti=newIntent(MainActivity.this,SingleItemView.class);

// Pass all data rank

i.putExtra("rank",rank);

// Pass all data country

i.putExtra("country",country);

// Pass all data population

i.putExtra("population",population);

// Pass all data flag

i.putExtra("flag",flag);

// Pass a single position

i.putExtra("position",position);

// Open SingleItemView.java Activity

startActivity(i);

}

});

}

}

In this activity, we have created string arrays with sample data and pass it into the ListViewAdapter class. On listview item click will pass the selected position and string arrays to a new activity.

We have prepared some sample images for this tutorial. Insert your downloaded sample images into your res > drawable-hdpi.

Next, create a new activity to show results on listview item click. Go to File > New > Class and name it SingleItemView.java. Select your package named com.androidbegin.customimagelistviewand click Finish.

Open yourSingleItemView.java and paste the following code.

SingleItemView.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

packagecom.androidbegin.customimagelistview;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.widget.ImageView;

import android.widget.TextView;

publicclassSingleItemViewextendsActivity{

// Declare Variables

TextView txtrank;

TextView txtcountry;

TextView txtpopulation;

ImageView imgflag;

String[]rank;

String[]country;

String[]population;

int[]flag;

intposition;

@Override

publicvoidonCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.singleitemview);

// Retrieve data from MainActivity on listview item click

Intenti=getIntent();

// Get a single position

position=i.getExtras().getInt("position");

// Get the list of rank

rank=i.getStringArrayExtra("rank");

// Get the list of country

country=i.getStringArrayExtra("country");

// Get the list of population

population=i.getStringArrayExtra("population");

// Get the list of flag

flag=i.getIntArrayExtra("flag");

// Locate the TextViews in singleitemview.xml

txtrank=(TextView)findViewById(R.id.rank);

txtcountry=(TextView)findViewById(R.id.country);

txtpopulation=(TextView)findViewById(R.id.population);

// Locate the ImageView in singleitemview.xml

imgflag=(ImageView)findViewById(R.id.flag);

// Load the text into the TextViews followed by the position

txtrank.setText(rank[position]);

txtcountry.setText(country[position]);

txtpopulation.setText(population[position]);

// Load the image into the ImageView followed by the position

imgflag.setImageResource(flag[position]);

}

}

In this activity, strings and integer are retrieved from the ListViewAdapter by using Intent and sets into the TextViews and ImageView.

In this tutorial, on item select, intent is carrying details and showing on one page. but i want to send intent on different pages when clicked on different list item without carrying any data. Any example??