Click to expand the ListItem to the new View
I have a ListView like this with some text
And I want to expand each project to like this
I saw this answer (How can I make a cell in a ListView in Android expand and contract vertically when it’s touched?), here it has not changed to the new View, only changed 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" />
Solution
You can use ExpandableListView:
- You define a custom layout for child (details when you click the row).
You define a
public class ExpandableAdapter extends BaseExpandableListAdapter
Overriding methods
public View getChildView(int groupPosition, int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {
....
}Where to implement detailed layouts (sub-layouts).
Overriding methods
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent) {
...
}Implement a layout similar to a ListView in it.
Set up a custom adapter in your ExpandableListView instance
If you want to know more, check out my post here http://www.survivingwithandroid.com/2013/01/android-expandablelistview-baseexpandablelistadapter.html