Expansion panels in Google Material design android

Question

I'm just looking for an example for extension panels in android (material design).

https://www.google.com/design/spec/components/expansion-panels.html

I know that we have an extensible list. But I need to show some additional layout when expanding each panel, similar to the representation of the Chord. How can we achieve this in android?

Answer 1

Try the extensible layout here . It may have the same behavior as Accordian.

Include it in your gradle using compile 'com.github.aakira:expandable-layout: 1.5.1@aar ' Example

 <LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/accordian_header" android:clickable="true"> <TextView android:id="@+id/accordian_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="16dp" android:textColor="#333" android:textStyle="bold" android:text="Title" /> <ImageButton android:id="@+id/down_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_margin="8dp" android:src="@android:drawable/arrow_down_float" /> </RelativeLayout> <com.github.aakira.expandablelayout.ExpandableLinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="14dp" android:paddingRight="14dp" android:paddingBottom="14dp" android:orientation="vertical" android:id="@+id/content" app:ael_expanded="false" app:ael_duration="500" app:ael_orientation="vertical"> <!--add your content here --> </com.github.aakira.expandablelayout.ExpandableLinearLayout> </LinearLayout> 

Then in your java code

 ExpandableLinearLayout content=(ExpandableLinearLayout) itemView.findViewById(R.id.content); RelativeLayout header=(RelativeLayout) itemView.findViewById(R.id.accordian_header); //to toggle content header.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { content.toggle(); } }); 

Hope this was helpful.