Hello guys.Today we discuss about Android Custom ListView Master Detail interface.

Our ListView shall have images and text.

SECTION 1 : Our MainActivity

This is our main activity.

It is our master view.

The master view will display a ListView with Player objects.

package com.example.listviewmasterdetail;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;

public class MainActivity extends Activity {

  ListView lv;

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

        lv=(ListView) findViewById(R.id.listView1);

        //ADAPTER
        CustomAdapter adapter=new CustomAdapter(this);
        lv.setAdapter(adapter);

        //EVENTS
        lv.setOnItemClickListener(new OnItemClickListener() {

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

        Intent i=new Intent(getApplicationContext(), PlayerActivity.class);

        //PASS INDEX OR POS
        i.putExtra("Position", pos);
        startActivity(i);

      }
    });

    }

SECTION 2 : Our DetailActivity

This is our detail activity.

This class will display the details of a single player object.

package com.example.listviewmasterdetail;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class PlayerActivity extends Activity {

  int pos=0;

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

    //GET PASSED DATA
    Intent i=getIntent();
    pos=i.getExtras().getInt("Position");

    //GET VIEWS
    final CustomAdapter adapter=new CustomAdapter(this);
    final ImageView img=(ImageView) findViewById(R.id.imageView1);
     final TextView nameTv=(TextView)findViewById(R.id.nameTxt);
     final TextView goalTv=(TextView) findViewById(R.id.goalTxt);

     //SET DATA
     img.setImageResource(adapter.images[pos]);
     nameTv.setText(adapter.names[pos]);
     goalTv.setText(adapter.goals[pos]);

     Button nextBtn=(Button) findViewById(R.id.button1);
     //NEXT CLICKED
     nextBtn.setOnClickListener(new OnClickListener() {

      @Override
      public void onClick(View arg0) {
        // TODO Auto-generated method stub

        int position=pos+1;

        //set data
        img.setImageResource(adapter.images[position]);
         nameTv.setText("Name: "+adapter.names[position]);
         goalTv.setText("Goals: "+adapter.goals[position]);

         if(!(position>=adapter.getCount()-1))
         {
           pos +=1;
         }else
         {
           pos = -1;
         }

      }
    });

  }

}

SECTION 3 : Our CustomAdapter:

This is our adapter class.

This class will derive from android.widget.BaseAdapter class.

As an adapter it will be responsible for first inflating our model.xml into a view object. Then it will bind data to that inflated view.

We will also listen to click events for that view then open the detail activity.

package com.example.listviewmasterdetail;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomAdapter extends BaseAdapter {

  private Context c;

  String[] names={"Michael Carrick","Diego Costa","Ander Herera","Juan Mata","Oscar","Aaron Ramsey","Wayne Rooney","Alexis Sanchez","Van Persie"};
    String[] goals={"3","25","9","11","9","11","14","18","13"};
    int[] images={R.drawable.carrick,R.drawable.costa,R.drawable.herera,R.drawable.mata,R.drawable.oscar,R.drawable.ramsey,R.drawable.rooney,R.drawable.sanchez,R.drawable.vanpersie};

;   public CustomAdapter(Context ctx) {
    // TODO Auto-generated constructor stub

    this.c=ctx;
  }

  @Override
  public int getCount() {
    // TODO Auto-generated method stub
    return names.length;
  }

  @Override
  public Object getItem(int pos) {
    // TODO Auto-generated method stub
    return names[pos];
  }

  @Override
  public long getItemId(int pos) {
    // TODO Auto-generated method stub
    return pos;
  }

  @Override
  public View getView(int pos, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub

    if(convertView==null)
    {
      LayoutInflater inflater=(LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView=inflater.inflate(R.layout.player, null);
    }

    //GET VIEWS
    TextView nameTxt=(TextView) convertView.findViewById(R.id.nameTv);
        TextView goalsTxt=(TextView) convertView.findViewById(R.id.goalsTv);
        ImageView img=(ImageView) convertView.findViewById(R.id.imageView1);

        //SET DATA
        nameTxt.setText(names[pos]);
        goalsTxt.setText(goals[pos]);
        img.setImageResource(images[pos]);

    return convertView;
  }

}

SECTION 4 : Our MainActivity Layout

This layout will be inflate into the UI for our Main activity.

This layout will contain a ListView.

<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" >

    <ListView
        android_id="@+id/listView1"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_layout_alignParentLeft="true"
        android_layout_alignParentTop="true" >

    </ListView>

</RelativeLayout>

SECTION 5 : Our DetailActivity Layout

This is our detail activity layout. It will contain an imageview, textview and button.

<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=".PlayerActivity" >

    <ImageView
        android_id="@+id/imageView1"
        android_layout_width="190dp"
        android_layout_height="275dp"
        android_layout_alignParentTop="true"
        android_scaleType="fitCenter"
        android_src="@drawable/carrick" />

    <Button
        android_id="@+id/button1"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentBottom="true"
        android_layout_alignParentRight="true"
        android_text="Next" />

    <TextView
        android_id="@+id/goalTxt"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentLeft="true"
        android_layout_below="@+id/nameTxt"
        android_layout_marginTop="24dp"
        android_text="Goals : "
        android_textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android_id="@+id/textView1"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentLeft="true"
        android_layout_below="@+id/imageView1"
        android_text="PLAYER PROFILE"
        android_textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android_id="@+id/nameTxt"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentLeft="true"
        android_layout_below="@+id/textView1"
        android_layout_marginTop="17dp"
        android_text="Name"
        android_textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

SECTION 6: Our RowModel Layout

This is our custom listview row model.
It defines how each Listview row will appear.
In this case we have an imageview and two textviews.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="horizontal" >

    <TextView
        android_id="@+id/nameTv"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentTop="true"
        android_layout_marginLeft="28dp"
        android_layout_toRightOf="@+id/imageView1"
        android_text="Name"
        android_textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android_id="@+id/goalsTv"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignBottom="@+id/imageView1"
        android_layout_alignLeft="@+id/nameTv"
        android_layout_marginBottom="16dp"
        android_text="Goals"
        android_textAppearance="?android:attr/textAppearanceSmall" />

    <ImageView
        android_id="@+id/imageView1"
        android_layout_width="65dp"
        android_layout_height="71dp"
        android_layout_alignParentLeft="true"
        android_layout_alignParentTop="true"
        android_layout_marginLeft="26dp"
        android_padding="10dp"
        android_src="@drawable/herera" />

</RelativeLayout>

SECTION 7 : Our Manifest

This is our android mainfest. Just make sure both our two activities are registered.

<?xml version="1.0" encoding="utf-8"?>
<manifest 
    package="com.example.listviewmasterdetail"
    android_versionCode="1"
    android_versionName="1.0" >

    <uses-sdk
        android_minSdkVersion="19"
        android_targetSdkVersion="19" />

    <application
        android_allowBackup="true"
        android_icon="@drawable/ic_launcher"
        android_label="@string/app_name"
        android_theme="@style/AppTheme" >
        <activity
            android_name="com.example.listviewmasterdetail.MainActivity"
            android_label="@string/app_name" >
            <intent-filter>
                <action android_name="android.intent.action.MAIN" />

                <category android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android_name="com.example.listviewmasterdetail.PlayerActivity"
            android_label="@string/title_activity_player" >
        </activity>
    </application>

</manifest>

Best Regards, Oclemy.