expanding-collection-android

EXPANDING COLLECTION

ExpandingCollection is a material design card peek/pop controller

We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Stay tuned for the latest updates:

Requirements

​

• Android 4.0 IceCreamSandwich (API lvl 14) or greater
• Your favorite IDE

Installation

​ maven repo:

Gradle:

'com.ramotion.expandingcollection:expanding-collection:0.9.2'

SBT:

libraryDependencies += "com.ramotion.expandingcollection" % "expanding-collection" % "0.9.2"

Maven:

<dependency>
	<groupId>com.ramotion.expandingcollection</groupId>
	<artifactId>expanding-collection</artifactId>
	<version>0.9.2</version>
</dependency>

Basic usage

​

1. Add a background switcher element ECBackgroundSwitcherView and a main pager element ECPagerView to your layout. ECPagerView should always have match_parent width and wrap_content height. You can adjust the vertical position yourself using alignment/gravity or top margin. ECBackgroundSwitcherView is the dynamic background switcher, so you probably want it to be as big as its parent.

…

1. Tune ECPagerView: setup size of card in collapsed state and height of header in expanded state.

<com.ramotion.expandingcollection.ECPagerView xmlns:ec="http://schemas.android.com/apk/res-auto"
    android:id="@+id/ec_pager_element"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    ec:cardHeaderHeightExpanded="150dp"
    ec:cardHeight="200dp"
    ec:cardWidth="250dp" />

1. Expanded card contains two parts: a header part with a background (initially visible when card is collapsed) and a ListView element as content (visible only when card is expanded), so you need an xml layout for the list items.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/list_item_text"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_gravity="center_vertical|center_horizontal"
        android:background="@color/colorPrimary"
        android:textAlignment="center" />
        
</FrameLayout>

1. Also, you need to implement a custom list adapter for the list items by extending the parametrized com.ramotion.expandingcollection.ECCardContentListItemAdapter.java class, where T is type of datasource object for list items inside the card. In the example below, T is just a string object. It's a pretty straightforward implementation with a common view holder pattern.

…

1. Your data class must implement the com.ramotion.expandingcollection.ECCardData.java interface where T is type of datasource object for list items inside the card.

public class CardDataImpl implements ECCardData<String> {

    private String cardTitle;
    private Integer mainBackgroundResource;
    private Integer headBackgroundResource;
    private List<String> listItems;

    @Override
    public Integer getMainBackgroundResource() {
        return mainBackgroundResource;
    }

    @Override
    public Integer getHeadBackgroundResource() {
        return headBackgroundResource;
    }

    @Override
    public List<String> getListItems() {
        return listItems;
    }
}

1. Almost done! The last thing we need to do is provide our dataset to a pager element through a pager adapter. It's just an implementation of the abstract class com.ramotion.expandingcollection.ECPagerViewAdapter.java with one abstract method, so it can be easily implemented inside your activity.

…

You can find this and other, more complex, examples in this repository ​

Check this library on other language:

License

Expanding Collection Android is released under the MIT license. See LICENSE for details.

This library is a part of a selection of our best UI open-source projects

If you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com

Get the Showroom App for Android to give it a try

Try this UI component and more like this in our Android app. Contact us if interested.