New Google Now and Google+ card interface
Solution 1:
I have posted a tutorial on how to replicate / create Google Cards style layout here.
Key steps
- Create a custom layout
- Add observer for drawing children
- Animate alternating cards
Heres a code snippet
@Override
public void onGlobalLayout() {
getViewTreeObserver().removeGlobalOnLayoutListener(this);
final int heightPx = getContext().getResources().getDisplayMetrics().heightPixels;
boolean inversed = false;
final int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
int[] location = new int[2];
child.getLocationOnScreen(location);
if (location[1] > heightPx) {
break;
}
if (!inversed) {
child.startAnimation(AnimationUtils.loadAnimation(getContext(),
R.anim.slide_up_left));
} else {
child.startAnimation(AnimationUtils.loadAnimation(getContext(),
R.anim.slide_up_right));
}
inversed = !inversed;
}
}
Solution 2:
Take a look at http://ryanharter.com/blog/2013/01/31/how-to-make-an-android-card-list/
Copy of the example:
/res/drawable/bg_card.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#ccc" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp" />
<solid android:color="@android:color/white" />
<padding android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
</shape>
</item>
</layer-list>
Use it as the background of your layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="12dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:background="@drawable/bg_card">
<!-- Card Contents go here -->
</LinearLayout>
</FrameLayout>
Solution 3:
==== Start update 2014-09-29 ====
Use the CardView from the Google Compatibility library (from Android 2.1+):
<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="4dp">
<TextView
android:id="@+id/info_text"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
See https://developer.android.com/preview/material/ui-widgets.html
==== End update ====
(at least) two options:
- https://github.com/gabrielemariotti/cardslib
or
- https://github.com/afollestad/Cards-UI is a UI library for showing Cards.
See https://github.com/afollestad/Cards-UI/wiki/2.-Intro-Tutorial for an simple introduction.
Solution 4:
I made a very similar Layout you can look at here https://github.com/Nammari/GooglePlusLayout and for a video demo here http://youtu.be/jvfDuJz4fw4 for the animation that get applied to children , for more details look here http://nammari.tumblr.com/post/41893669349/goolge-plus-layout for a blog post that clarify every thing .
Solution 5:
The card look and feel shouldn't be hard. You just need a ListView without dividers and your list view items should have a margin.
Like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_margin="16dp"
android:layout_height="wrap_content"
android:background="@android:color/background_light">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:paddingRight="16dp"
android:paddingLeft="16dp"
android:text="Title"
android:textSize="18dp"
android:textColor="@android:color/primary_text_holo_light"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingRight="16dp"
android:paddingLeft="16dp"
android:text="Subtitle"
android:textSize="14dp"
android:textColor="@android:color/primary_text_holo_light"
/>
<ImageView android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/background"/>
</LinearLayout>