How to position CardViews next to each other?

问题

I want to make Google PlayStore-like-CardView layout. However, I do not manage to put Card Views side-by-side, rather they are being listed Vertically, top down.

SCREENSHOT:

cardview.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="150dp"
    android:layout_height="200dp"
    android:layout_margin="5dp"
    android:layout_gravity="center"
    card_view:cardCornerRadius="2dp"
    card_view:contentPadding="10dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/img_appicon"
                android:layout_alignParentTop="true"
                android:layout_alignLeft="@+id/tv_appname"
                android:layout_alignStart="@+id/tv_appname" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:text="App Name"
                android:id="@+id/tv_appname"
                android:layout_below="@+id/img_appicon"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="27dp" />
        </RelativeLayout>
</android.support.v7.widget.CardView>

Any ideas how can I put those CardViews side-by-side?

Thanks.

回答1:

Have you tried putting them inside a linear layout with width match_parent, height wrap_content, orientation horizontal ?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view1"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        card_view:cardCornerRadius="2dp"
        card_view:contentPadding="10dp">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <ImageView
                android:id="@+id/img_appicon"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_alignLeft="@+id/tv_appname"
                android:layout_alignParentTop="true"
                android:layout_alignStart="@+id/tv_appname" />

            <TextView
                android:id="@+id/tv_appname"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/img_appicon"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="27dp"
                android:text="App Name"
                android:textAppearance="?android:attr/textAppearanceMedium" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view2"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        card_view:cardCornerRadius="2dp"
        card_view:contentPadding="10dp">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <ImageView
                android:id="@+id/img_appicon2"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_alignLeft="@+id/tv_appname2"
                android:layout_alignParentTop="true"
                android:layout_alignStart="@+id/tv_appname2" />

            <TextView
                android:id="@+id/tv_appname2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/img_appicon2"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="27dp"
                android:text="App Name"
                android:textAppearance="?android:attr/textAppearanceMedium" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

来源：https://stackoverflow.com/questions/36140558/how-to-position-cardviews-next-to-each-other