Custom expandable list in android

Question

I need to design the page like the image I attached below. I need to expand two views like accordion. I goggled but I am able to saw only the expandable list view. Can anyone advice me about how to custom two views in one expandable window.

Answer 1

If you have to expand only 2 views, then perhaps you can use a simple trick to achieve this without ExpandableListView. Just define the layout of every category and subcategory in a LinearLayout oriented vertically, with the the visibility of subcategories by default to be gone.

<LinearLayout
   android:id="@+id/category1"
   //....>
</LinearLayout>
<LinearLayout
   android:id="@+id/subcategory1"
   android:visibility="gone"
   //....>
</LinearLayout>

<LinearLayout
   android:id="@+id/category2"
   //....>
</LinearLayout>
<LinearLayout
   android:id="@+id/subcategory2"
   android:visibility="gone"
   //....>
</LinearLayout>

Set a click listener for each category, and when a category is clicked change its visibility: to visible if it's gone, and to gone if it's visible.

A pseudo cod will look like this:

ViewGroup category1 = findViewById(category1);
ViewGroup subcategory1 = findViewById(subcategory1);

category1.setOnClickListener(new OnClickListener(){
    public void onClick(){
        toogle();
    }
});

//......
void toogle(){
  if(subcategory1 is visible){
     subcategory1.visibility = "gone"
  }else{
     subcategory1.visibility = "visible"
  }
}

In case in the future the requirements will change and you'll have to add more categories, then perhaps the ExpandableListView would make more sense, but for now you can achieve the desired effect with this simple trick.

Answer 2

Lets use SlideExpandableListView library, here you can find all details: here