Skip to content

Expanding Collection

Jump to bottom
DV Infosys edited this page Oct 19, 2019 · 1 revision

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.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:ec="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.dvinfosys.widgets.expandingcollection.ECBackgroundSwitcherView android:id="@+id/ec_bg_switcher_element" android:layout_width="match_parent" android:layout_height="match_parent" android:foreground="@drawable/background_gradient" /> <com.dvinfosys.widgets.expandingcollection.ECPagerView android:id="@+id/ec_pager_element" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="250dp" ec:cardHeaderHeightExpanded="200dp" ec:cardHeight="250dp" ec:cardWidth="250dp" /> </RelativeLayout>
  1. Tune ECPagerView: setup size of card in collapsed state and height of header in expanded state.
<com.dvinfosys.widgets.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.
public class CardListItemAdapter extends ECCardContentListItemAdapter<String> { public CardListItemAdapter(@NonNull Context context, @NonNull List<String> 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; } }
  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.
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<ECCardData> 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(); } }

License

Copyright (C) 2019 DV Infosys

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Clone this wiki locally