{"id":15030986,"url":"https://github.com/ramotion/expanding-collection-android","last_synced_at":"2025-05-15T13:07:54.956Z","repository":{"id":144532108,"uuid":"70156710","full_name":"Ramotion/expanding-collection-android","owner":"Ramotion","description":":octocat: ExpandingCollection is a material design card peek/pop controller. Android UI Library made by @Ramotion","archived":false,"fork":false,"pushed_at":"2020-04-06T13:36:27.000Z","size":9035,"stargazers_count":2009,"open_issues_count":0,"forks_count":280,"subscribers_count":61,"default_branch":"master","last_synced_at":"2025-05-12T00:34:45.817Z","etag":null,"topics":["android","java","library"],"latest_commit_sha":null,"homepage":"https://www.ramotion.com/agency/app-development/","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ramotion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-10-06T13:30:26.000Z","updated_at":"2025-03-18T12:41:01.000Z","dependencies_parsed_at":"2023-06-25T22:22:08.741Z","dependency_job_id":null,"html_url":"https://github.com/Ramotion/expanding-collection-android","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Fexpanding-collection-android","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Fexpanding-collection-android/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Fexpanding-collection-android/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ramotion%2Fexpanding-collection-android/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ramotion","download_url":"https://codeload.github.com/Ramotion/expanding-collection-android/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254346624,"owners_count":22055808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","java","library"],"created_at":"2024-09-24T20:14:40.759Z","updated_at":"2025-05-15T13:07:49.941Z","avatar_url":"https://github.com/Ramotion.png","language":"Java","funding_links":["https://paypal.me/Ramotion"],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://www.ramotion.com/agency/app-development/?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=expanding-collection-android\"\u003e\u003cimg src=\"https://github.com/Ramotion/folding-cell/blob/master/header.png\"\u003e\u003c/a\u003e\n\n\u003ca href=\"https://github.com/Ramotion/expanding-collection-android\"\u003e\n\u003cimg align=\"left\" src=\"https://github.com/Ramotion/expanding-collection-android/blob/master/preview.gif\" width=\"480\" height=\"360\" /\u003e\u003c/a\u003e\n\n\u003cp\u003e\u003ch1 align=\"left\"\u003eEXPANDING COLLECTION\u003c/h1\u003e\u003c/p\u003e\n\n\u003ch4\u003eExpandingCollection is a material design card peek/pop controller\u003c/h4\u003e\n\n\n___\n\n\n\u003cp\u003e\u003ch6\u003eWe specialize in the designing and coding of custom UI for Mobile Apps and Websites.\u003c/h6\u003e\n\u003ca href=\"https://www.ramotion.com/agency/app-development/?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=expanding-collection-android\"\u003e\n\u003cimg src=\"https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png\" width=\"187\" height=\"34\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp\u003e\u003ch6\u003eStay tuned for the latest updates:\u003c/h6\u003e\n\u003ca href=\"https://goo.gl/rPFpid\" \u003e\n\u003cimg src=\"https://i.imgur.com/ziSqeSo.png/\" width=\"156\" height=\"28\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003c/br\u003e\n\n[![Twitter](https://img.shields.io/badge/Twitter-@Ramotion-blue.svg?style=flat)](http://twitter.com/Ramotion)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg)](https://paypal.me/Ramotion)\n\n# Check this library on other platforms:\n\n\n## Requirements\n​\n- Android 4.0 IceCreamSandwich (API lvl 14) or greater\n- Your favorite IDE\n\n## Installation\n​\nmaven repo:\n\nGradle:\n```groovy\n'com.ramotion.expandingcollection:expanding-collection:0.9.2'\n```\nSBT:\n```scala\nlibraryDependencies += \"com.ramotion.expandingcollection\" % \"expanding-collection\" % \"0.9.2\"\n```\nMaven:\n```xml\n\u003cdependency\u003e\n\t\u003cgroupId\u003ecom.ramotion.expandingcollection\u003c/groupId\u003e\n\t\u003cartifactId\u003eexpanding-collection\u003c/artifactId\u003e\n\t\u003cversion\u003e0.9.2\u003c/version\u003e\n\u003c/dependency\u003e\n```\n\n## Basic usage\n ​\n1. 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.\n\n```xml\n\u003cRelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\u003e\n    \n    \u003ccom.ramotion.expandingcollection.ECBackgroundSwitcherView\n        android:id=\"@+id/ec_bg_switcher_element\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\" /\u003e\n        \n    \u003ccom.ramotion.expandingcollection.ECPagerView\n        android:id=\"@+id/ec_pager_element\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:layout_centerInParent=\"true\"/\u003e\n        \n\u003c/RelativeLayout\u003e\n```\n\n2. Tune `ECPagerView`: setup size of card in collapsed state and height of header in expanded state.  \n\n```xml\n\u003ccom.ramotion.expandingcollection.ECPagerView xmlns:ec=\"http://schemas.android.com/apk/res-auto\"\n    android:id=\"@+id/ec_pager_element\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    android:layout_centerInParent=\"true\"\n    ec:cardHeaderHeightExpanded=\"150dp\"\n    ec:cardHeight=\"200dp\"\n    ec:cardWidth=\"250dp\" /\u003e\n```\n\n3. 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.\n\n```xml\n\u003cFrameLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\u003e\n    \n    \u003cTextView xmlns:android=\"http://schemas.android.com/apk/res/android\"\n        android:id=\"@+id/list_item_text\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"100dp\"\n        android:layout_gravity=\"center_vertical|center_horizontal\"\n        android:background=\"@color/colorPrimary\"\n        android:textAlignment=\"center\" /\u003e\n        \n\u003c/FrameLayout\u003e\n```\n\n4. 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. \n\n```java\npublic class CardListItemAdapter extends ECCardContentListItemAdapter\u003cString\u003e {\n\n    public CardListItemAdapter(@NonNull Context context, @NonNull List\u003cString\u003e objects) {\n        super(context, R.layout.list_item, objects);\n    }\n\n    @NonNull\n    @Override\n    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {\n        ViewHolder viewHolder;\n        View rowView = convertView;\n\n        if (rowView == null) {\n            LayoutInflater inflater = LayoutInflater.from(getContext());\n            rowView = inflater.inflate(R.layout.list_item, null);\n            viewHolder = new ViewHolder();\n            viewHolder.itemText = (TextView) rowView.findViewById(R.id.list_item_text);\n            rowView.setTag(viewHolder);\n        } else {\n            viewHolder = (ViewHolder) rowView.getTag();\n        }\n\n        String item = getItem(position);\n        if (item != null) {\n            viewHolder.itemText.setText(item);\n        }\n        return rowView;\n    }\n\n    static class ViewHolder {\n        TextView itemText;\n    }\n\n}\n```\n5. 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.\n\n```java\npublic class CardDataImpl implements ECCardData\u003cString\u003e {\n\n    private String cardTitle;\n    private Integer mainBackgroundResource;\n    private Integer headBackgroundResource;\n    private List\u003cString\u003e listItems;\n\n    @Override\n    public Integer getMainBackgroundResource() {\n        return mainBackgroundResource;\n    }\n\n    @Override\n    public Integer getHeadBackgroundResource() {\n        return headBackgroundResource;\n    }\n\n    @Override\n    public List\u003cString\u003e getListItems() {\n        return listItems;\n    }\n}\n```\n\n6. 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.  \n\n```java\npublic class MainActivity extends Activity {\n\n   private ECPagerView ecPagerView;\n\n   @Override\n   protected void onCreate(Bundle savedInstanceState) {\n       super.onCreate(savedInstanceState);\n       setContentView(R.layout.activity_main);\n\n       // Get pager from layout\n       ecPagerView = (ECPagerView) findViewById(R.id.ec_pager_element);\n\n       // Generate example dataset\n       List\u003cECCardData\u003e dataset = CardDataImpl.generateExampleData();\n\n       // Implement pager adapter and attach it to pager view\n       ecPagerView.setPagerViewAdapter(new ECPagerViewAdapter(getApplicationContext(), dataset) {\n           @Override\n           public void instantiateCard(LayoutInflater inflaterService, ViewGroup head, ListView list, ECCardData data) {\n               // Data object for current card\n               CardDataImpl cardData = (CardDataImpl) data;\n\n               // Set adapter and items to current card content list\n               list.setAdapter(new CardListItemAdapter(getApplicationContext(), cardData.getListItems()));\n               // Also some visual tuning can be done here\n               list.setBackgroundColor(Color.WHITE);\n\n               // Here we can create elements for head view or inflate layout from xml using inflater service\n               TextView cardTitle = new TextView(getApplicationContext());\n               cardTitle.setText(cardData.getCardTitle());\n               cardTitle.setTextSize(COMPLEX_UNIT_DIP, 20);\n               FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT);\n               layoutParams.gravity = Gravity.CENTER;\n               head.addView(cardTitle, layoutParams);\n\n               // Card toggling by click on head element\n               head.setOnClickListener(new View.OnClickListener() {\n                   @Override\n                   public void onClick(final View v) {\n                       ecPagerView.toggle();\n                   }\n               });\n           }\n       });\n\n       // Add background switcher to pager view\n       ecPagerView.setBackgroundSwitcherView((ECBackgroundSwitcherView) findViewById(R.id.ec_bg_switcher_element));\n\n   }\n\n   // Card collapse on back pressed\n   @Override\n   public void onBackPressed() {\n       if (!ecPagerView.collapse())\n           super.onBackPressed();\n   }\n\n}\n```\n\nYou can find this and other, more complex, examples in this repository ​\n\n\u003cbr\u003e\n\n## 🗂 Check this library on other language:\n\u003ca href=\"https://github.com/Ramotion/expanding-collection\"\u003e \n\u003cimg src=\"https://github.com/ramotion/navigation-stack/raw/master/Swift@2x.png\" width=\"178\" height=\"81\"\u003e\u003c/a\u003e\n\n## 📄 License\n\nExpanding Collection Android is released under the MIT license.\nSee [LICENSE](./LICENSE) for details.\n\nThis library is a part of a \u003ca href=\"https://github.com/Ramotion/android-ui-animation-components-and-libraries\"\u003e\u003cb\u003eselection of our best UI open-source projects\u003c/b\u003e\u003c/a\u003e\n\nIf you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com\n\n## 📱 Get the Showroom App for Android to give it a try\nTry this UI component and more like this in our Android app. Contact us if interested.\n\n\u003ca href=\"https://play.google.com/store/apps/details?id=com.ramotion.showroom\" \u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Ramotion/react-native-circle-menu/master/google_play@2x.png\" width=\"104\" height=\"34\"\u003e\u003c/a\u003e\n\n\u003ca href=\"https://www.ramotion.com/agency/app-development/?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=expanding-collection-android\"\u003e\n\u003cimg src=\"https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png\" width=\"187\" height=\"34\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framotion%2Fexpanding-collection-android","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Framotion%2Fexpanding-collection-android","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framotion%2Fexpanding-collection-android/lists"}