Expansion panels in Google Material design android

Question

I am just looking for an example for expansion panels in android (Material design).

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

I know we have expandable listview. But, I need to show some additional layout view on expanding each panel similar to Accordian view. How can we achieve this in android?

Answer 1

Try the expandable layout here . It can have the same behaviour as an Accordian

Include it to your gradle with 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 that was helpful.