/ Menu

Show a list of Button/ImageButton widgets which can be collapsed or expanded

Show a list of Button/ImageButton widgets which can be collapsed or expanded


ExpandableSelector is an Android library created to show a list of Button/ImageButton widgets inside a animated container which can be collapsed or expanded.



To use ExpandableSelector in your application you have to follow this steps:

  • 1 - Add ExpandableSelector to your layout:


  • 2 - During your Activity/Fragment creation lifecycle create a list of ExpandableItem instances and configure them to be used inside your ExpandableSelector widget:

private void initializeSizesExpandableSelector() {
    ExpandableSelector sizesExpandableSelector = (ExpandableSelector) findViewById(R.id.es_sizes);
    List<ExpandableItem> expandableItems = new ArrayList<ExpandableItem>();
    expandableItems.add(new ExpandableItem("XL"));
    expandableItems.add(new ExpandableItem("L"));
    expandableItems.add(new ExpandableItem("M"));
    expandableItems.add(new ExpandableItem("S"));

  • 3 - To be able to listen the animation events configure a ExpandableSelectorListener instance:

private void configureExpandableSelectorListener() {

    sizesExpandableSelector.setExpandableSelectorListener(new ExpandableSelectorListener() {
          @Override public void onCollapse() {
            //Do something here

          @Override public void onExpand() {
            //Do something here

          @Override public void onCollapsed() {
            //Do something here

          @Override public void onExpanded() {
            //Do something here

  • 4 - To be able to listen the click events configure a OnExpandableItemClickListener instance:

private void configureExpandableSelectorClickListener() {

    sizesExpandableSelector.setOnExpandableItemClickListener(new OnExpandableItemClickListener() {
          @Override public void onExpandableItemClickListener(int index, View view) {
             //Do something here


You can easily customize the appearance of your ExpandableItem instances. Just asign a value to expandableItemSyle attribute in your theme and make it reference a custom style.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="expandableItemStyle">@style/ExpandableItemStyle</item>

<style name="ExpandableItemStyle">
    <item name="android:layout_height">@dimen/item_size</item>
    <item name="android:layout_width">@dimen/item_size</item>
    <item name="android:background">@drawable/bg_item_with_title</item>
    <item name="android:layout_margin">@dimen/item_margin</item>
    <item name="android:textColor">@color/gray</item>
    <item name="android:textSize">@dimen/item_text_size</item>

Remember that declaring a ExpandableItemStyle as described before with the layout height and width is mandatory to avoid inflation errors.

The resources you can show in the Button/ImageButton widgets automatically added to ExpandableSelector are:

  • Background resource identifier configured as Button/ImageButton background.
  • Resource identifier configured as ImageButton image source.
  • Title configured as Button text.

All this information will be provided to the ExpandableSelector inside a List<ExpandableItem> object created by the library user.

Some extra configuration parameters can be provided from the XML like styleable attributes:


The attributes you can configure are:

  • expandable_selector:hide_background_if_collapsed: Changes the background associated to the ExpandableSelector widget to a transparent one while the widget is collapsed.
  • expandable_selector:hide_first_item_on_collapse: Changes the first item visibility to View.INVISIBLE when the ExpandableSelector is collapsed.
  • expandable_selector:expand_interpolator: Changes the interpolator used in the expand animation (applies to the items), you can use an interpolator available in the platform, or create your own.
  • expandable_selector:collapse_interpolator: Changes the interpolator used in the collapse animation (applies to the items).
  • expandable_selector:container_interpolator: Changes the interpolator used in the expand & collapse animation (applies to the container)
  • expandable_selector:animation_duration: Changes the animation duration in milliseconds to the one indicated.

Add it to your project

Add ExpandableSelector dependency to your build.gradle file

    compile 'com.karumi:expandableselector:1.0.0'

or to your pom.xml if you are using Maven instead of Gradle