CardsUI View Library
Google’s Now popular Cards UI has everyone in the Android design community excited, including myself.
I developed this for a project I’m working on, and decided to make it abstract and upload it as a library.
You can download the example APK here, or just Clone the library from Bitbucket or from Github, including the example’s app source code and the library’s source code.
It took me a while to get the code together. The view might still be a little flaky from time to time, and the View’s code is NOT well documented, but the example really shows you how simple it is.
Feel welcome to modify any of the code, fork it and pull it.
Layout XML:
|
1 2 3 4 5 6 7 8 9 10 11 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <com.fima.cardsui.views.CardUI android:id="@+id/cardsview" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> |
Activity Class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
// init CardView mCardView = (CardUI) findViewById(R.id.cardsview); mCardView.setSwipeable(false); // add AndroidViews Cards mCardView.addCard(new MyCard("Get the CardsUI view")); mCardView.addCardToLastStack(new MyCard("for Android at")); MyCard androidViewsCard = new MyCard("www.androidviews.net"); androidViewsCard.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(Intent.ACTION_VIEW); intent.setData(Uri.parse("http://www.androidviews.net/")); startActivity(intent); } }); mCardView.addCardToLastStack(androidViewsCard); // add one card, and then add another one to the last stack. mCardView.addCard(new MyCard("2 cards")); mCardView.addCardToLastStack(new MyCard("2 cards")); // add one card mCardView.addCard(new MyCard("1 card")); // create a stack CardStack stack = new CardStack(); stack.setTitle("title test"); // add 3 cards to stack stack.add(new MyCard("3 cards")); stack.add(new MyCard("3 cards")); stack.add(new MyCard("3 cards")); // add stack to cardView mCardView.addStack(stack); // draw cards mCardView.refresh(); |
Why not host it on GitHub like the rest of the world?
http://gigaom.com/cloud/can-bitbucket-prevail-in-a-github-obsessed-world/
Well, I really like Bitbucket but… I added a Github repo as well.
Hello Nadav,
i started updating my app https://play.google.com/store/apps/details?id=it.mf.android.autobluetooth using your card UI. Let me say that is simply beautiful! Unfortunately i found a little problem (i won0t say it is a bug since i may be wrong, not your code): I set the card to swipeable, i can swipe cards but it seems that the swipe listener is not called at all. I saw that your example explicitly set swipeable to false and there are no other examples that show such feature. Is it completely working? If so, do you have a small example?
Regards,
Massimiliano
Hey Massimiliano,
This was fixed here: https://github.com/nadavfima/cardsui-for-android/pull/3
Check it out.
Awesome work! Any plans on supporting landscape + horizontal scrolling (e.g. Google+) or am I missing something?
see my comment below
Hello Guys ,I have implement this and I support the vertical and horizontal orientation
here is my code on github :https://github.com/Nammari/GooglePlusLayout
Hey,
I really like the Cards UI and I’m using it in my application that I’m working on right now. But I have a problem when I try to run the application on a tablet with Android ICS 4.0.4 as it crashes.
I tracked the error and I found out that when I add cards to the CardUI object and then I call the refresh method, it gives me a StackOverFlow error and the application crashes.
This only happens on that tablet as I have another Galaxy S3 mini with JeallyBean that works fine.
Oh, btw, it was working fine on the tablet before.
Thanks and I will be waiting for your reply!
Hello, did you specified somewhere the license of the code?
When using setSwipeable(true), how do I handle the swipe in my activity? I’ve tried implementing SwipeDismissTouchListener.OnDismissCallback and Card.OnCardSwiped, but neither seem to be triggered when the card is actually swiped.
Figured it out. Implement Card.OnCardSwiped. For each card added, setOnCardSwipedListener to whatever implements it.
Is there a way to set the OnLongClickListener for a card? I’m able to set the OnCardSwipedListener, and OnClickListener, but I haven’t found a way to do it for long clicks.
Hi,
I have a noob question: how can I control the height of the card ? I’d like to host a ListView inside and I can’t figure out how to extend the card height to accommodate it…
Thank you for the library and for your patience…
Regards
Sergio
Great Library
Is there any way we can get the index of the currently clicked card?
Trackbacks & Pingbacks
[...] If you’re looking for that kind of functionality check out Nadav Fima’s excellent CardsUI [...]
[...] popular Cards UI has everyone in the Android design community excited and now Android developer nadavfima has decided to make it abstract and upload it as a [...]
Leave a Reply
Want to join the discussion?Feel free to contribute!