Material Design Hub: ExpandableView

ExpandableSelector Android Library

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

Min SDK: 14 (Android 4.0–4.0.2 Ice Cream Sandwich).

Contributors: https://android-arsenal.com/user/Karumi

Click Here for Download ExpandableSelector Android Library

Step 1: Create a new Android Project

Step 2: Import Library to your Android Application Project

1: File->New->Other

2: Select Android Project

3: Select "Create Project from existing source"

4: Click "Browse and select ExpandableSelector Android Library,

5: Finish

6: Right-click on your project -> Properties

7: In Android->Library section click Add

8: select recently added project -> Ok

9: that's it!

How To Use ExpandableSelector Android Library:

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 toexpandableItemSyle 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>

The resources you can show in the Button/ImageButton widgets automatically added toExpandableSelector 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
      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:animation_duration="100">

The attributes you can configure are:

expandable_selector:hide_background_if_collapsed: Changes the background associated to theExpandableSelector 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: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>

Please Join our Facebook Group and Page

Facebook group: Android controls

Facebook page: Android Controls

Subscribe YouTube channel: Click here

SUBSCRIBE TO OUR EMAIL NEWSLETTER & RECEIVE UPDATES RIGHT IN YOUR INBOX. Click here

If You Have Any question or Suggestions Please Feel Free to Comments .

ExpandableView : ExpandableView is a View showing only a content and when clicked on it, it displays more content in a fashion way.

Description:- ExpandableView is a View showing only a content and when clicked on it, it displays more content in a fashion way. You can add views or viewgroups but remember that it will only display the content in a LinearLayout with vertical orientation.

You can choose by default a "chevron" icon animation or a "plus" icon animation. The "always visible row" has a left icon, a text and finally a right icon which will be the animated one.

Min SDK:- 14 (Android 4.0–4.0.2 Ice Cream Sandwich)

Author- nicolasjafelle@gmail.com

Chick Here for Download ExpandableView Android Library

Instructions - Maven Central

Add this library in your build.gradle:

dependencies {
    compile 'coming soon...'
}

Instructions:
1: Clone the git repo
2: Import the "ExpandableView" module into your Android-gradle project.
3: Add "ExpandableView" module in your settings.gradle
4: DONE

How to use ExpandableView Android Library in eclipse :-

Step 1: Create a new Android Project

Step 2: Import Library to your Android Application Project
1: File->New->Other
2: Select Android Project
3: Select "Create Project from existing source"
4: Click "Browse and select ExpandableView Android Library,
5: Finish
6: Right-click on your project -> Properties
7: In Android->Library section click Add
8: select recently added project -> Ok
9: that's it!

How to Use it: As any view in Android you can add it by code or by layout xml file but remember that if you want to change the default height of the visible content you need to use:

topExpandableView.setVisibleLayoutHeight(300);
topExpandableView.setVisibleLayoutHeight(getResources().getDimensionPixelSize(R.dimen.new_height));

Remember also to fill the information inside the visible content by using:

expandableView.fillData(R.drawable.ic_android, R.string.android_names, true);
//or
expandableView.fillData(R.drawable.ic_android, getString(R.string.android_names), true);
//or
expandableView.fillData(R.drawable.ic_android, R.string.android_names, true);
//or
expandableView.fillData(R.drawable.ic_android, getString(R.string.android_names));
//or
expandableView.fillData(R.drawable.ic_android, R.string.android_names);

//or
expandableView.fillData(0, R.string.android_names); // No drawable left by passing 0.

If you want to add content into the discoverable LinearLayout simple use:

expandableView.addContentView(itemView); // itemView could be a simple TextView or more complex custom views

The most relevant part of this ExpandableView is when you want to include an ExpandableView into another ExpandableView, you need to pass the parent's View hierarchy, like this:

expandableViewLevel1.setOutsideContentLayout(topExpandableView.getContentLayout()); // 1 Level
expandableViewLevel2.setOutsideContentLayout(topExpandableView.getContentLayout(), expandableViewLevel1.getContentLayout()); // 2 Levels
expandableViewLevel3.setOutsideContentLayout(topExpandableView.getContentLayout(), expandableViewLevel1.getContentLayout(), expandableViewLevel2.getContentLayout()); // 3 Levels

Also remember to use this package in your layout files:

<com.expandable.view.ExpandableView
    android:id="@+id/activity_main_top_expandable_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

Material Design Hub

Material Design Hub