CODEWITHSUNDEEP
androiduser-interfaceandroid-5.0-lollipopmaterial-design
James Parsons
James Parsons

Reputation: 6057

CardViews are all piled onto each other

I am trying to create an app that will have a list of cardviews. I have added three cardviews in markup like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="james_parsons.github.io.fblafashionapp.MainActivity">

    <android.support.v7.widget.CardView android:layout_width="350dp"
        android:layout_height="350dp">

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView android:layout_width="350dp"
        android:layout_height="350dp">

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView android:layout_width="350dp"
        android:layout_height="350dp">

    </android.support.v7.widget.CardView>
</RelativeLayout>

This however, piles all of the CardViews on top of each other and makes them appear as only one:

It only seem like there is one <code>CardView</code>

I want my cards to be stacked vertically like the ones seen here. How can I achieve this?

Upvotes: 1

Views: 471

Answers (1)

Derek Fung
Derek Fung

Reputation: 8211

For you case, LinearLayout suits you best. Also because the layout can be longer than one screen, you should wrap it with a ScrollView. Moreover, for RelativeLayout, the default position of child is top left, if you want something different, you have to specific some layout attributes, e.g. android:layout_below.

<ScrollView 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"
    tools:context="james_parsons.github.io.fblafashionapp.MainActivity">

    <LinearLayout 
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v7.widget.CardView android:layout_width="350dp"
            android:layout_height="350dp">

        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView android:layout_width="350dp"
            android:layout_height="350dp">

        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView android:layout_width="350dp"
            android:layout_height="350dp">

        </android.support.v7.widget.CardView>
    </LinearLayout>
<ScrollView>

Edit:

Also, do not trust the layout preview totally, though it should be right this time. There are several limitations that makes the layout preview sometimes not accurate, you should only use at a quick test, and only trust the layout in real devices or emulators.

Upvotes: 2

Related Questions