Home Android ListView Android Custom Expandable ListView with Images and Text

Android Custom Expandable ListView with Images and Text

Android Custom ExpandableListView With Images and Text Tutorial So yes today we talk about custom expandable ListViews with images and text.Expandable ListViews is a type of ListViews with two layers,the group and child layers.It can have multiple groups of course.Then a single group can further have multiple children. If you prefer video tutorial : SECTION 1 : Our MainActivity class

package com.tutorials.expandable_view;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.Toast;

public class MainActivity extends Activity {

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

        //THE EXPANDABLE
        ExpandableListView elv=(ExpandableListView) findViewById(R.id.expandableListView1);

        final ArrayList<Team> team=getData();

        //CREATE AND BIND TO ADAPTER
        CustomAdapter adapter=new CustomAdapter(this, team);
        elv.setAdapter(adapter);

        //SET ONCLICK LISTENER
        elv.setOnChildClickListener(new OnChildClickListener() {

      @Override
      public boolean onChildClick(ExpandableListView parent, View v, int groupPos,
          int childPos, long id) {

                   Toast.makeText(getApplicationContext(), team.get(groupPos).players.get(childPos), Toast.LENGTH_SHORT).show();

        return false;
      }
    });
    }

    //ADD AND GET DATA

    private ArrayList<Team> getData()
    {

    	Team t1=new Team("Man Utd");
        t1.players.add("Wayne Rooney");
        t1.players.add("Van Persie");
        t1.players.add("Ander Herera");
        t1.players.add("Juan Mata");

        Team t2=new Team("Arsenal");
        t2.players.add("Aaron Ramsey");
        t2.players.add("Mesut Ozil");
        t2.players.add("Jack Wilshere");
        t2.players.add("Alexis Sanchez");

        Team t3=new Team("Chelsea");
        t3.players.add("John Terry");
        t3.players.add("Eden Hazard");
        t3.players.add("Diego Costa");
        t3.players.add("Oscar");

        ArrayList<Team> allTeams=new ArrayList<Team>();
        allTeams.add(t1);
        allTeams.add(t2);
        allTeams.add(t3);

    	return allTeams;
    }

}

SECTION 2 : Our CustomAdapter class.

package com.tutorials.expandable_view;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomAdapter extends BaseExpandableListAdapter {

  private Context c;
  private ArrayList<Team> team;
  private LayoutInflater inflater;

  public CustomAdapter(Context c,ArrayList<Team> team)
  {
    this.c=c;
    this.team=team;
    inflater=(LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  }

  //GET A SINGLE PLAYER
  @Override
  public Object getChild(int groupPos, int childPos) {
    // TODO Auto-generated method stub
    return team.get(groupPos).players.get(childPos);
  }

  //GET PLAYER ID
  @Override
  public long getChildId(int arg0, int arg1) {
    // TODO Auto-generated method stub
    return 0;
  }

  //GET PLAYER ROW
  @Override
  public View getChildView(int groupPos, int childPos, boolean isLastChild, View convertView,
      ViewGroup parent) {

    //ONLY INFLATER XML ROW LAYOUT IF ITS NOT PRESENT,OTHERWISE REUSE IT

    if(convertView==null)
    {
      convertView=inflater.inflate(R.layout.player, null);
    }

    //GET CHILD/PLAYER NAME
    String  child=(String) getChild(groupPos, childPos);

    //SET CHILD NAME
    TextView nameTv=(TextView) convertView.findViewById(R.id.textView1);
    ImageView img=(ImageView) convertView.findViewById(R.id.imageView1);

    nameTv.setText(child);

    //GET TEAM NAME
    String teamName= getGroup(groupPos).toString();

    //ASSIGN IMAGES TO PLAYERS ACCORDING TO THEIR NAMES AN TEAMS
    if(teamName=="Man Utd")
    {
      if(child=="Wayne Rooney")
      {
        img.setImageResource(R.drawable.rooney)	;
      }else if(child=="Ander Herera")
      {
        img.setImageResource(R.drawable.herera)	;
      }else if(child=="Van Persie")
      {
        img.setImageResource(R.drawable.vanpersie)	;
      }else if(child=="Juan Mata")
      {
        img.setImageResource(R.drawable.mata)	;
      }
    }else if(teamName=="Chelsea")
    {
      if(child=="John Terry")
      {
        img.setImageResource(R.drawable.terry)	;
      }else if(child=="Eden Hazard")
      {
        img.setImageResource(R.drawable.hazard)	;
      }else if(child=="Oscar")
      {
        img.setImageResource(R.drawable.oscar)	;
      }else if(child=="Diego Costa")
      {
        img.setImageResource(R.drawable.costa)	;
      }
    }else if(teamName=="Arsenal")
    {
      if(child=="Jack Wilshere")
      {
        img.setImageResource(R.drawable.wilshere)	;
      }else if(child=="Alexis Sanchez")
      {
        img.setImageResource(R.drawable.sanchez)	;
      }else if(child=="Aaron Ramsey")
      {
        img.setImageResource(R.drawable.ramsey)	;
      }else if(child=="Mesut Ozil")
      {
        img.setImageResource(R.drawable.ozil)	;
      }
    }

    return convertView;
  }

  //GET NUMBER OF PLAYERS
  @Override
  public int getChildrenCount(int groupPosw) {
    // TODO Auto-generated method stub
    return team.get(groupPosw).players.size();
  }

  //GET TEAM
  @Override
  public Object getGroup(int groupPos) {
    // TODO Auto-generated method stub
    return team.get(groupPos);
  }

  //GET NUMBER OF TEAMS
  @Override
  public int getGroupCount() {
    // TODO Auto-generated method stub
    return team.size();
  }

  //GET TEAM ID
  @Override
  public long getGroupId(int arg0) {
    // TODO Auto-generated method stub
    return 0;
  }

  //GET TEAM ROW
  @Override
  public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {

    //ONLY INFLATE XML TEAM ROW MODEL IF ITS NOT PRESENT,OTHERWISE REUSE IT
        if(convertView == null)
        {
          convertView=inflater.inflate(R.layout.teams, null);
        }

        //GET GROUP/TEAM ITEM
        Team t=(Team) getGroup(groupPosition);

        //SET GROUP NAME
        TextView nameTv=(TextView) convertView.findViewById(R.id.textView1);
        ImageView img=(ImageView) convertView.findViewById(R.id.imageView1);

        String name=t.Name;
        nameTv.setText(name);

        //ASSIGN TEAM IMAGES ACCORDING TO TEAM NAME

        if(name=="Man Utd")
        {
          img.setImageResource(R.drawable.manutd);
        }else if(name=="Chelsea")
        {
          img.setImageResource(R.drawable.chelsea);
        }else if(name=="Arsenal")
        {
          img.setImageResource(R.drawable.arsenal);
        }

        //SET TEAM ROW BACKGROUND COLOR
        convertView.setBackgroundColor(Color.LTGRAY);

    return convertView;
  }

  @Override
  public boolean hasStableIds() {
    // TODO Auto-generated method stub
    return false;
  }

  @Override
  public boolean isChildSelectable(int arg0, int arg1) {
    // TODO Auto-generated method stub
    return true;
  }

}

SECTION 3 : Our POJO

package com.tutorials.expandable_view;

import java.util.ArrayList;

public class Team {

  //PROPERTIES OF A SINGLE TEAM
    public String Name;
    public String Image;
    public ArrayList<String> players=new ArrayList<String>();

    public Team(String Name)
    {
      this.Name=Name;
    }

    @Override
    public String toString() {
      // TODO Auto-generated method stub
      return Name;
    }
}

SECTION 4 : Our Layouts Our ActivityMain.xml Layout

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

    <ExpandableListView
        android:id="@+id/expandableListView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >
    </ExpandableListView>

</RelativeLayout>

Our Team XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:src="@drawable/arrow" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Team"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

Our Player XML

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

    <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="24dp"
        android:src="@drawable/mata" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="14dp"
        android:layout_marginTop="21dp"
        android:layout_toRightOf="@+id/imageView1"
        android:text="player"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

Our Manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tutorials.expandable_view"
    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.tutorials.expandable_view.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>
    </application>

</manifest>
Android Custom Expandable ListViews With Images and Text

Android Custom Expandable ListViews With Images and Text

 

You may also like

Leave a Comment