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

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

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.

About Me.

After completing his Software Engineering bachelors program, Oclemy(Clement Ochieng) these days is a man of two lives. At day he works for a startup in Nairobi, Kenya. At night he works tirelessly on building ProgrammingWizards TV, a tv channel for student coders and this website to help share the source code. In between he practices Meditation and Self actualization to help him keep balance. He also likes going for long solo walks to connect more with nature.