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

Overview

Karumi logo ExpandableSelector Build Status Maven Central Android Arsenal

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

Screenshots

Demo Screenshot

Usage

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

  • 1 - Add ExpandableSelector to your layout:
 <com.karumi.expandableselector.ExpandableSelector
      android:id="@+id/es_sizes"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>
  • 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"));
    sizesExpandableSelector.showExpandableItems(expandableItems);
}
  • 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
          }
        });
}

Customization

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>

<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>
</style>

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:

  <com.karumi.expandableselector.ExpandableSelector
      xmlns:expandable_selector="http://schemas.android.com/apk/res-auto"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      expandable_selector:hide_background_if_collapsed="true"
      expandable_selector:hide_first_item_on_collapse="true"
      expandable_selector:expand_interpolator="@android:anim/accelerate_interpolator"
      expandable_selector:collapse_interpolator="@android:anim/decelerate_interpolator"
      expandable_selector:container_interpolator="@android:anim/accelerate_decelerate_interpolator"
      expandable_selector:animation_duration="100">

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

dependencies{
    compile 'com.karumi:expandableselector:1.0.0'
}

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

<dependency>
    <groupId>com.karumi</groupId>
    <artifactId>expandableselector</artifactId>
    <version>1.0.0</version>
    <type>aar</type>
</dependency>

Do you want to contribute?

Please, do it! We'd like to improve this library with your help :)

License

Copyright 2015 Karumi

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  •  Binary XML file line #18: You must supply a layout_width attribute.

    Binary XML file line #18: You must supply a layout_width attribute.

    Hi, I just copied from your instruction and then compiled. I've got some error message like this below

    Caused by: java.lang.UnsupportedOperationException: Binary XML file line #18: You must supply a layout_width attribute. at android.content.res.TypedArray.getLayoutDimension(TypedArray.java:709) at android.view.ViewGroup$LayoutParams.setBaseAttributes(ViewGroup.java:6889) at android.view.ViewGroup$MarginLayoutParams.(ViewGroup.java:7071) at android.widget.FrameLayout$LayoutParams.(FrameLayout.java:446) at android.widget.FrameLayout.generateLayoutParams(FrameLayout.java:386) at android.widget.FrameLayout.generateLayoutParams(FrameLayout.java:385) at android.view.LayoutInflater.inflate(LayoutInflater.java:502) at android.view.LayoutInflater.inflate(LayoutInflater.java:423)  at com.karumi.expandableselector.ExpandableSelector.initializeButton(ExpandableSelector.java:277)  at com.karumi.expandableselector.ExpandableSelector.renderExpandableItems(ExpandableSelector.java:231)  at com.karumi.expandableselector.ExpandableSelector.showExpandableItems(ExpandableSelector.java:92)  at indie.kcalulator.ListsActivity.initializeSizesExpandableSelector(ListsActivity.java:84)  at indie.kcalulator.ListsActivity.onCreate(ListsActivity.java:69)  at android.app.Activity.performCreate(Activity.java:6237)  at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1107)  at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2369)  at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2476)  at android.app.ActivityThread.-wrap11(ActivityThread.java)  at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344)  at android.os.Handler.dispatchMessage(Handler.java:102)  at android.os.Looper.loop(Looper.java:148)  at android.app.ActivityThread.main(ActivityThread.java:5417)  at java.lang.reflect.Method.invoke(Native Method)  at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616) 

    Could you tell me how do I fix this because this error message told me that your code is not declare a layout_width attribute on android view.

    I suppose that tools:ignore="RequiredSize" in expandable_item_button layout doesn't work

    Thanks in advance.

    opened by rachanon 13
  • namespace expandable_selector

    namespace expandable_selector

    Hi everyone! I can access to expandable_selector namespace from the library sample. However, the same sample used in on a new project is not working as expected. Importing the library using gradle instructions, this namespace is inaccesible.

    opened by jrodriguezpuigvert 8
  • Custom interpolators by resource Id

    Custom interpolators by resource Id

    I have added the ability to choose custom interpolators (from the platform or defined by the user). If no interpolator is defined, the library uses the ones you guys have chosen as default.

    Do you want me to edit the sample?

    opened by aconsuegra 5
  • Update README.md with a layout style configuration disclaimer to fix #7 and #8

    Update README.md with a layout style configuration disclaimer to fix #7 and #8

    As some of our users are facing some problems related to the project configuration and the expandable item style I've added a bold disclaimer to clarify how to use this library. Fix #7 #8

    opened by pedrovgs 0
  • Error:Execution failed for task ':app:processDebugManifest'.

    Error:Execution failed for task ':app:processDebugManifest'.

    Error:Execution failed for task ':app:processDebugManifest'.

    Manifest merger failed : uses-sdk:minSdkVersion 11 cannot be smaller than version 14 declared in library [com.karumi:expandableselector:1.0.0] ...Mosaic... \app\build\intermediates\exploded-aar\com.karumi\expandableselector\1.0.0\AndroidManifest.xml Suggestion: use tools:overrideLibrary="com.karumi.expandableselector" to force usage

    opened by mrzhqiang 0
  • how can i modify your ExpandableItem name?

    how can i modify your ExpandableItem name?

    how can i modify your ExpandableItem name when i open weiget? i use code below this line: es_selector.setExpandableSelectorListener(new ExpandableSelectorListener() { @Override public void onCollapse() { Logger.e("ware"," adadad" ); es_selector.getExpandableItem(0).setResourceId(R.string.choose_type); }

            @Override
            public void onExpand()
            {
                Logger.e("ware"," adadad" );
                es_selector.getExpandableItem(0).setResourceId(R.string.narmal);
            }
    
            @Override
            public void onCollapsed()
            {Logger.e("ware"," adadad" );
                es_selector.getExpandableItem(0).setResourceId(R.string.choose_type);
            }
    
            @Override
            public void onExpanded()
            {Logger.e("ware"," adadad" );
                es_selector.getExpandableItem(0).setResourceId(R.string.narmal);
            }
        });
    

    i can see Log message but the ExpandableItem name didn't modifed,if you have spare times,tell me please!

    opened by kscMaster 0
  • Curve

    Curve

    Hello,

    First to tell you thanks for your great library. Just yesterday I made similar thing in a project of mine, but yours is almost complete.

    As I saw you will like to include directions (down,left,up and right) which is great. I think the library will be great if there is also a curve expanding/collapsing involved. I would like to contribute and make an PR with this functionality.

    So my question is this:

    Do you thing this is good idea to add to the library? (I don't want to waste my time)

    enhancement 
    opened by geftimov 1
  • Add support to expand/collapse the widget in different directions.

    Add support to expand/collapse the widget in different directions.

    In order to improve the library usage we have to add a new capability to the library, to be able to configure the expand/collapse direction from the layout configuration.

    enhancement 
    opened by pedrovgs 0
Releases(1.1.0)
Owner
Karumi
Karumi, the Rock Solid Code studio
Karumi
Custom UI control for android which is showing data as a segments and a value inside them.

Segmented Bar View for Android Custom UI control for android which is showing data as a segments and a value inside them. Screenshots Install From rep

GSPD 354 Nov 10, 2022
Parallax everywhere is a library with alternative android widgets with parallax effects.

Parallax Everywhere# Parallax everywhere (PEW) is a library with alternative android views using parallax effects. Demo You can try the demo app on go

fmSirvent 712 Nov 14, 2022
Android library for creating an expandable to full screen view inside a viewgroup composition.

Expandable Panel Android Library Check ExpandablePanel Demo application on GooglePlay: Details This Android library implements the expand by sliding l

Jorge Castillo 422 Nov 10, 2022
Bootstrap style widgets for Android, with Glyph Icons

Android-Bootstrap Android Bootstrap is an Android library which provides custom views styled according to the Twitter Bootstrap Specification. This al

Bearded Hen 7.3k Jan 3, 2023
Material Design implementation for Android 4.0+. Shadows, ripples, vectors, fonts, animations, widgets, rounded corners and more.

Carbon Material Design implementation for Android 4.0 and newer. This is not the exact copy of the Lollipop's API and features. It's a custom implemen

null 3k Dec 30, 2022
A set of widgets to create smooth slideshows with ease.

Android SlideShow Widget A set of widgets to create smooth slide shows with ease. The slide show components are fully customizable and are not limited

MarvinLabs 211 Nov 20, 2022
Floating label input widgets

Android Floating Label Widgets A set of input widgets with a hint label that floats when input is not empty. Demo A demo of the widget is worth a thou

MarvinLabs 450 Nov 25, 2022
Drag and drop to reorder items in a list, grid or board for Android. Based on RecyclerView. Also supports swiping items in a list.

DragListView DragListView can be used when you want to be able to re-order items in a list, grid or a board. It also supports horizontal swiping of it

Magnus Woxblom 658 Nov 30, 2022
FogView is a android library that can show fog on any layout and the fog removes when user rubs it.

Fog View Android Library Min SDK 8 (Android 2.2–2.2.3 Froyo) Screnshots How to use If you want use this library, you can download project and import i

Chetan Kaushik 631 Dec 31, 2022
A custom view, in which device contact list is displayed

Getting Started This repository contains a custom view, in which device contact list is displayed Implementation Go to Settings.gradle, inside reposit

Ankit Kumar 2 May 7, 2022
A crypto currency wallet UI/UX template created using Android's jetpack compose.

CryptoWalletTemplate A crypto currency wallet UI/UX template created using Android's jetpack compose. High definition demo on youtube Youtube video de

prosper ekwerike 5 Feb 6, 2022
SwipeBack for Android Activities to do pretty the same as the android "back-button" will do, but in a really intuitive way by using a swipe gesture

SwipeBack SwipeBack is for Android Activities to do pretty the same as the android "back-button" will do, but in a really intuitive way by using a swi

Hannes Dorfmann 697 Dec 14, 2022
Created a Tinder like Card Deck & Captain Train like Toolbar

TinderView Created A Simple and Beautiful Tinder like card deck & Captain Train like toolbar. This is heavily based on AndroidSwipeableCardStack, wenc

Aradh Pillai 328 Jun 18, 2022
NeoPOP was created with one simple goal; to create the next generation of a beautiful, affirmative design system

NeoPop is CRED's inbuilt library for using NeoPop components in your app

CRED 254 Dec 29, 2022
This project created just for help developer who want to and ability of read VISA, UNION PAY, HUMO, ATTO and some other cards data read.

If you enjoy my content, please consider supporting what I do. Thank you. By me a Coffee To get a Git project into your build: Step 1. Add the JitPack

Fozilbek Imomov 1 Oct 15, 2022
A swipe button for Android with a circular progress bar for async operations

ProSwipeButton A swipe button for Android with a circular progress bar for async operations Gradle dependencies { ... compile 'in.shadowfax:pr

Shadowfax Technologies 340 Nov 13, 2022
Squishy button effect with kotlin

Squishy Usage Add squishy() modifier on your composable element. Text( text = "Squishhhhyyyyy", modifier = Modifier .size(200.dp, 100.dp

null 43 Jul 9, 2022
Snake View is a simple and animated linear chart for Android.

Snake View Snake library is a simple and animation line chart for Android. Latest Version How to use Configuring your project dependencies Add the lib

Txus Ballesteros 339 Dec 14, 2022
Android ImageViews animated by Ken Burns Effect

KenBurnsView Android library that provides an extension to ImageView that creates an immersive experience by animating its drawable using the Ken Burn

Flávio Faria 2.7k Dec 23, 2022