In this page you can find info about:
- Using card with Picasso
- Using card with Ion
- Using card with Android-Universal-Image-Loader
- Using card with ActionBar-PullToRefresh
- Using card with ListViewAnimations
- Using card as a Crouton
- Using card with StickyListHeaders
- StaggeredGrid
- Using a Card List with Drag and Drop support
Picasso is provided by Square, inc.
You can find an example in demo-extras in PicassoCard
(source).
First you need to set thumbnail.setExternalUsage(true);
Card mCard= new Card(getContext());
//Add Thumbnail
MyThumbnail thumbnail = new MyThumbnail(getContext());
//You need to set true to use an external library
thumbnail.setExternalUsage(true);
addCardThumbnail(thumbnail);
Then you have to implement your logic in setupInnerViewElements(ViewGroup parent, View viewImage)
method:
public class MyThumbnail extends CardThumbnail {
@Override
public void setupInnerViewElements(ViewGroup parent, View viewImage) {
//Here you have to set your image with an external library
Picasso.with(getContext())
.load(myUrl)
.into((ImageView)viewImage);
viewImage.getLayoutParams().width = 250;
viewImage.getLayoutParams().height = 250;
}
Ion is provided by Koushik Dutta.
You can find an example in demo-extras in IonCard
(source).
First you need to set thumbnail.setExternalUsage(true);
Card mCard= new Card(getContext());
//Add Thumbnail
MyThumbnail thumbnail = new MyThumbnail(getContext());
//You need to set true to use an external library
thumbnail.setExternalUsage(true);
addCardThumbnail(thumbnail);
Then you have to implement your logic in setupInnerViewElements(ViewGroup parent, View viewImage)
method:
public class MyThumbnail extends CardThumbnail {
@Override
public void setupInnerViewElements(ViewGroup parent, View viewImage) {
Ion.with((ImageView) viewImage)
.resize(96, 96)
.centerInside()
.load("https://plus.google.com/s2/photos/profile/114432517923423045208?sz=96");
viewImage.getLayoutParams().width = 250;
viewImage.getLayoutParams().height = 250;
}
Android-Universal-Image-Loader is provided by Sergey Tarasevich.
You can find an example in demo-extras in UniversalImageLoaderCard
(source) .
First you need to set thumbnail.setExternalUsage(true);
Card mCard= new Card(getContext());
//Add Thumbnail
MyThumbnail thumbnail = new MyThumbnail(getContext());
//You need to set true to use an external library
thumbnail.setExternalUsage(true);
addCardThumbnail(thumbnail);
Then you have to implement your logic in setupInnerViewElements(ViewGroup parent, View viewImage)
method:
public class MyThumbnail extends CardThumbnail {
@Override
public void setupInnerViewElements(ViewGroup parent, View viewImage) {
//In real case you should config better the imageLoader
ImageLoader imageLoader = ImageLoader.getInstance();
imageLoader.init(ImageLoaderConfiguration.createDefault(mContext));
//Here you have to set your image with an external library
//Only for test, use a Resource Id and a Url
if (((UniversalImageLoaderCard) getParentCard()).getCount() % 2 == 0) {
imageLoader.displayImage("http://plus.google.com/s2/photos/profile/114432517923423045208?sz=96",
(ImageView) viewImage,options);
} else {
imageLoader.displayImage("drawable://" + R.drawable.ic_tris, (ImageView) viewImage,options);
}
viewImage.getLayoutParams().width = 96;
viewImage.getLayoutParams().height = 96;
}
ActionBar PullToRefresh is provided by Chris Banes.
You can find an example in demo-extras in ActionbarpullFragment
. (source)
The proper way to integrate this library is to use PullToRefreshLayout
in your layout:
You can see more info about PullToRefreshLayout
at:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<uk.co.senab.actionbarpulltorefresh.library.PullToRefreshLayout
android:id="@+id/carddemo_extra_ptr_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- You can customize this layout.
You need to have in your layout a `CardView` with the ID `list_cardId` -->
<it.gmariotti.cardslib.library.view.CardListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/carddemo_extra_list_actionbarpulltorefresh"
card:list_card_layout_resourceID="@layout/list_card_thumbnail_layout"/>
</uk.co.senab.actionbarpulltorefresh.library.PullToRefreshLayout>
</LinearLayout>
// Retrieve the PullToRefreshLayout from the content view
mPullToRefreshLayout = (PullToRefreshLayout) getActivity().findViewById(R.id.carddemo_extra_ptr_layout);
// Now setup the PullToRefreshLayout
ActionBarPullToRefresh.from(this.getActivity())
// Mark All Children as pullable
.allChildrenArePullable()
// Set the OnRefreshListener
.listener(this)
// Finally commit the setup to our PullToRefreshLayout
.setup(mPullToRefreshLayout);
ListViewAnimations is provided by Niek Haarman.
You can find an example in demo-extras in ListViewAnimationsFragment
. (source)
CardArrayAdapter mCardArrayAdapter = new CardArrayAdapter(getActivity(), cards);
CardListView mListView = (CardListView) getActivity().findViewById(R.id.carddemo_extra_list_viewanimations);
AnimationAdapter animCardArrayAdapter = new AlphaInAnimationAdapter(mCardArrayAdapter);
animCardArrayAdapter.setAbsListView(mListView);
mListView.setExternalAdapter(animCardArrayAdapter,mCardArrayAdapter);
You can find another example in demo-extras in ListViewGridAnimationsFragment
. (source)
CardGridArrayAdapter mCardArrayAdapter = new CardGridArrayAdapter(getActivity(), cards);
CardGridView mListView = (CardGridView) getActivity().findViewById(R.id.carddemo_extra_grid_viewanimations);
AnimationAdapter animCardArrayAdapter = new AlphaInAnimationAdapter(mCardArrayAdapter);
animCardArrayAdapter.setAbsListView(mListView);
mListView.setExternalAdapter(animCardArrayAdapter,mCardArrayAdapter);
Crouton is provided by Benjamin Weiss.
You can find an example in demo-extras in CroutonFragment
. (source)
CardView cardView= (CardView)view.findViewById(R.id.carddemo_card_crouton_id);
Card card = new Card(getActivity());
card.setTitle("Crouton Card");
card.setBackgroundResourceId(R.color.demoextra_card_background_color2);
CardThumbnail thumb = new CardThumbnail(getActivity());
thumb.setDrawableResource(R.drawable.ic_action_bulb);
card.addCardThumbnail(thumb);
cardView.setCard(card);
Crouton.make(getActivity(), cardView).show();
StickyListHeaders is provided by Emil Sjölander.
You can find an example in demo-extras in StickyListHeadersFragment
. (source)
In order to use this library you have to:
- Extend your
CardArrayAdapter
and implementStickyListHeadersAdapter
. - Use or extend the
StickyCardListView
provided in this demo (source) - Provide a layout with a
StickyCardListView
.
The StickyCardListView
extends the standard StickyListHeadersListView
merged with the CardListView
methods.
In this example:
public class StickyCardArrayAdapter extends CardArrayAdapter implements StickyListHeadersAdapter {
@Override
public View getHeaderView(int position, View convertView, ViewGroup viewGroup) {
// return your header view.
}
@Override
public long getHeaderId(int position) {
// use your logic
}
}
StickyCardArrayAdapter adapter = new StickyCardArrayAdapter(getActivity(), cards);
StickyCardListView stickyList = (StickyCardListView) getActivity().findViewById(R.id.carddemo_extra_sticky_list);
//stickyList.setAreHeadersSticky(false);
if (stickyList != null) {
stickyList.setAdapter(adapter);
}
<it.gmariotti.cardslib.demo.extras.stickylist.StickyCardListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/carddemo_extra_sticky_list"
card:list_card_layout_resourceID="@layout/carddemo_extras_list_card_thumbnail_layout">
</it.gmariotti.cardslib.demo.extras.stickylist.StickyCardListView>
You can see a video