CardsUI View Library

23 Dec
December 23, 2012

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:

Activity Class:

Clone from Bitbucket

Download from GitHub

Tags: , , , , , ,
26 replies
  1. Massimiliano Fanciulli says:

    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

    Reply
  2. Frank B. says:

    Awesome work! Any plans on supporting landscape + horizontal scrolling (e.g. Google+) or am I missing something?

    Reply
  3. Ahmed Nammari says:

    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

    Reply
  4. Mahmoud Menshawi says:

    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!

    Reply
  5. David says:

    Hello, did you specified somewhere the license of the code?

    Reply
  6. Roger says:

    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.

    Reply
    • Roger says:

      Figured it out. Implement Card.OnCardSwiped. For each card added, setOnCardSwipedListener to whatever implements it.

      Reply
  7. Roger says:

    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.

    Reply
  8. Sergio says:

    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

    Reply
  9. Luke says:

    Great Library :)

    Is there any way we can get the index of the currently clicked card?

    Reply
  10. Marc says:

    Loving the pattern! What’s the best practice to show all content if the content exceeds 3 lines? Is there any way of expanding? Or should we use an AlertDialog?

    Reply
  11. Marc says:

    And also how can we hide the holo blue listSelector on the cards?

    Reply
  12. Klaas says:

    Hi Nadav,

    I am using the card ui library and i love it. How do i control the spacing between the individual card stacks. I want to minimise the space between different stacks.

    Reply
  13. Federico says:

    Hi, i can’t utilize the library. I get always the red X in CardsUIExample – properties – Android, in Library. Why this ?
    Can anyone help me ?
    Thanks.

    Reply
  14. Rojo says:

    Which is the minimum SDK??

    Reply
  15. Paul Naraine says:

    Nadav, I’m a big fan of Cards UI, however, I’m having a difficult time visualizing Cards UI being used in a tree hierarchy. Any suggestions? I downloaded your APK hoping to see an example of a tree hierarchy (expand parent, show children). Would you be able to mock something up?

    Reply
  16. drathi says:

    Hi Nadav, Thanks for the wonderful library. I’ve been using it with quite some ease and am pretty happy with it. However, I could not get the cards flip animation as shown in https://play.google.com/store/apps/details?id=com.haarman.listviewanimations

    Not sure if you code inherently supports animation. What is the best way / library for adding the slight animation effect when the cards slide up. Please advise. Regards

    Reply
  17. Andres S says:

    Hi, I notice there is no access to the librarie. Nor on Gothub, nor in the other links. There is any particular reason for that?

    Thank so much!!

    Reply
  18. Ryan says:

    I saw this question above, but didn’t see an answer. Is there a way to increase the size of the cards? I want to create a card to handle all the text given, not just 4 lines. (MyPlayCard). I have changed the setMaxLines=”15″ and changed ellipsize=”none” but the height is still the same max 4 lines. What am I missing?

    Reply

Trackbacks & Pingbacks

  1. [...]  If you’re looking for that kind of functionality check out Nadav Fima’s excellent CardsUI [...]

  2. [...] 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!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>