CardView and RecyclerView divider behaviour

问题

I am trying to use RecyclerView with CardView as an single item of the list.
I want to implement horizontal list, with LayoutManager it is really easy.
So I started to implement it. It seems that everything works, but not as I expected here is the result using CardView as an list item.

Looks pretty good, but I haven't set any paddings, dividers and rounded corners.
Here is my XML for card view item.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:gravity="center"
       >
        <ImageView
            android:id="@+id/image_view"
            android:src="@drawable/androidsss"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentTop="true"
            android:layout_centerInParent="true"
            />
        <TextView
            android:id="@+id/info_text"
            android:layout_below="@+id/image_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:ellipsize="end"
            android:singleLine="true"
            android:textColor="@android:color/black"
            android:textSize="14sp" />
    </RelativeLayout>

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

Also there is something like small divider at the bottom of layout.
I haven't specified any.
Here is my setting up code for RecyclerView

 mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
    mRecyclerView.setHasFixedSize(true);
    mLayoutManager = new LinearLayoutManager(this);
    mLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
    mRecyclerView.setLayoutManager(mLayoutManager);
 //   mRecyclerView.addItemDecoration(new SimpleDividerItemDecoration(this));
    mAdapter = new CardViewDataAdapter(myDataset);
    mRecyclerView.setAdapter(mAdapter);

Interesting thing that with simple item, not card view, everything works as expected. Here is an example.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="150dp"
    android:layout_height="100dp"
    android:background="@android:color/white"
    >

    <ImageView
        android:id="@+id/item_image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        />
    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/item_image"
        android:text="Hello World !!"
        android:layout_centerInParent="true"
        android:textColor="@android:color/black"
        />
</RelativeLayout>

Where is the problem, is it my fault or bug ?

回答1:

The spaces you can see are compat paddings and they're visible only on pre-Lollipop devices (or everywhere if you set card_view:cardUseCompatPadding="true"). You can find values here (CardView's doc).

Before L, CardView adds padding to its content and draws shadows to that area. This padding amount is equal to maxCardElevation + (1 - cos45) * cornerRadius on the sides and maxCardElevation * 1.5 + (1 - cos45) * cornerRadius on top and bottom.

Also, as far as I can see, there is some default radius for CardView's corner (probably it is 2dp).

You can try any tricks to avoid these spaces or (IMHO it's better) consider if you should make view with custom background, like simple "tile". Here you have some info from Google about design.

回答2:

That's the default behavior of CardView, however you can modify how it should look, like removing the border radius and etc by adding attributes to your CardView declaration.

<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"
    card_view:cardBackgroundColor='#ffffff'>

For more information must visit this to clip shadows https://developer.android.com/training/material/shadows-clipping.html https://developer.android.com/reference/android/support/v7/widget/CardView.html

回答3:

Try this layout

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

        <RelativeLayout
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:gravity="center">

            <ImageView
                android:id="@+id/image_view"
                android:src="@drawable/androidsss"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_alignParentTop="true"
                android:layout_centerInParent="true" />

            <TextView
                android:id="@+id/info_text"
                android:layout_below="@+id/image_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:ellipsize="end"
                android:singleLine="true"
                android:textColor="@android:color/black"
                android:textSize="14sp" />
        </RelativeLayout>

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

来源：https://stackoverflow.com/questions/30420869/cardview-and-recyclerview-divider-behaviour