Expand ListItem on click to a new view

Question

I have a listview with some texts in it like this

and I want to expand each item to like this

I have seen this answer(How can I make a cell in a ListView in Android expand and contract vertically when it's touched?), here it doesn't changes to a new view, but just changes the height.

UPDATE:list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:clickable="true"
android:background="@drawable/list_selected">

<RelativeLayout

    android:id="@+id/relaboveline1"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/sidebar"
        android:layout_width="15dp"
        android:layout_height="match_parent"
        android:background="#4ED6CA" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:weightSum="100"
        android:layout_toRightOf="@+id/sidebar"
        android:layout_toEndOf="@+id/sidebar">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="20">

            <RelativeLayout
                android:id="@+id/cal"
                android:layout_width="60dp"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/date"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="22"
                    android:textColor="#FF8801"
                    android:textStyle="bold"
                    android:layout_centerHorizontal="true"
                    android:textSize="35sp"
                    android:layout_alignParentTop="true" />


                <TextView
                    android:id="@+id/month"
                    android:textColor="#FF8801"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_below="@+id/date"
                    android:textSize="20sp"
                    android:text="MAY" />

                <TextView
                    android:id="@+id/year"
                    android:textColor="#FF8801"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_below="@+id/month"
                    android:textSize="20sp"
                    android:text="2015" />
            </RelativeLayout>

            <View
                android:id="@+id/divider"
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:layout_toRightOf="@+id/cal"
                android:layout_toEndOf="@+id/cal"
                android:background="#DADADA" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="60">

            <RelativeLayout
                android:id="@+id/content"

                android:layout_width="200dp"
                android:paddingTop="5dp"

                android:paddingLeft="8dp"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:text="High School Graduation" />

                <TextView
                    android:id="@+id/contentdesc"
                    android:layout_width="wrap_content"
                    android:layout_marginTop="10dp"

                    android:layout_height="wrap_content"
                    android:layout_below="@+id/title"
                    android:text="@string/dummy" />
            </RelativeLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="20">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingTop="10dp"
               >

                <TextView

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    android:layout_centerHorizontal="true"
                    android:textStyle="bold"

                    android:text="5B"
                    android:id="@+id/classDiv" />

                <RelativeLayout
                    android:layout_below="@+id/classDiv"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_centerHorizontal="true">

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_centerInParent="true"
                        android:src="@drawable/star_yellow" />
                </RelativeLayout>
            </RelativeLayout>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

<View
    android:id="@+id/line2"
    android:layout_width="match_parent"
    android:layout_height="0.5dp"
    android:layout_below="@+id/relaboveline1"
    android:background="#DADADA" />

Answer 1

You can use ExpandableListView:

1. You define a custom layout for the child (the details when you click on the row)

2. You define an public class ExpandableAdapter extends BaseExpandableListAdapter

3. Override the method

   public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) { .... }

   where you implement your detail layout (child layout).

4. Override the method

   public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) { ... }

   where you implement the layout like the ListView.

5. Set the custom adapter in your ExpandableListView instance

If you want to have more info give a look at my post here http://www.survivingwithandroid.com/2013/01/android-expandablelistview-baseexpandablelistadapter.html

Answer 2

Have you tried ExpandableListView with only one child view for each group view? then you can expand and collapse rows as you want.