CollapseAndExpandActivity

Step 1: 
// view_header_layout
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f9f9f9">


    <com.dunst.flutter.utils.MerriweatherTextView
        android:id="@+id/header_text"
        android:layout_width="wrap_content"
        android:textSize="14sp"
        android:layout_height="48dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="About us"
        android:textColor="#544957" />


    <ImageView
        android:id="@+id/side_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true" />

    <ImageView
        android:src="@drawable/side_arrow"
        android:id="@+id/side_arrow_dup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>


//In your Activity 
    private ExpandableLayout first;
    ImageView arrow1,arrow1Dupe;
    
// In your on create
first = (ExpandableLayout) findViewById(R.id.fourth);
arrow1 = (ImageView) first.getHeaderLayout().findViewById(R.id.side_arrow);
arrow1Dupe = (ImageView) first.getHeaderLayout().findViewById(R.id.side_arrow_dup);


//And this is the logic that simply fabulously works awesome for me.

first.getHeaderLayout().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!first.isOpened()) {
                    arrow1Dupe.setVisibility(arrow1Dupe.GONE);
                    first.show();
                    arrow1.setBackgroundResource(R.drawable.down_arrow);
                    Log.d("expand", "opened");
                } else {
                    first.hide();
                    arrow1.setBackgroundResource(R.drawable.side_arrow);
                    Log.d("expand", "closed");
                }
            }
        });

If this is not doing what ever you wanted just ping me lets solve together programatically

This above logic works fine for those who are looking for collapse and expand icon using ExpandableLayout.

it doesnt work. If I try this the expanding of the layout doesnt work anymore because the onclick listener has been overwritten.

OK I just found the solution that actually works (and you only need one ImageView and not two in my case):

mExpandableLayout.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (mExpandableLayout.isOpened()) {
            mExpandableLayout.hide();
            mExpandableHeaderLayoutRightIcon.setImageResource(R.drawable.ic_expand_more_black_36dp);
        } else {
            mExpandableLayout.show();
            mExpandableHeaderLayoutRightIcon.setImageResource(R.drawable.ic_expand_less_black_36dp);
        }

    }
});

Great :)

Could this be used to expand and collapse TextView by clicking on an ImageView?