androidkotlinviewgroupexpandablecollapsable

Android custom expandable/collapsable view with child elements

I am working on a custom expandable view in android. The goal is that I can add child elements in the xml files and they will be expanded and collapsed when the user clicks the expand/collapse button as on the picture below.

enter image description here

The expananding/collapsing works fine, but I cannot find out how to handle the child views.

In the constructor of my custom view, I inflate an xml layout, and I have a linear layout inside, in which i would like to put the child elements.

I tried using the solution suggested in the answer to the question here.

But I get StackOverflowError, and about a hundres of these: "at android.view.ViewGroup.resetResolvedLayoutDirection(ViewGroup.java:7207)", even if I try to use the solution in the second aswer, using a while loop instead of the for.

Here is the kotlin class of my view:

    class CollapsableCategoryView(context: Context, attrs: AttributeSet) : LinearLayout(context, attrs) {

      /** Declare some variables */
      private var titleString : String = ""
      private var subtitleString : String = ""
      private var isExpaneded : Boolean = false

      /** The required views */
      private lateinit var ivIcon : ImageView
      private lateinit var llExpandableContent : LinearLayout

      init {

        /** Receive the attributes */
        context.theme.obtainStyledAttributes(
            attrs,
            R.styleable.CollapsableCategoryView,
            0, 0
        ).apply {
            try {
                titleString = getString(R.styleable.CollapsableCategoryView_categoryTitle) ?: ""
                subtitleString = getString(R.styleable.CollapsableCategoryView_categorySubtitle) ?: ""

            } finally {
                recycle()
            }
        }

        /** Inflate the layout */
        val root : View = View.inflate(context, R.layout.collapsable_task_category, this)

        /** Find the views we need*/
        ivIcon = root.findViewById(R.id.ivCollapsableCategoryIcon) as ImageView
        llExpandableContent = root.findViewById(R.id.llExpandableContent) as LinearLayout

        /** onClickListener for the icon */
        ivIcon.setOnClickListener {
            toggleExpanded()
        }
      }

      override fun onFinishInflate() {

        for(i in 0..childCount){
            var view : View = getChildAt(i)
            removeViewAt(i)
            llExpandableContent.addView(view)
        }

        super.onFinishInflate()

      }

      /** This method is called when user clicks the expand/collapse button */
      fun toggleExpanded(){
        isExpaneded = !isExpaneded
        if(isExpaneded)
        {
            ivIcon.setImageResource(R.drawable.ic_collapse)
            llExpandableContent.visibility = VISIBLE
        }else{
            ivIcon.setImageResource(R.drawable.ic_expand)
            llExpandableContent.visibility = GONE
        }
      }
    }

I read somewhere else about a different solution, which also doesn't work. That solution suggests to ovverride the addView() method something like this:

override fun addView(child: View?, index: Int, params: ViewGroup.LayoutParams?) {
        llExpandableContent.addView(child, params)
    }

But if I do so, I get an exception that the lateinint var llExpandableContent is never initialized.

I have also seen solutions that override onMeasure() method but that doesn't seem to be the right approach for me to this problem, since I don't wan't to lay my views out in a special way, just want to add them in a linear layout.

Here is the xml resource file for the layout of the custom view:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/collapsable_category_corner_radius"
        android:background="@drawable/bg_collapsable_category_top"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/clCollapsableCategoryMain"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/bg_collapsable_category_middle">

        <ImageView
            android:id="@+id/ivCollapsableCategoryIcon"
            android:layout_width="38dp"
            android:layout_height="38dp"
            android:layout_marginStart="8dp"
            android:src="@drawable/ic_expand"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/clCollapsableCategoryTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="Title"
            app:layout_constraintStart_toEndOf="@+id/ivCollapsableCategoryIcon"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/clCollapsableCategorySubtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Subtitle"
            app:layout_constraintStart_toEndOf="@+id/ivCollapsableCategoryIcon"
            app:layout_constraintTop_toBottomOf="@+id/clCollapsableCategoryTitle" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <LinearLayout
        android:id="@+id/llExpandableContent"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/bg_collapsable_category_middle"
        android:visibility="gone">
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/collapsable_category_corner_radius"
        android:background="@drawable/bg_collapsable_category_bottom"/>

</LinearLayout>

And here is how I am trying to use my custom view in a layout xml file:

<com.test.test.util.CollapsableCategoryView
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Child view 1"/>

</com.test.test.util.CollapsableCategoryView>

Does anyone know how to solve this problem? Thank you very much in advance for any help. Best regards, Agoston

Solution

  • So I found the solution at another question, which I cannot find again... But this solution works like a charm :)

    override fun addView(child: View?, index: Int, params: ViewGroup.LayoutParams?) {
    if(llExpandableContent == null){
        super.addView(child, index, params)
    }else{
        llExpandableContent?.addView(child, index, params)
    }
}

    Hope it will help someone else at some point :)