This is a library to help creating expanding views with animation in Android

Overview

Android Arsenal

About the Library

inspiration

This library is strongly inspired in this concept from Hila Peleg in dribble. See it below

Android Arsenal

Working example

For more details on how to use this library please refer to the example in this repository. You can see a video of the example working here:

a video of the example working here

Adding the Library to gradle file

dependencies {
    compile 'com.diegodobelo.expandingview:expanding-view:0.9.4'
}

Using the Library

Layouts

First of all include the ExpandingList in your Activity (or Fragment) layout. This will be the list of items (ExpandItem):

<com.diegodobelo.expandingview.ExpandingList
        android:id="@+id/expanding_list_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

Now create a new layout (xml) file to represent the item (such as res/layout/expanding_item.xml). This will be the Item (header) that can be expanded to show sub items:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="94dp">
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="center_vertical|left"
        android:textSize="22sp"/>
</RelativeLayout>

Create another layout file to represent the sub items (such as /res/expanding_sub_item.xml). This will be the sub items that will be shown when the Item is expanded:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="48dp">
    <TextView
        android:id="@+id/sub_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:layout_marginLeft="8dp"
        android:textSize="18sp"
        android:gravity="center_vertical|left"/>
</RelativeLayout>

Now create a layout file (such as /res/expanding_layout.xml) to represent the whole item, including both item layout and sub item layout. We will explain each custom attribute later:

<com.diegodobelo.expandingview.ExpandingItem
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:item_layout="@layout/expanding_item"
    app:sub_item_layout="@layout/expanding_sub_item"
    app:indicator_size="42dp"
    app:indicator_margin_left="16dp"
    app:indicator_margin_right="16dp"
    app:show_indicator="true"
    app:show_animation="true"
    app:start_collapsed="true"
    app:animation_duration="250"/>

Note that we included expanding_item and expanding_sub_item layouts created before.

Java code

Now that you have all the required layouts you are able to use them in Java code. Let's start inflating the ExpandingList:

ExpandingList expandingList = (ExpandingList) findViewById(R.id.expanding_list_main);

Create a new ExpandingItem in the ExpandingList. This method receives the expanding_layout created before. Yes! We can have different layouts for different items in the same list. The items will be created based on expanding_item layout and the sub items will be created based on expanding_sub_item layout:

ExpandingItem item = expandingList.createNewItem(R.layout.expanding_layout);

/*ExpandingItem extends from View, so you can call
findViewById to get any View inside the layout*/
(TextView) item.findViewById(R.id.title)).setText("It Works!!");

Let's create the sub items. There is a method to create items in batch:

//This will create 5 items
item.createSubItems(5);

//get a sub item View
View subItemZero = item.getSubItemView(0);
((TextView) subItemZero.findViewById(R.id.sub_title)).setText("Cool");

View subItemOne = item.getSubItemView(1);
((TextView) subItemOne.findViewById(R.id.sub_title)).setText("Awesome");

...

For each item you can set the indicator color and the indicator icon:

item.setIndicatorColorRes(R.color.blue);
item.setIndicatorIconRes(R.drawable.ic_icon);

ExpandingItem layout attributes

Attribute Name Type Default Value Meaning Mandatory
item_layout reference The layout for the Item (header). Yes
sub_item_layout reference The layout for the sub items. Yes
separator_layout reference A layout to separate items. No
indicator_size dimension 0dp The indicator size in dp. No
indicator_margin_left dimension 0dp The margin between the indicator and its left. No
indicator_margin_right dimension 0dp The margin between the indicator and its right. No
show_indicator boolean true true if you want to show the indicator. false otherwise. No
show_animation boolean true true if you want to show animations. false otherwise. No
start_collapsed boolean true true if you want the sub views to start collapsed. false otherwise. No
animation_duration integer 300ms The animations duration in milliseconds. No

ExpandingList public methods

public void createNewItem(int layoutId)

Method to create and add a new item.

  • Parameters: layoutId — The item Layout
public void removeItem(ExpandingItem item)

Method to remove an item.

  • Parameters: item — The item to be removed, of type {@link ExpandingItem}
public void removeAllViews()

Method to remove all items.

ExpandingItem getItemByIndex(int index)

Method to get an Item from the ExpandingList by its index.

  • Parameters: index — The index of the item.
  • Returns: An {@link ExpandingItem} in the list.
public int getItemsCount()

Return how many items exists in the list.

  • Returns: Items count.

ExpandingItem public methods

public void setStateChangedListener(OnItemStateChanged listener)

Set a listener to listen item stage changed.

  • Parameters: listener — The listener of type {@link OnItemStateChanged}
public boolean isExpanded()

Tells if the item is expanded.

  • Returns: true if expanded. false otherwise.
public int getSubItemsCount()

Returns the count of sub items.

  • Returns: The count of sub items.
public void collapse()

Collapses the sub items.

public void toggleExpanded()

Expand or collapse the sub items.

public void setIndicatorColorRes(int colorRes)

Set the indicator color by resource.

  • Parameters: colorRes — The color resource.
public void setIndicatorColor(int color)

Set the indicator color by color value.

  • Parameters: color — The color value.
public void setIndicatorIconRes(int iconRes)

Set the indicator icon by resource.

  • Parameters: iconRes — The icon resource.
public void setIndicatorIcon(Drawable icon)

Set the indicator icon.

  • Parameters: icon — Drawable of the indicator icon.
@Nullable public View createSubItem()

Creates a sub item based on sub_item_layout Layout, set as ExpandingItem layout attribute.

  • Returns: The inflated sub item view.
@Nullable public View createSubItem(int position)

Creates a sub item based on sub_item_layout Layout, set as ExpandingItem layout attribute. If position is -1, the item will be added in the end of the list.

  • Parameters: position — The position to add the new Item. Position should not be greater than the list size.
  • Returns: The inflated sub item view.
public void createSubItems(int count)

Creates as many sub items as requested in {@param count}.

  • Parameters: count — The quantity of sub items.
public View getSubItemView(int position)

Get a sub item at the given position.

  • Parameters: position — The sub item position. Should be > 0.
  • Returns: The sub item inflated view at the given position.
public void removeSubItemAt(int position)

Remove sub item at the given position.

  • Parameters: position — The position of the item to be removed.
public void removeSubItemFromList(View view)

Remove the given view representing the sub item. Should be an existing sub item.

  • Parameters: view — The sub item to be removed.
public void removeSubItem(View view)

Remove the given view representing the sub item, with animation. Should be an existing sub item.

  • Parameters: view — The sub item to be removed.
public void removeAllSubItems()

Remove all sub items.

License

 Copyright (c) 2016, Diego Bezerra <[email protected]>
 Permission to use, copy, modify, and/or distribute this software for any purpose
 with or without fee is hereby granted, provided that the above copyright notice
 and this permission notice appear in all copies.
 THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
 REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
 FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT,
 OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE,
 DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS
 ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
Comments
  • How to pass

    How to pass "title" data from addItems to another activity?

    I am able to pass data of subItem but i am not able to pass title data. I have to assign it in a String Variable but it catches the last data from addItem i.e Bart. Sorry for the noob question i am new to the android development @diegodobelo

    opened by yourtechcode 5
  • Suggestion: Embed the YouTube video to the readme / Add screenshots

    Suggestion: Embed the YouTube video to the readme / Add screenshots

    I think it'd be better if you would embed the YouTube video to the readme or add screenshots instead of just having a link to the YouTube video.

    Whenever I look over libraries, I like to be able to quickly see what the library looks like before using it.

    opened by MarkOSullivan94 3
  • How to replace the old data of expandingList?

    How to replace the old data of expandingList?

    How to replace the old data of expandingList? I called method expandingList.removeAllViews(),it doesn't work.That's not like listview cuz the view was extended from scrollview,so I can't find a good idea to replace the old data.Can you help me ? Thanx

    opened by ShineYang 3
  • How to create another list inside child item

    How to create another list inside child item

    Is it possible to create another list (String array) inside child item on click ? Like in this example

    • Mary ----- Dog ----------- Has 4 log (how to add this inside Dog on click)

    Thanks Vinit

    opened by VinitSandesara 2
  • Work with fragment problem.

    Work with fragment problem.

    I want to use this library in Fragment, not FragmentActivity. But not understand what data i must send to adapter. Because we can not use it without adapter. And i do not now, when insert item creation, final ExpandingItem item = mExpandingList.createNewItem(R.layout.expanding_layout), in fragment or in adapter.

    Maybe someone have any ideas?

    Does not work.

    @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
             rootView = inflater.inflate(R.layout.fragment_mov, container, false);
             mExpandingList = (ExpandingList) rootView.findViewById(R.id.expanding_list_main);
             createItems();
            return rootView;
        }
    
    opened by willu2 2
  • How to set Icons in every  SubItems

    How to set Icons in every SubItems

    I want to add an icon to every subItem..how to do that? and I want to reduce the padding between the two SubItem and between the Maine Item and next SubItem.

    Thanks in Advance!

    opened by sakar97 1
  • Expanded by default- problem with indicator

    Expanded by default- problem with indicator

    I have a problem. I set the start_collapsed with false and the indicator is not showing on the subitem length.

    <com.diegodobelo.expandingview.ExpandingItem xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" app:item_layout="@layout/layout_parent" app:sub_item_layout="@layout/sub_item" app:indicator_size="42dp" app:indicator_margin_left="16dp" app:indicator_margin_right="16dp" app:show_indicator="true" app:show_animation="true" app:start_collapsed="false" app:animation_duration="250"/>

    subitem ->

    ExpandingItem item = expandingList.createNewItem(layoutId); item.createSubItems(1); item.setIndicatorColorRes(R.color.colorAccent); item.setIndicatorIconRes(R.drawable.ic_arrow_down);

    On the first view the indicator is not on full lenght, after I click it does go to the full length.

    Can you please have a look? Thanks problem

    opened by AdrielIclodean 0
  • How to display the another list in the subitems(child)

    How to display the another list in the subitems(child)

    I want to display the parent-> child->sub child Example Parent 1 Child P1 Sub child p1 Sub child p1 Child P2 Sub child p2 Sub child p2 Sub child p2

    opened by venkataramanaduddu 1
  • Subview's textViews don't center horizontally all the time

    Subview's textViews don't center horizontally all the time

    The SAME sub-item layout is inflating slightly differently depending on the item clicked and I can't figure out why. I want the subitems to be centered horizontally. ( like the Yellow Cake example)

    here's the GitHub project link: https://github.com/joelc1225/MyBakingApp-UDACITY.git

    Screen shots below...

    'Ingredient List' is the expandable item and below are the ingredients for that specific recipe. nutellapie1

    the sub items slightly lean to the left instead of the center nutellalist

    this is the closest sub item list to the center yellowcakelist

    this one is obviously way to the left cheesecakelist

    opened by joelc1225 1
Owner
Diego Bezerra
Software Engineer with more than 10 years of professional experience.
Diego Bezerra
Janishar Ali 2.1k Jan 1, 2023
Animation View to Highlight particular Views 🎯 for Android

TargetView Animation View to Highlight particular Views ?? for Android, it can be Used with Views that you see important (Like CountDownTimer), And al

Anas Altair 53 Aug 7, 2021
A powerful library for creating notifications in android platform.

Download Download the latest AAR or grab via Maven: <dependency> <groupId>com.github.halysongoncalves</groupId> <artifactId>pugnotification</artif

Halyson Lima Gonçalves 867 Nov 19, 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
Android Material Json Form Wizard is a library for creating beautiful form based wizards within your app just by defining json in a particular format.

Android Json Wizard Android Json Wizard is a library for creating beautiful form based wizards within your app just by defining json in a particular f

Vijay Rawat 355 Nov 11, 2022
Library for creating blur effects under Android UI elements

BlurTutorial Meet BlurTutorial, an Android-based library made by Cleveroad Hurry to check our newest library that helps to blur the background in Andr

Cleveroad 150 Dec 16, 2022
A small, easy to use android library for implementing flipping between views as seen in the popular Flipboard application

FlipView About This library is made to be very easy to use and at the same time be feature complete. With only a few lines of code you can have a flip

Emil Sjölander 924 Nov 10, 2022
An Android library introducing a stack of Views with the first item being flippable.

FlippableStackView An Android library introducing a stack of Views with the first item being flippable. Views inside the stack remain the aspect ratio

Bartek Lipinski 812 Dec 7, 2022
Android layout decorators : Injecting custom attributes in layout files, Using decorators to get rid of unnecessary class explosion with custom views

Decor Decor is a library that applies decorators to Android layout with additional attributes without the need to extend and create a custom View for

Mouna Cheikhna 304 Nov 25, 2022
Dead simple Android Tooltip Views

TooltipView A dead simple way to to add tooltips to your Android app. <com.venmo.view.TooltipView android:layout_width="wrap_content"

Venmo 489 Dec 12, 2022
ScratchView 7.0 0.0 L4 Java repo is UX Design involving scratch cards like views which are scratched to reveal the information they conceal.

ScratchView Intro ScratchView repo is UX Design involving scratch cards like views which are scratched to reveal the information they conceal. There a

Harish Sridharan 1.1k Dec 24, 2022
Glass-break effect for views

BrokenView Glass-break effect for views. Demo Download APK Usage Android Studio dependencies { compile 'com.zys:brokenview:1.0.3' } Eclipse Just pu

null 858 Jan 6, 2023
💳 A quick and easy flip view through which you can create views with two sides like credit cards, poker cards etc.

The article on how this library was created is now published. You can read it on this link here. →. ?? EasyFlipView Built with ❤︎ by Wajahat Karim and

Wajahat Karim 1.3k Dec 14, 2022
ScratchView repo is UX Design involving scratch cards like views which are scratched to reveal the information they conceal.

ScratchView Intro ScratchView repo is UX Design involving scratch cards like views which are scratched to reveal the information they conceal. There a

Harish Sridharan 1.1k Dec 24, 2022
Draggable views with rotation and skew/scale effects

DraggableView Draggable views with rotation and skew/scale effects. Usage Implement DragController.IDragViewGroup Create instance of DragController Ov

Eugene Levenetc 562 Nov 11, 2022
Android library for fluid tablayout animation as seen on Snapchat.

SnapTabLayout Show some ❤️ and star the repo to support the project This library is the implementation of TabLayout as seen on popular messaging app S

Niranjan Kurambhatti 714 Dec 25, 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
Cube grid animation about the android.

CubeGrid Cube grid animation about the android. The android implementation about the 9-cube-grid Demo Usage Add dependency allprojects { repositories

alighters 218 Nov 23, 2022
Implement a simple and funny Android animation —— the emoji rain in WeChat app.

中文版文档 Emoji Rain Hey, it's raining emoji! This is a really simple and funny animation for Android. You could find similar animations when sending "Hap

LoLo 615 Nov 21, 2022