Android Expandable ListView – Images and Text

Java MySQL Database Template
Android RSS : GridView- Downlaod,Parse,Show Headlines With Images and Text
Android Activity – Call,Pass ,Retrieve Bundle Data

Android Expandable ListView – Images and Text



Rating : 5/5 (2)




Introduction

Android ExpandableListView tutorial with images and text tutorial.

Everyone knows and loves android listviews. However, listviews have a more powerful sister known as expandablelistviews. These are views that show items in a vertically scrolling two-level list. This is powerful when you want to group items in a list. The items groups can be expanded to show their children, which are also lists themselves.

ExpandableListViews should not be confused with accordions. They are lists inside list items.
ExpandableListView items come from ExpandableListAdapter.

ExpandableListViews are derive from ListViews, hence having the flexibility and capability of Listviews themselves. They are simply ListViews nested inside ListView Items. They were added to android in API Level 1, so have actually been around for along time even though most people are obsessed with ListViews and RecyclerViews.

In this tutorial, we look at ExpandableListView with images and text.

You can find more details about ExpanableListViews here.

Screenshot

  • Here’s the screenshot of the project.

ExpandableListView Android

Android ExpandableListView

Common Questions this example explores

  • Android ExpandableListView example.
  • Show expandableListView with images and text in android.
  • Android Eclipse tutorial.
  • Group items with expandableListView.

Tools Used

This example was written with the following tools:

  • Windows 7
  • Eclipse IDE

Source Code

Lets have a look at the source code.

MainActivity.javaCustomAdapter.javaTeam.javaActivityMain.xmlteam.xmlplayer.xmlandroidmanifest.xmlVideo/Demo
  • Our launcher activity.

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;
    }
}
  • This is our adapter class.It derives from BaseExpandableListAdapter.

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;
  }
}
  •  This is the definition of a team object.
  • It specifies the teams' properties.

 

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;
    }
}
  •  Our main layout.

 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>
  • The xml definition of team which is our group in the expandableListView.

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>
  • The xml definition of player which is our child in the expandableListView.

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 ExpandableListViews - With Images and Text

How To Run

  1. This project was created by Eclipse.
  2. Therefore just copy the code and use in your project in android studio, it's still android anyway and expandableListview is the same regardless of the IDE. So copy paste the code to your android studio project.

More

YouTube

  • Visit our channel for more examples like these.

Facebook

Oclemy,Cheers.

 



Rating :

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    nineteen − thirteen =

    COMMENTS