Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Ramotion/expanding-collection-android
:octocat: ExpandingCollection is a material design card peek/pop controller. Android UI Library made by @Ramotion
https://github.com/Ramotion/expanding-collection-android
android java library
Last synced: about 2 months ago
JSON representation
:octocat: ExpandingCollection is a material design card peek/pop controller. Android UI Library made by @Ramotion
- Host: GitHub
- URL: https://github.com/Ramotion/expanding-collection-android
- Owner: Ramotion
- License: mit
- Created: 2016-10-06T13:30:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-04-06T13:36:27.000Z (almost 5 years ago)
- Last Synced: 2024-11-11T23:37:59.524Z (2 months ago)
- Topics: android, java, library
- Language: Java
- Homepage: https://www.ramotion.com/agency/app-development/
- Size: 8.62 MB
- Stars: 2,019
- Watchers: 62
- Forks: 280
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- Android-Awesome-Resources - Expanding-collection-android
README
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:
[](http://twitter.com/Ramotion)
[](https://paypal.me/Ramotion)
# Check this library on other platforms:
## Requirements
- Android 4.0 IceCreamSandwich (API lvl 14) or greater
- Your favorite IDE
## Installation
maven repo:
Gradle:
```groovy
'com.ramotion.expandingcollection:expanding-collection:0.9.2'
```
SBT:
```scala
libraryDependencies += "com.ramotion.expandingcollection" % "expanding-collection" % "0.9.2"
```
Maven:
```xml
com.ramotion.expandingcollection
expanding-collection
0.9.2
```
## 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.
```xml
```
2. Tune `ECPagerView`: setup size of card in collapsed state and height of header in expanded state.
```xml
```
3. 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.
```xml
```
4. 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.
```java
public class CardListItemAdapter extends ECCardContentListItemAdapter {
public CardListItemAdapter(@NonNull Context context, @NonNull List objects) {
super(context, R.layout.list_item, objects);
}
@NonNull
@Override
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
ViewHolder viewHolder;
View rowView = convertView;
if (rowView == null) {
LayoutInflater inflater = LayoutInflater.from(getContext());
rowView = inflater.inflate(R.layout.list_item, null);
viewHolder = new ViewHolder();
viewHolder.itemText = (TextView) rowView.findViewById(R.id.list_item_text);
rowView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) rowView.getTag();
}
String item = getItem(position);
if (item != null) {
viewHolder.itemText.setText(item);
}
return rowView;
}
static class ViewHolder {
TextView itemText;
}
}
```
5. 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.
```java
public class CardDataImpl implements ECCardData {
private String cardTitle;
private Integer mainBackgroundResource;
private Integer headBackgroundResource;
private List listItems;
@Override
public Integer getMainBackgroundResource() {
return mainBackgroundResource;
}
@Override
public Integer getHeadBackgroundResource() {
return headBackgroundResource;
}
@Override
public List getListItems() {
return listItems;
}
}
```
6. 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.
```java
public class MainActivity extends Activity {
private ECPagerView ecPagerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Get pager from layout
ecPagerView = (ECPagerView) findViewById(R.id.ec_pager_element);
// Generate example dataset
List dataset = CardDataImpl.generateExampleData();
// Implement pager adapter and attach it to pager view
ecPagerView.setPagerViewAdapter(new ECPagerViewAdapter(getApplicationContext(), dataset) {
@Override
public void instantiateCard(LayoutInflater inflaterService, ViewGroup head, ListView list, ECCardData data) {
// Data object for current card
CardDataImpl cardData = (CardDataImpl) data;
// Set adapter and items to current card content list
list.setAdapter(new CardListItemAdapter(getApplicationContext(), cardData.getListItems()));
// Also some visual tuning can be done here
list.setBackgroundColor(Color.WHITE);
// Here we can create elements for head view or inflate layout from xml using inflater service
TextView cardTitle = new TextView(getApplicationContext());
cardTitle.setText(cardData.getCardTitle());
cardTitle.setTextSize(COMPLEX_UNIT_DIP, 20);
FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT);
layoutParams.gravity = Gravity.CENTER;
head.addView(cardTitle, layoutParams);
// Card toggling by click on head element
head.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(final View v) {
ecPagerView.toggle();
}
});
}
});
// Add background switcher to pager view
ecPagerView.setBackgroundSwitcherView((ECBackgroundSwitcherView) findViewById(R.id.ec_bg_switcher_element));
}
// Card collapse on back pressed
@Override
public void onBackPressed() {
if (!ecPagerView.collapse())
super.onBackPressed();
}
}
```
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](./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.
