Android - Accordion over ListView

Create a accordion on android is never an easy task.
So, I have tried to develop such a component which may fulfill your requirement. This may not be the best way but one of the ways , for sure.

First add the Listview on your activity_main.xml ,so your activity_main.xml become look like as follows

<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"
    tools:context=".MainActivity"
    android:background="#bababa" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
         ></ListView>

</RelativeLayout>

Second create a layout xml and give it the name " crowview.xml". Put the bellow code in it :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <LinearLayout
        android:id="@+id/LL_sub"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <TextView
            android:id="@+id/text1a"
            android:layout_width="0px"
            android:layout_height="fill_parent"
            android:layout_gravity="left"
            android:layout_weight="0.1"
            android:gravity="left"
            android:textColor="#000000"
            android:textSize="14sp"
            android:textStyle="bold" />
        <TextView
            android:id="@+id/text1b"
            android:layout_width="0px"
            android:layout_height="fill_parent"
            android:layout_gravity="left"
            android:layout_weight="0.4"
            android:textColor="#000000"
            android:textSize="14sp"
            android:textStyle="bold" />
        <TextView
            android:id="@+id/text1c"
            android:layout_width="0px"
            android:layout_height="fill_parent"
            android:layout_gravity="left"
            android:layout_weight="0.4"
            android:textColor="#000000"
            android:textSize="14sp"
            android:textStyle="bold" />
        <TextView
            android:id="@+id/text1d"
            android:layout_width="0px"
            android:layout_height="fill_parent"
            android:layout_gravity="left"
            android:layout_weight="0.0"
            android:textColor="#000000"
            android:textSize="14sp"
            android:textStyle="bold" />
    </LinearLayout>
     <LinearLayout
        android:id="@+id/LL_hotel_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:visibility="gone"
        android:layout_marginLeft="35dp">
        <TextView
            android:id="@+id/text2"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:textColor="#ff0000"
            android:textSize="12sp"
            android:textStyle="italic"
            android:typeface="sans"
             />
        <TextView
            android:id="@+id/text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#0000ff"
            android:textSize="12sp"
            android:textStyle="italic"
            android:typeface="sans"
            />
    </LinearLayout>
</LinearLayout>

Open your MainActivity.java file create a ListView object such as
ListView LV_subagent;
Create a ArrayList which will stored the record and it will display over the ListView
ArrayList<HashMap<String,String>> list = new ArrayList<HashMap<String,String>>();

Create the instances for the ListView on the onCreate method
LV_subagent = (ListView) findViewById(R.id.listView1);

Next implements your MainActivity with OnItemClickListener for select the ListView Item

Create a function displayOutput which will display the output.
On the onCreate method call the displayOutput function then setOnItemClickListener for the
ListView.

The displayOutPut function as follwes

    public void displayOutput()
    {
            final    SimpleAdapter adapter = new SimpleAdapter(
                this,
                list,
                R.layout.crowview,
                new String[] {"rank","id","st","cc","model","company"},
                new int[] {R.id.text1a,R.id.text1b,R.id.text1c,R.id.text1d,R.id.text2, R.id.text3}
                );    
        populateList();
        LV_subagent.setAdapter(adapter);

    }
Here is another function name as populateList which contain the list data as follwes

HashMap map;
    private void populateList() {
        // TODO Auto-generated method stub
         map = new HashMap();
        map.put("rank", "1");
        map.put("id", "Apple iPhone");
        map.put("st", " 4S 16GB");
        map.put("cc", "");
        map.put("model", "Company:- Apple");
        map.put("company", "Price:- Rs. 46,900");
        list.add(map);
         map = new HashMap();
        map.put("rank", "2");
        map.put("id", "Samsung Galaxy");
        map.put("st", " Note 3");
        map.put("cc", "");
        map.put("model", "Company:- Samsung");
        map.put("company", "Price:- Rs. 46,400");
        list.add(map);
         map = new HashMap();
        map.put("rank", "3");
        map.put("id", "Samsung Galaxy");
        map.put("st", " Golden");
        map.put("cc", "");
        map.put("model", "Company:- Samsung");
        map.put("company", "Price:- Rs. 45,000");
        list.add(map);
         map = new HashMap();
        map.put("rank", "4");
        map.put("id", "Samsung Galaxy");
        map.put("st", " S3 I9300 32GB");
        map.put("cc", "");
        map.put("model", "Company:- Samsung");
        map.put("company", "Price:- Rs. 34,900");
        list.add(map);
         map = new HashMap();
        map.put("rank", "5");
        map.put("id", "Motorola Droid");
        map.put("st", " Razr");
        map.put("cc", "");
        map.put("model", "Company:- Motorola");
        map.put("company", "Price:- Rs. 20,900");
        list.add(map);
         map = new HashMap();
        map.put("rank", "6");
        map.put("id", "HTC Evo");
        map.put("st", " 3D");
        map.put("cc", "");
        map.put("model", "HTC");
        map.put("company", "Price:- Rs. 27,900");
        list.add(map);
         map = new HashMap();
        map.put("rank", "7");
        map.put("id", "HTC Desire");
        map.put("st", " 501 dual sim");
        map.put("cc", "");
        map.put("model", "Company:- HTC");
        map.put("company", "Price:- Rs. 16,100");
        list.add(map);
       
    }

Here I create a HashMap and add the data to it then add this HashMap object to the list object of an arraylist.

Finally write the below code on the onItemClick Listener

    View lastView;
    @Override
    public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {
        // TODO Auto-generated method stub
        try
        {
            for(int mm=0;mm<list.size();mm++)
            {
                if(mm==position)
                {
                    lastView=arg0.getChildAt(mm);
                    lastView.findViewById(R.id.LL_hotel_name).setVisibility(View.VISIBLE);
                    System.out.println("click val = "+mm);
                }
                else
                {    lastView=arg0.getChildAt(mm);
                    lastView.findViewById(R.id.LL_hotel_name).setVisibility(View.GONE);
                    System.out.println("non click val = "+mm);
               
                }
            }
        }
        catch(Exception e)
        {
            e.printStackTrace();
        }
       
    }

So the Output is as follows

Download source code Click here

Thank You