Android Custom ListView Master Detail

[Open new Activity]

Tutorial How to make a Android Master Detail with Custom ListView with
images and Text.

FacebookTwitterGoogle+Share

Hello guys.Today we discuss about Android Custom ListView Master Detail interface.Our
ListView shall have images and text.

If you prefer video tutorial,here is our video version of this :

Cheers.

SECTION 1 : Our MainActivity

1. package com.example.listviewmasterdetail;
2.
3. import android.app.Activity;
4. import android.content.Intent;
5. import android.os.Bundle;
6. import android.view.View;
7. import android.widget.AdapterView;
8. import android.widget.AdapterView.OnItemClickListener;
9. import android.widget.ListView;
10.
11. public class MainActivity extends Activity {
12.
13. ListView lv;
14.
15. @Override
16. protected void onCreate(Bundle savedInstanceState) {
17. super.onCreate(savedInstanceState);
18. setContentView(R.layout.activity_main);
19.
20. lv=(ListView) findViewById(R.id.listView1);
21.
22. //ADAPTER
23. CustomAdapter adapter=new CustomAdapter(this);
24. lv.setAdapter(adapter);
25.
26. //EVENTS
 27. lv.setOnItemClickListener(new OnItemClickListener() {
28.
29. @Override
30. public void onItemClick(AdapterView<?> arg0, View v, int pos,
31. long id) {
32. // TODO Auto-generated method stub
33.
34. Intent i=new Intent(getApplicationContext(), PlayerActivity.class);
35.
36. //PASS INDEX OR POS
37. i.putExtra("Position", pos);
38. startActivity(i);
39.
40. }
41. });
42.
43. }

SECTION 2 : Our DetailActivity

1. package com.example.listviewmasterdetail;
2.
3. import android.app.Activity;
4. import android.content.Intent;
5. import android.os.Bundle;
6. import android.view.View;
7. import android.view.View.OnClickListener;
8. import android.widget.Button;
9. import android.widget.ImageView;
10. import android.widget.TextView;
11.
12. public class PlayerActivity extends Activity {
13.
14. int pos=0;
15.
16. @Override
17. protected void onCreate(Bundle savedInstanceState) {
18. super.onCreate(savedInstanceState);
19. setContentView(R.layout.activity_player);
20.
21.
22. //GET PASSED DATA
23. Intent i=getIntent();
24. pos=i.getExtras().getInt("Position");
25.
26. //GET VIEWS
 27. final CustomAdapter adapter=new CustomAdapter(this);
28. final ImageView img=(ImageView) findViewById(R.id.imageView1);
29. final TextView nameTv=(TextView)findViewById(R.id.nameTxt);
30. final TextView goalTv=(TextView) findViewById(R.id.goalTxt);
31.
32. //SET DATA
33. img.setImageResource(adapter.images[pos]);
34. nameTv.setText(adapter.names[pos]);
35. goalTv.setText(adapter.goals[pos]);
36.
37.
38. Button nextBtn=(Button) findViewById(R.id.button1);
39. //NEXT CLICKED
40. nextBtn.setOnClickListener(new OnClickListener() {
41.
42. @Override
43. public void onClick(View arg0) {
44. // TODO Auto-generated method stub
45.
46. int position=pos+1;
47.
48. //set data
49. img.setImageResource(adapter.images[position]);
50. nameTv.setText("Name: "+adapter.names[position]);
51. goalTv.setText("Goals: "+adapter.goals[position]);
52.
53. if(!(position>=adapter.getCount()-1))
54. {
55. pos +=1;
56. }else
57. {
58. pos = -1;
59. }
60.
61. }
62. });
63.
64.
65. }
66.
67.
68. }

SECTION 3 : Our CustomAdapter:

1. package com.example.listviewmasterdetail;
2.
3.
4. import android.content.Context;
5. import android.view.LayoutInflater;
6. import android.view.View;
7. import android.view.ViewGroup;
8. import android.widget.BaseAdapter;
9. import android.widget.ImageView;
10. import android.widget.TextView;
11.
12. public class CustomAdapter extends BaseAdapter {
13.
14. private Context c;
15.
16. String[] names={"Michael Carrick","Diego Costa","Ander Herera","Juan
Mata","Oscar","Aaron Ramsey","Wayne Rooney","Alexis Sanchez","Van Persie"};
17. String[] goals={"3","25","9","11","9","11","14","18","13"};
18. int[]
images={R.drawable.carrick,R.drawable.costa,R.drawable.herera,R.drawable.mata,R.dra
wable.oscar,R.drawable.ramsey,R.drawable.rooney,R.drawable.sanchez,R.drawable.vanp
ersie};
19.
20. ; public CustomAdapter(Context ctx) {
21. // TODO Auto-generated constructor stub
22.
23. this.c=ctx;
24. }
25.
26. @Override
27. public int getCount() {
28. // TODO Auto-generated method stub
29. return names.length;
30. }
31.
32. @Override
33. public Object getItem(int pos) {
34. // TODO Auto-generated method stub
35. return names[pos];
36. }
37.
38. @Override
39. public long getItemId(int pos) {
40. // TODO Auto-generated method stub
41. return pos;
42. }
43.
 44. @Override
45. public View getView(int pos, View convertView, ViewGroup parent) {
46. // TODO Auto-generated method stub
47.
48. if(convertView==null)
49. {
50. LayoutInflater inflater=(LayoutInflater)
c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
51. convertView=inflater.inflate(R.layout.player, null);
52. }
53.
54. //GET VIEWS
55. TextView nameTxt=(TextView) convertView.findViewById(R.id.nameTv);
56. TextView goalsTxt=(TextView) convertView.findViewById(R.id.goalsTv);
57. ImageView img=(ImageView) convertView.findViewById(R.id.imageView1);
58.
59. //SET DATA
60. nameTxt.setText(names[pos]);
61. goalsTxt.setText(goals[pos]);
62. img.setImageResource(images[pos]);
63.
64.
65. return convertView;
66. }
67.
68.
69.
70. }

SECTION 4 : Our MainActivity Layout

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:paddingBottom="@dimen/activity_vertical_margin"
6. android:paddingLeft="@dimen/activity_horizontal_margin"
7. android:paddingRight="@dimen/activity_horizontal_margin"
8. android:paddingTop="@dimen/activity_vertical_margin"
9. tools:context=".MainActivity" >
10.
11. <ListView
12. android:id="@+id/listView1"
13. android:layout_width="match_parent"
14. android:layout_height="wrap_content"
15. android:layout_alignParentLeft="true"
 16. android:layout_alignParentTop="true" >
17.
18. </ListView>
19.
20. </RelativeLayout>

SECTION 5 : Our DetailActivity Layout

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:paddingBottom="@dimen/activity_vertical_margin"
6. android:paddingLeft="@dimen/activity_horizontal_margin"
7. android:paddingRight="@dimen/activity_horizontal_margin"
8. android:paddingTop="@dimen/activity_vertical_margin"
9. tools:context=".PlayerActivity" >
10.
11. <ImageView
12. android:id="@+id/imageView1"
13. android:layout_width="190dp"
14. android:layout_height="275dp"
15. android:layout_alignParentTop="true"
16. android:scaleType="fitCenter"
17. android:src="@drawable/carrick" />
18.
19. <Button
20. android:id="@+id/button1"
21. android:layout_width="wrap_content"
22. android:layout_height="wrap_content"
23. android:layout_alignParentBottom="true"
24. android:layout_alignParentRight="true"
25. android:text="Next" />
26.
27. <TextView
28. android:id="@+id/goalTxt"
29. android:layout_width="wrap_content"
30. android:layout_height="wrap_content"
31. android:layout_alignParentLeft="true"
32. android:layout_below="@+id/nameTxt"
33. android:layout_marginTop="24dp"
34. android:text="Goals : "
35. android:textAppearance="?android:attr/textAppearanceLarge" />
36.
37. <TextView
38. android:id="@+id/textView1"
 39. android:layout_width="wrap_content"
40. android:layout_height="wrap_content"
41. android:layout_alignParentLeft="true"
42. android:layout_below="@+id/imageView1"
43. android:text="PLAYER PROFILE"
44. android:textAppearance="?android:attr/textAppearanceLarge" />
45.
46. <TextView
47. android:id="@+id/nameTxt"
48. android:layout_width="wrap_content"
49. android:layout_height="wrap_content"
50. android:layout_alignParentLeft="true"
51. android:layout_below="@+id/textView1"
52. android:layout_marginTop="17dp"
53. android:text="Name"
54. android:textAppearance="?android:attr/textAppearanceLarge" />
55.
56. </RelativeLayout>

SECTION 6: Our RowModel Layout

1. <?xml version="1.0" encoding="utf-8"?>

2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:orientation="horizontal" >
6.
7. <TextView
8. android:id="@+id/nameTv"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:layout_alignParentTop="true"
12. android:layout_marginLeft="28dp"
13. android:layout_toRightOf="@+id/imageView1"
14. android:text="Name"
15. android:textAppearance="?android:attr/textAppearanceMedium" />
16.
17. <TextView
18. android:id="@+id/goalsTv"
19. android:layout_width="wrap_content"
20. android:layout_height="wrap_content"
21. android:layout_alignBottom="@+id/imageView1"
22. android:layout_alignLeft="@+id/nameTv"
23. android:layout_marginBottom="16dp"
24. android:text="Goals"
25. android:textAppearance="?android:attr/textAppearanceSmall" />
 26.
27. <ImageView
28. android:id="@+id/imageView1"
29. android:layout_width="65dp"
30. android:layout_height="71dp"
31. android:layout_alignParentLeft="true"
32. android:layout_alignParentTop="true"
33. android:layout_marginLeft="26dp"
34. android:padding="10dp"
35. android:src="@drawable/herera" />
36.
37. </RelativeLayout>

SECTION 7 : Our Manifest

1. <?xml version="1.0" encoding="utf-8"?>

2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
3. package="com.example.listviewmasterdetail"
4. android:versionCode="1"
5. android:versionName="1.0" >
6.
7. <uses-sdk
8. android:minSdkVersion="19"
9. android:targetSdkVersion="19" />
10.
11. <application
12. android:allowBackup="true"
13. android:icon="@drawable/ic_launcher"
14. android:label="@string/app_name"
15. android:theme="@style/AppTheme" >
16. <activity
17. android:name="com.example.listviewmasterdetail.MainActivity"
18. android:label="@string/app_name" >
19. <intent-filter>
20. <action android:name="android.intent.action.MAIN" />
21.
22. <category android:name="android.intent.category.LAUNCHER" />
23. </intent-filter>
24. </activity>
25. <activity
26. android:name="com.example.listviewmasterdetail.PlayerActivity"
27. android:label="@string/title_activity_player" >
28. </activity>
29. </application>
30.
31. </manifest>